Building an app in Tulip may seem intimidating at first, but once you break down and understand the core elements to it, it’s not so complicated. Applications combine the following principles to create a new piece of software: UI design, conditional logic and functions, data and databases, analytics, connections to other systems, devices, and machiens. In this guide, we’ll discuss the key concepts and interface tools you need to successfully build applications. Remember–Tulip is a no-code platform, so we’ll focus on the features you need to design production-ready apps, regardless of your coding experience.
We’ll start by going through the main interface to view your apps.
Creating and Organizing Apps
To view all the apps in your Instance, navigate to the apps page in your Tulip instance by going to: [your-instance].tulip.co/group. You can also hover over the Apps tab in the upper navigation bar and click “Apps”.
This page is where you view the apps you’ve built in your instance, separated into App Groups, folders to organize a collection of apps. You can also view each app under its app group on the left-side navigation panel.
Select an existing app from within a group to view and edit its information. You can also view any of the following app data:
To edit the app, click the blue “Edit” button in the top-right corner or click directly on a step.
To create a new app, navigate to the Apps screen and click the blue “Create App” button in the top-right corner. You can also click the small arrow next to the button to create a new App Group.
Select a blank template or a pre-designed Featured App and click “Create” at the bottom-left of the window. These featured templates were designed by fellow Tulip users so others have quick solutions to issues if they don’t want to build an app from scratch. You can also edit these templates to customize them to your needs.
Once redirected to the app info screen, name your app and give a description. Labeling this info is helpful so you can keep track of the app no matter what stage of the process you’re in.
Click the blue “Edit” button in the top-right corner to go to the App Editor interface.
The App Editor is where you build and edit your app. The following diagram shows the different parts that make up the app editor:
- Add Step/Step Group - Add a new Step or Step Group
- Step/Records Panel - View your steps via the step tab or switch to the records tab to view the Tables used
- Workspace - The space to create your app interface
- Add an Asset Widget - Add a shape, icon, or logo to your app
- Add a Button Widget - Add a button to your app
- Add an Input Widget - Add an input field to your app
- Add a Text Widget - Add a text box to your app
- Embed a Widget- Embed a variety of widgets, such as images, analyses, machine attributes, and more
- Add Camera Widget - Add a regular camera or barcode camera snapshot
- Translate - The Tulip Player will automatically translate the app into your selected language via your Tulip profile
- Create Snapshot - Save a current version of your app, creating a duplicate so you can test multiple versions without fault of error
- Test - Test your app via Developer Mode
- Run - Run your app in the Tulip Player
- Publish - Publish your app
- Forward/Back - Move an element within the workspace forward or behind other elements
- Trigger Panel - Set Triggers, stylistic elements, and app-level information
For an in-depth overview of the app editor, visit Intro to the Tulip App Editor.
Steps are the “pages” of your app, the various screens that display content. To add a step, click the “Add Step” button which shows four options:
- Steps - A regular step that can be customized to your needs or through using widgets
- Form Steps and Signature Forms - These options have been disabled for new instances after r235.
- Step Groups - A folder for steps to help organize your app and perform bulk operations, such as rearranging/duplicating steps
Steps can be linear or non-linear, in that they don't have to consecutively follow each other in the order you arrange them. The logic you add to your app will determine the transition of steps.
For an in-depth guide to working with steps, see a collection of articles here: Steps.
The Base Layout is the template that applies to each step you create. Creating a base layout makes it easier to build your app, with the foundational elements automatically added to each step, and ensures a cohesive style throughout your app.
To navigate to the base layout, click the “Base Layout” button at the bottom of the step/record panel.
While in the base layout, anything you place within the workspace will appear on all of your steps. This process makes it quick and easy to set up the layout of your app, eliminating the task of individually building each step from scratch.
For an in-depth guide on building a base layout, see How to Use Base Layout.
Widgets are the building blocks of apps. They can display information, collect data, execute Trigger logic, and more.
Place shapes, icons, or logos within the workspace and configure logic to design the look and branding of your app.
Choose from a variety of buttons, one with pre-programmed logic or blank custom ones, to use in your app.
Read more about button widgets here.
Collect data from app users with Input Widgets, with each type of input representing a different variable of data.
Read more about input widgets here.
Display static or dynamic text including the values of Variables, plain static text, and entire Record Placeholders.
Embed videos, images, CAD, documents, barcode scanners, and more into your app.
Read more about embedded widgets here.
Show your Tulip Vision camera feed or scan a barcode all with the camera on your device.
Read more about camera widgets here.
Learn more about custom widgets here.
Triggers enable you to add logic to your app.
Without triggers, your app is a flat screen; triggers make your app do something. Triggers can be added to widgets, as well as to steps (Step level Triggers) and apps (App Level Triggers), and upon certain events like a device firing. For a widget, select the one you want to add a trigger to and in the Trigger Panel, click the plus sign next to “Trigger”.
To add a trigger to a step, make sure you’re on the step you want to add a trigger to. Navigate to the Step tab in the Trigger Panel and select one from the list of options by clicking the plus sign.
All triggers follow the same basic format: when an action happens, then perform the following Action and/or Transition. Triggers can be as simple or complicated as you need, having the ability to add multiple actions. You can also add if statements, that add a condition to the action being performed, if the criteria is met.
With an If statement, you set the conditions that allow actions to follow.
Then statements are either an action or a transition. An action is a change in the app that is not related to changing the steps. A transition is either changing the steps or completing the app.
Finally, to coincide with if statements, there are else if statements which determine the alternate action to take when the if statement is proven false.
For a more detailed guide on triggers, see Triggers.
Variables are types of data stored in the Tulip Cloud that are used when creating Tables and Analytics. There are many data types in Tulip, each with their own purpose:
- Boolean - Yes/no
- Color - Dynamic color to set widget status
- Datetime - Date and time timestamp
- File - Link to a file stored in Tulip
- Image - Link to an image stored in Tulip
- Integer - A whole number
- Interval - Amount of time displayed in seconds
- Machine - Machine object in Tulip
- Number - A real number
- Object - Configurable object structure with child attributes which have their own data type
- Station - Station object in Tulip from the Shop floor
- Text - Sequence of characters
- User - User object in Tulip from Account/Workspace settings
To add a variable in your app, navigate to the App tab in the Triggers Panel and select the X next to “Variables”.
The variables window opens, displaying all the variables used in your app. To create a new variable, click the blue “Create Variable” button in the top right corner.
From the pop up box, enter the name of the variable and the data type, and toggle two switches, whether or not the variable clears on app completion and whether or not the variable can be saved for analysis.
Once you create your variable, you’ll see it listed in the variables window.
You can also create variables from the trigger editor. For example, if you want to create a new entry when you click a Submit button, click the button you can to add the trigger to and open the trigger editor.
Add a new action that follows the logic above, name your variable so that you can identify it, and select the table you want it to write to. This creates a record via a variable that saves into your designated table. We'll learn more about tables in another guide, for now just remember that tables hold data.
To learn more about variables, see Variables.
Build an App with Tulip
Build a simple Hello World app with a member of Tulip. This course is also offered through Tulip University.
UI Design Best Practices
When designing your app, navigability and accessability are two important notions to keep in mind. It's important your app users can navigate through the app without getting lost and that the interactive widgets are clear in their use. If you're new to app building, you may be wondering how you can optimize your user interface for usability. For guides on design app interfaces, see App Design.
Tulip University is a free, on-demand resource for learning Tulip. Tulip University contains dozens of courses, certifications, and app-building challenges to help you take your app building to the next level. Take your first steps by enrolling in the Tulip Essentials, practice your skills with Tulip Challenges, and share your accomplishments by becoming a Tulip Certified App Builder.
The Tulip Library is a collection of ready-to-use content developed by Tulip experts. You’ll find plenty of content to get you going, ranging from full applications and app suites to templates, custom widgets, and connectors.
Have questions but can’t find the answer in the Knowledge Base or University? Got an idea for a feature that would make your life 100x easier? Need a way to keep up with the latest and greatest in the Tuliverse? Check out Tulip Community.
Tulip Community is an active, online forum for users to post questions, have discussions, and help one another use Tulip to solve their problems.