Adding Input Widgets to Steps

Enter data onto any step using Input Widgets

In order to cut down on the number of steps and routing options an operator must go through, it is often easier to enter data within an instructions step. You can also write directly to Tulip Tables using Input Widgets.

The following article describes how to initiate a data entry field, or Input Widget, onto any app Step.

Creating A Widget to Store User Input

Select the Input option on the Toolbar:

Once selected, you have the following options:

• Checkbox
• Text
• File
• Number
• Single Select
• Multiselect
• Date Picker
• Image
• Signature

Selecting a Datasource

Variable

Choose an existing variable, or create a new variable to assign to the input Widget:

By assigning a Variable to the input, the input value can be referenced throughout the app to build various logic.

Tulip Table Record

By assigning your input widget to a Tulip Table Record, you can directly edit a table record. Specify the column of the table record in the dropdown:

This automatically saves the value of the input widget to the table record.

Configuring Triggers

Many of the input widgets have an option to configure a trigger to fire when an action occurs. The types of actions and the associated widgets are described below.

Enter Key

The Enter Key trigger follows the logic of: when the enter key is pressed, if conditions are met, then perform an action. This option is associated with the text and number input widgets.

Input Change

The Input Change trigger follows the logic of: when input changes, if conditions are met, then perform an action. This option is associated with the checkbox, single select, multiselect, date picker, and image input widgets.

Input Widget Types

Checkbox

The checkbox option provides a Boolean output, which can be turned to Yes or No by checking or unchecking the box. For more information on checkboxes, check out [this article here.](https://support.tulip.co/docs/how-to-use-the-checkbox-widget

Text

When selecting a Text Input, you are able to assign the Widget to a column of a Tulip Table, or a Variable. Similarly to the checkbox, a variable needs to be assigned to the text Input Widget in order to use the data later in the app. Select this variable from a list of text variables, or create inline from the Variable selection dropdown.

This behaves in the same way as a variable created in a Form Step input.

If you want to make the text input widget larger, select the "Multiple Lines" toggle in the Context Pane. You can then change the dimensions to fill any space.

File

The File Input Widget is similar to the text input, with the ability to assign the input to a column of a Tulip Table, or a Variable. A variable needs to be assigned to the File Input Widget in order to use the data later in the app. Select this variable from a list of file variables, or create inline from the Variable selection dropdown.

You can use the cloud shaped upload button to import a file from your device to the input widget or enter the file URL directly.

Number

A Number Input Widget is also similar to the previous widgets, as it needs to be assigned a Number Variable to appropriately use the entered data. Select an existing variable, or create one by typing a name and selecting Create.

Once you add a Variable, in this case an additional option is revealed.

In the Format option, both Integer and Decimal can be selected for the display of the information. An Integer type displays only the whole number, while a Decimal displays up to the number of significant figures selected. The Precision option determines this number of figures to be displayed.

Single Select

To best use this Widget, make sure you already understand arrays

The single select Input Widget allows you to select an option from a list, with a number of powerful configurations. Similar to other Input Widgets, you can select the Datasource type of either Tulip Table Record, or Variable:

One very simple way to use this is to assign or create a text variable in the Variable field, and display it as a Dropdown with statically created values. You can add options by selecting 'New Option' just below the Options field. Once done, it looks like this:

If you change the Display field to a Menu, the widget will take on the following form for display:

You can also list the Options as the parts of an Array variable.

In this method, you can select all of the components of the selected Array. The Array is the variable selected beneath Options, and the Variable named 'Test' will store the user's selected value from the list of options.

Using the Array Variable configuration is extremely powerful, as it allows you to take options from the existing array, and also push new values onto the array to be selected. As an example, a button can add an option to this widget by adding a Trigger. the trigger might look something like this:

In this example, the button adds the option 'Something New' to the Menu or Dropdown Input Widget.

Multiselect

The Multiselect option follows the same configurations as the Single Select widget, with some small configuration differences. The Multiselect widget can not be assigned to a Tulip Table Record. Additionally, the resultant output of this widget must be a Text Array, rather than simply a Text variable as in the Single Select widget.

This allows you to select multiple options from the Menu or Dropdown, and output them to an Array variable. The configuration on view and select options are exactly the same as the Single Select widget options, detailed above. The Multiselect widget will display as below.

Date Picker

Once selected, choose or create a Datetime variable to associate with the widget, or a column of a Tulip Table. If you choose Tulip Table Record as the Datasource, the input will write directly to the table. If you choose Variable as a Datasource, the output of the selected Datetime will store to the given variable.

The widget then allows for the Datetime to be selected by the user within an App on a normal step. The interface looks like this in the Player:

Image

The Image widget allows the operator to either take an image on the step, or upload an image from local storage. This widget needs an Image URL data type variable to store the image taken to an appropriate variable.

By selecting a Datasource of Tulip Table Record, you can save the image directly to a Tulip Table. Please note the Aspect Ratio can also be adjusted within the Context Pane for this widget.

Within the Player, users can also "Flip" and "Rotate" live view from the camera.

Signature

The Signature Input Widget can be used to require an operator to sign and validate data in a variable, fields on a table record, or both.

The data to be validated by the signature needs to be defined and the input widget includes other configuration options as well, such as designating a signee, adding a description of the signature meaning, and mandating a comment as required.

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!