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.
NOTE:
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might be different than what you see in images in this article. No worries. The ideas are the same even if the content is a little different.
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 Context 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.
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 context 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 Context Pane along the right.
To add logic to the button, click the "+" sign next to Triggers in the Context 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.
You can also head to community.tulip.co to post your question or see if others have faced a similar question!
Widgets
Widgets are the elements that make up a specific App Step. Widgets can display information to users, collect user input, or trigger app logic.
Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.
Tulip University
Tulip University is a free resource to guide Tulip users through learning the Tulip. 30+ courses cover everything from the basics to Connector Functions and Edge Devices.
A view your users will see within an application. Steps can be viewed chronologically or in whatever order best fits your process.
Steps can be grouped into Step Groups to manage and organize your app Steps.
Step Groups
Step Groups are a mechanism to organize and group individual steps. Step groups can be duplicated/deleted and reordered like individual steps.
Base Layout
The Base Layout is the base template that all other Steps will be built on top of. Establishing common navigation buttons, and a consistent app background and style across all of your app steps can expedite the training and app-building processes.
Base Layout
The Base Layout is the base template that all other Steps will be built on top of. Establishing common navigation buttons, and a consistent app background and style across all of your app steps can expedite the training and app-building processes.
Step
A view your users will see within an application. Steps can be viewed chronologically or in whatever order best fits your process.
Steps can be grouped into Step Groups to manage and organize your app Steps.
Context Pane
The Context Pane is the configuration pane on the right side of the App Editor where steps, apps, and widgets can be configured. Triggers can be added to adjust widget behavior.
Context Pane
The Context Pane is the configuration pane on the right side of the App Editor where steps, apps, and widgets can be configured. Triggers can be added to adjust widget behavior.
Step Tab
The Step Tab is the Context Pane tab where you will adjust all of the Step-level settings, including Step Triggers, Step background, Step resolution, and more.
App Tab
The App Tab is the Context Pane tab where you will adjust all of the App-level settings, including App Triggers, App background, App resolution, and more.
Widget Tab
The Widget Tab is the Context Pane tab where you will adjust all of the Widget-level settings, including Widget Triggers,Widget Datasource, Widget Contents, and more.
Step Tab
The Step Tab is the Context Pane tab where you will adjust all of the Step-level settings, including Step Triggers, Step background, Step resolution, and more.
Step
A view your users will see within an application. Steps can be viewed chronologically or in whatever order best fits your process.
Steps can be grouped into Step Groups to manage and organize your app Steps.
Base Layout
The Base Layout is the base template that all other Steps will be built on top of. Establishing common navigation buttons, and a consistent app background and style across all of your app steps can expedite the training and app-building processes.
Trigger
Triggers are the mechanism to do things in Tulip Apps. Store data, move users between Steps, Interface with hardware, Etc.
Triggers can be added to widgets, machines, devices, apps, and steps.
App Tab
The App Tab is the Context Pane tab where you will adjust all of the App-level settings, including App Triggers, App background, App resolution, and more.
Variables
Variables are a location to store app information. Variables have a specific type that must match the contents they can store.
Variables are only accessible within a single application and are cleared when the app is restarted or completed.
Widget Tab
The Widget Tab is the Context Pane tab where you will adjust all of the Widget-level settings, including Widget Triggers,Widget Datasource, Widget Contents, and more.
Steps
A view your users will see within an application. Steps can be viewed chronologically or in whatever order best fits your process.
Steps can be grouped into Step Groups to manage and organize your app Steps.
Base Layout
The Base Layout is the base template that all other Steps will be built on top of. Establishing common navigation buttons, and a consistent app background and style across all of your app steps can expedite the training and app-building processes.
Steps
A view your users will see within an application. Steps can be viewed chronologically or in whatever order best fits your process.
Steps can be grouped into Step Groups to manage and organize your app Steps.
Trigger
Triggers are the mechanism to do things in Tulip Apps. Store data, move users between Steps, Interface with hardware, Etc.
Triggers can be added to widgets, machines, devices, apps, and steps.
Context Pane
The Context Pane is the configuration pane on the right side of the App Editor where steps, apps, and widgets can be configured. Triggers can be added to adjust widget behavior.
Trigger
Triggers are the mechanism to do things in Tulip Apps. Store data, move users between Steps, Interface with hardware, Etc.
Triggers can be added to widgets, machines, devices, apps, and steps.
Action
Actions are different operations that can be executed in Triggers. Actions cannot move users to other apps, or other steps.
Many Actions can be added to a single Trigger.
ex. Store the value of variable x to table field y, Print app step, Adjust Edge device GPIO pin.
Transitions
Transitionsare different operations that can be executed in Triggers. Actions can only move users to other apps, or other steps.
Only 1 Transitioncan be added to a single Trigger.
ex. Complete this app, then go to app x. Move to the next step, etc.
Variable
Variables are a location to store app information. Variables have a specific type that must match the contents they can store.
Variables are only accessible within a single application and are cleared when the app is restarted or completed.
Step
A view your users will see within an application. Steps can be viewed chronologically or in whatever order best fits your process.
Steps can be grouped into Step Groups to manage and organize your app Steps.
Tulip Player
Tulip Player is the Windows/Mac executable program where users can run Tulip apps. Tulip player allows you to create a more seamless user experience by removing the need for a web browser and allows increased IT controls.
Was this article helpful?
Thank you for your feedback! Our team will get back to you