App Building

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, and connections to other systems, devices, and machines. 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 within app groups and other folders, such as recent and favorite apps, 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:

• Steps
• Analytics
• Versions
• Completions
• Permissions
• Approvals

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.

App Editor

The App Editor is where you build and edit your app. The following diagram shows the different parts that make up the app editor:

1. Add Step/Step Group - Add a new Step or Step Group
2. Step/Records Panel - View your steps via the step tab or switch to the records tab to view the Tables used
3. Workspace - The space to create your app interface
4. Add an Asset Widget - Add a shape, icon, or logo to your app
5. Add a Button Widget - Add a button to your app
6. Add an Input Widget - Add an input field to your app
7. Add a Text Widget - Add a text box to your app
8. Embed a Widget- Embed a variety of widgets, such as images, analyses, machine attributes, and more
9. Add Camera Widget - Add a regular camera or barcode camera snapshot
10. Translate - The Tulip Player will automatically translate the app into your selected language via your Tulip profile
11. Create Snapshot - Save a current version of your app, creating a duplicate so you can test multiple versions without fault of error
12. Test - Test your app via Developer Mode
13. Run - Run your app in the Tulip Player
14. Publish - Publish your app
15. Forward/Back - Move an element within the workspace forward or behind other elements
16. 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

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.

Base Layout

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

Widgets are the building blocks of apps. They can display information, collect data, execute Trigger logic, and more.

Icon Widgets

Place shapes, icons, or logos within the workspace and configure logic to design the look and branding of your app.

Button Widgets

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.

Input Widgets

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.

Text Widget

Display static or dynamic text including the values of Variables, plain static text, and entire Record Placeholders.

Embedded Widgets

Embed videos, images, CAD, documents, barcode scanners, and more into your app.

Read more about embedded widgets here.

Camera Widgets

Show your Tulip Vision camera feed or scan a barcode all with the camera on your device.

Read more about camera widgets here.

Custom Widgets

If none of the above widgets are suiting your needs, you can create your own widget using HTML, CSS, and Javascript to extend the platform’s capabilities.

Learn more about custom widgets here.

Triggers

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

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.

Additional Resources

Tulip University

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.

Tulip Library

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.

Tulip Community

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.