MENU
    How to Configure Widgets
    • 19 Nov 2024
    • 5 Minutes to read
    • Contributors

    How to Configure Widgets


    Article summary

    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.
      side pane

    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 mapping.png

    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.

    NOTE

    A warning icon appears in the corner of an input to indicate that no datasource is selected.

    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.
    image.png

    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.

    image.png

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

    NOTE

    In the case of Number and Text input widgets, Triggers will fire on users clicking [Enter]

    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.

    Warning

    For rows in the interactive table widget to be selectable, its Linked Record field must be tied to a table record placeholder.

    Further Reading


    Was this article helpful?