Intro to the Tulip App Editor

Purpose

In this article, you will learn:

• The different parts of the Tulip App Editor
• Basic visual elements that you can add to an app (also called Widgets)
• How to add basic logic using Buttons
• How to complete your app to log data

If you are still getting familiar with the Tulip App Editor, this article is for you. We’ll use an example of a visual work instructions app to walk through all the major tools in the App Editor.

Before we get started, here's a quick reminder: The App Editor allows you to build apps for operators without writing any code.

Here's what it looks like:

The App Editor allows you to create a series of Steps, or screens that the operators can use within an app. The Steps can also be organized into Step Groups for better usability.

A Quick Overview of the Tulip App Editor

The Steps List on the left shows the list of steps including the Base Layout.

Any formatting or layout edits you make to the Base Layout will automatically apply to each individual Step in the app.

You can alter the Base Layout within each Step by "unlocking" individual elements in the Side Pane on the right.

Using 'right-click' you can Duplicate, Group Steps, or Delete.

You can click on a step to view the elements that it contains.

The Toolbar at the top of the screen includes visual elements that can be added to the app. These are elements like shapes, photos, text, videos and buttons.  To add a new visual element to the app, simply click and drag it to the desired location.

On the right side of the Toolbar there are additional tools you can use to layer the objects in the Tulip App Editor.

The Side Pane on the right side of the screen is where you handle all of the formatting and logic in the app. Read more about Widget configuration here.

There are three tabs:

• Step Tab
• App Tab
• Widget Tab

The Step Tab shows you:

• Formatting options for the whole Step
• Allows you specify the target cycle time for this step
• Allows you to reset to the layout specified on the Base Layout
• Allows you to delete the current step
• Gives you the ability to build logic that will be executed whenever this step is opened or closed - we’ll talk more about Triggers a bit later.

The App Tab:

• Allows you to print out the steps in the app
• Allows you to adjust the cycle timer for the entire app
• Shows you a list of all Variables associated with this app
• Allows you to specify the app resolution to fit your intended interface.
• Allows you to add comments if multiple administrators are reviewing changes
• Gives you the ability to build logic that will be executed whenever this app is started, completed or cancelled

Clicking an element in the app will expose another tab in the side pane called Widget Tab. This is where you go to adjust the format of the various visual elements of the app, along with its behavior when interacted with.

Using the pan and zoom tool you can:

• Move the editing surface of your application
• Zoom in or Zoom out

Adding Steps to your App

To create a new step in a Tulip App, click the Add Step option on the left side of the App Editor. The design of the new step will reflect the Base Layout.

Pro-tip: you can also duplicate an existing step if you want to reuse design or logic on your new step by clicking on the gear icon and select “Duplicate Step”.

Adding Logic to Your App

Now that we’ve covered how to add new Steps, we need to give the operators a way to move from step to step. We can create this logic in Tulip using Triggers. To start, let’s use a simple button to navigate from step to step.

You can add a custom button by selecting “Button” from the Toolbar along the top of the App Editor. Drag the button to the desired location.

Add a label for the button and adjust the format/coloring options using the Side Pane along the right.

To add logic to the button, click the "+" sign next to Triggers in the side pane.

Triggers let you add logic to your applications without having to use any code using a simple when, if, then, else sequence. This is the Trigger Editor that opens after you click the "+" sign.

An Action or a Transition is a change that will happen in the app when the Trigger fires.

There are many Actions and Transitions that you can take when the button in pressed.

This trigger is simple:

When:  Button is pressed

Then: The current time is saved to a Variable

And then:   Go to Step → Next.

This button lets you move to the next Step. You would typically want to add a button allowing users to navigate to the previous step as well.

Once you’ve built out the basic logic of the application, you can click the Run or Test option from the top right of the App Editor. This will launch your application in the TTulip Player and let you test the app on your computer in real-time.

Completing your App to log the data

You need to add a Complete button so that Tulip will log all the data from the operator's use of the app.

In this example, we are going to add another button on the last Step of the app to log a completion.

Click the "Buttons" option in the Toolbar, and choose the Complete button. Drag it onto the last step in your app.

Congratulations! That’s all you need to know to build a simple work instruction application.

Further Reading

Use these step-by-step guides to build a full app using these concepts.

• Creating a Tulip App
• Build a full defect reporting app
• Build an app that captures work order data

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!