An Input Widget allows for users to add data entry fields to their Tulip application. The following article will provide an overview on how to add these widgets, how to store the entered values, and the different data type options.

Creating an Input Widget

From the App Editor, select the Inputs option on the Toolbar:

The following Input Widgets are available, correlating to different data types:

  • Checkbox

  • Text

  • Number

  • Single Select

  • Multiselect

  • Date Picker

  • Image

Selecting a Data Source

To use an Input Widget, you must select a location where to store the entered data.

Variables

An Input Widget can be configured to store its value to a variable of the same data type. From the widget, you'll have the ability to choose an existing variable or create a new variable.

By assigning a variable to an Input Widget, the entered value can be referenced throughout the app to build various logic.

Tulip Table Records

An Input Widget can also be configured to store its value to a Table Record of the same data type. By assigning the widget to a Tulip Table Record, you can live edit a loaded table record in a placeholder. The assignment happens on a specific column of the selected table record.

This will automatically store the entered value of the widget to the table record.

NOTE: To store to a table record, the target Table Record Placeholder must be first loaded.

Input Widget Types

Checkbox

The Checkbox option provides a boolean output, which can be turned to Yes or No by checking or un-checking the box. For more information on checkboxes, check out this article here.

Text

When selecting Text input, you will be able to assign the widget to a column of a Tulip Table, or a Variable. Similarly to the checkbox, a variable will need to be assigned to the text Input Widget in order to use the data later in the app. This variable can be selected from a list of text variables, or created inline from the Variable selection dropdown.

This will behave 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.

Number

A number Input Widget is also similar to the previous two, as it will need 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.

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

Single Select

The Single Select widget allows you to select an option from a list, with a number of powerful configurations. This widgets can be used with a multitude of different data types: boolean, color, datetime, image URL, integer, interval, machine, number, station, text, and users.

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

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

You can also have the Options be listed as the parts of a dynamic Array variable. To best use this functionality, make sure you already understand arrays.

In this method, all of the components of the selected array can be selected. To be clear, 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 an 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 an Array, rather than simply a 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. Note that you can set the Label Text, Label Font Size, and Label Font Color for the widget.

The widget will then allow for the Datetime to be selected by the user within an App on a normal step. The interface will look 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 will need 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.


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!

Did this answer your question?