How to Configure Widgets

Overview

Every element within your application, which Tulip calls Widgets, can be configured to best suit the desired form and function.

Different Widgets support different configuration options. These settings can impact many different attributes of widgets:

• Content/Data Mapping
  • ex: What text will be displayed on a button, What columns of a table will be displayed?
  • ex: Where should the value of an input be stored, What table should be displayed?
• Styling
  • ex: What color should a button be, Should a text widget be set to bold or italics?
• Triggers
  • ex: What happens when a user clicks [Enter], What happens when a user selects a row?

How To Configure Widgets

To edit a widget, it must be selected.

1. Select a Widget you would like to configure.
2. When selected, the Side Pane for that widget is displayed.
   

Content - Data Mapping

The content displayed for Widgets differs for various widgets, but the process for mapping doesn't differ. The "Datasource" Widget setting defines the source of the widget contents. When you first add widgets, their datasouce will be unmapped.

Datasource Type is the broad type of source the widget is mapped to. Examples include Variables, Table Record Fields, Machine Attributes, and more.

Datasource is the specific attribute within that type that the widget is mapped to.

Data Mapping

For Inputs Datasource will represent the location where user input will be stored, for all other widgets, Datasource will represent the source of the data the widget displays.

Many widgets are tied to data. Widgets content can be driven by dynamic data, like Table Records or Variables. Input widgets can also be used to populate data into variables or table record fields.

Input widgets are read/write with their datasource, changes in the input will change the datasource's value. Most widgets are read-only, where they can be driven by dynamic data, but can't directly impact the value of their datasource.

Styling

You can edit the following properties of widgets after they are uploaded to Tulip in the Side Pane on the right side of the screen. The options for styling vary based on the widget, but most widgets have the options listed below-

• Font Size
• Font Color
• Font Style
• Button Text Align
• Button Color
• Size
• Rotation
• Drop Shadow
• Border Radius
• Blinking

Data Driven Widgets

Many Widgets can be populated from dynamic data. In most dynamic widgets, the Datasource setting indicates what data is driving the widget state.

Color
All Color properties can either be set statically or dynamically based on a variable.

Variable
The Variable widget's contents can be tied to the value of any app variable, including colors. This widget will dynamically change as the source variable changes.

Table Record
The table record widget will reflect the current value of an entire record or an individual table record field.

Interactive Table
The interactive table widget displays the current state of a Table.

Triggers

Many widgets can trigger app logic. Different widgets offer different behavior that drives Triggers firing.

Input Widgets
For all input widgets, when the input is changed, their triggers will run.

Interactive Table
When a user selects a row, its trigger will run. Additionally, that row will be loaded into the table record placeholder set in the Linked Record widget setting. Learn more about the interactive table widget here.

Further Reading

• Input Widgets
• Interactive Table Widgets
• Button Widgets