Button widgets are one of the primary ways to create Triggers in your apps. 

To add a button in a particular step, open the step in the Tulip App Builder and click on “Buttons” from the Tool Bar.

There are five options for adding buttons. Four of them have pre-defined logic associated with them. 

  • Button: This is the only option without predefined logic.  To make a custom button, select “Button” and follow the guide on Button Triggers to add custom logic.
  • Previous: The “Previous” button takes the operator to the last step they were on.
  • Menu: The “Menu” button opens the menu where the operator can add comments, pause, restart or switch the app they are using.  The operator can log out of the Tulip Player or even change the language running on the Tulip Player from here.
  • Next: The Next button takes the operator to the next step in the app flow.
  • Complete: The “Complete” button completes the app that the operator is running.

How To Add A Custom Trigger to a Button

With Button Triggers, you can run specific actions when a button is pressed within an app.

Note: Button widgets cannot be inserted in a Form Step.

Here's how to add a trigger to a button.

1- Insert a new button widget to your app by clicking the “Buttons” dropdown from the Tool Bar and choosing the type of button that you would like to use. 

In this example we will create a Custom Button using the first option, “Button”.

2- Select the new button and press the plus icon next to "Triggers" in the Context Pane. 

3- Now you should see the Trigger Editor.

Name the trigger by clicking the title in the Trigger Editor.

The default event is set to “button is pressed”.

Note: For a Button Trigger the only event available in the dropdown menu is When “button is pressed”.

4- Next, you can set an IF condition - you can leave this row blank or add a condition based on your need.

You can add a condition or multiple conditions by "Add new condition" button.

You can select “all” or “any” condition from the drop down menu to allow for multiple logical conditions.

5- Set an action (THEN) - select one of the 11 actions from the dropdown menu. In this example we will send an SMS alert to a Tulip administrator.

Add an action by pressing on the "Add new action" button in the “Then” section.

Select “Send SMS” from the drop down menu.

Select whom you would like to send the SMS to from the drop down “to” menu. 

Please note, only administrators who’ve verified their phone number will be available in this menu.

Select the message type from the message dropdown menu. The three options are:

  • Expression, 
  • Static Value, 
  • App Info.

In case you want to send a text, select Static Value and enter the text you wish to send on the text box.

Styling Buttons

You can edit the following properties of buttons after they are uploaded to Tulip in the Context Pane on the right side of the screen:

  • Font Size
  • Font Color
  • Font Style
  • Button Color
  • Size
  • Rotation
  • Drop Shadow
  • Border Radius
  • Blinking?
  • Show Fullscreen When Clicked?

Further Reading

Did this answer your question?