How To Use the Work Instructions "UI Template"

How To Use the Work Instructions "UI Template"

Here's how to quickly start building work instructions with a UI template.

In this article, you will learn...

• How to quickly build work instructions using a UI template
• How to use a pre-built design to build a beautiful app

Note: This topic is featured in the "Build a Basic Work Instructions App" course in Tulip University.

Every new Tulip account includes a folder called "UI Templates", which contains an app called "Work Instructions UI Template".

This is not an example of a real frontline operations app. Instead, it provides three step templates that you can quickly duplicate and add your own content.

This allows you to spend all your energy on migrating content to Tulip, rather than designing a work instructions app from scratch.

Here's how to use this template to build your first work instructions app.

Before building an app, you may want to use this guide to planning your first frontline operations app

An Overview of the Work Instructions UI Template

The template includes three steps:

1. A normal step that corresponds to a step in your work instructions
2. A "Complete" step that allows the operator to complete the app and save data
3. A Form Step that allows the operator to report defects.

Here's what the first step looks like:

With these three steps, you can build out a simple version of your work instructions, and then improve your app as you learn more about Tulip.

Duplicating Step Templates

To use the template, you should duplicate the first step by using the "Duplicate Step" icon in the side pane on the right side of the screen.

Duplicate this step for every step in your work instructions.

Adding Content

To add images and text to each step, you can use CTRL + V or CMD + V on a Mac to paste images and text from your clipboard.

Completing The App

The last step in the work instructions should be the "Complete Step". This includes a "Complete" button, which saves data about cycle times as well as time spent on each individual step.

Reporting A Defect

The "Defect Report" is a Form Step with 4 default widgets:

• Defect Description (text)
• Defect Type (dropdown)
• Is the defect repairable? (boolean)
• Defect photo (image from webcam)

An operator will be redirected to this form any time that they press the "Report Defect" button on a form.

Once they fill out the form and press "Submit", they will be redirected to the previous step.

If you would like to instead save the data and send the operator back to the first step in the instructions, then you should change the Submit button to "Complete App" in the side pane on the right side of the screen.

If you would like to delete one of the form widgets, select the widget and then choose the trash can icon in the side pane on the right.

Using The Template To Build Your First App

This template will allow you to build a simple work instructions app. But, you may want to add other concepts, like:

1. Allowing an operator to scan or input a barcode number
2. Adding steps with different designs
3. Saving work order data to a Table

In order to accomplish this, check out any of the guides recommended in the next section. They will help you add more complexity to the app.

Further Reading

• A Full Guide to Building a Work Instructions App
• An Overview of Tables the no-code database in Tulip
• A Guide to Form Steps

Did you find what you were looking for?

You can also head to community.tulip.co to post your question or see if others have faced a similar question!