--- title: "Widgets" slug: "widgets" status: "new" updated: 2025-05-28T22:08:47Z published: 2025-05-28T22:08:47Z canonical: "support.tulip.co/widgets" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Widgets :::(Info) (NOTE) Not all widgets are available on all instances and subscription plans. Reach out to [support@tulip.co](mailto:suport@tulip.co) to enquire about enabling additional widgets. ::: Widgets are the building blocks of apps. {{glossary.Widgets}} are used to display information for users, collect data from users, and execute trigger logic. Dozens of widgets can be combined within an app to configure app steps to build an app interface that streamlines your process. ## Types of widgets ![Adding Input Widgets to Normal Steps_172566037](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Adding%20Input%20Widgets%20to%20Normal%20Steps_172566037.png) ### Button widgets A button that displays text and can trigger an action. The button widget is a blank widget that is completely user configurable. The Next/Previous/Menu/Complete widgets include default triggers to streamline app building. **Button** - A completely configurable button that can trigger any logic **Previous** - Go to the last step users were on. **Menu** - Open the menu where users can change apps, change the app language, and log out **Next** - Advance to the next app step. **Complete** - Execute an app completion storing the value of app variables and go back to the app splash screen. Read more about button widgets [here](/r230/docs/how-to-use-buttons-in-apps). ### Input widgets Collect data from your users with input widgets. Each input widget supports different types of variables. Read more about input widgets [here](/r230/docs/input-widgets). ### Text widgets Display static or dynamic text including the values of {{glossary.Variables}}, plain static text, and entire {{glossary.Record Placeholder}}. ### Embedded widgets Embed video, CAD, Documents, and much much more into your application with embedded widgets. Read more about embedded widgets [here](/r230/docs/embedded-widgets). ### Camera widgets Display your Tulip Vision camera feed or scan barcodes with the device camera with camera widgets. Read about Tulip Vision [here](/r230/docs/vision). ### Custom widgets When the default widgets don't perfectly fit your needs, custom widgets can be built to fill just about any use case. Combine HMTL, JavaScript, and CSS to extend the platform extensively. Read more about custom widgets [here](/r230/docs/custom-widgets-overview-1). ### **Icons** Drag, drop, and resize vector images within your application to align your Tulip app with your brand. ## Configure widgets You can configure widgets to best suit the desired form and function. Different widgets support different configuration options. These settings can impact many different attributes of widgets: - [Widget datasources](/r230/docs/widgets#widget-datasources) - 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](/r230/docs/widgets#styling) - ex: What color should a button be, Should a text widget be set to **bold** or *italics*? - [Triggers](/r230/docs/widgets#triggers) - ex: What happens when a user clicks [Enter], What happens when a user selects a row? **To edit a widget, you must select it.** 1. Select a {{glossary.Widget}} you would like to configure. 2. The **Widget tab** opens in the {{glossary.Context Pane}}. ![side pane](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screen%20Recording%202022-08-27%20at%2010.01.58%20AM.gif){height="" width=""} ## Widget datasources The content displayed for {{glossary.Widgets}} differs for various widgets, but the process for mapping doesn't differ. The **Datasource** setting defines the source of the widget contents. When you first add widgets, their datasouce is unmapped. ![Datasource mapping.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Datasource%20mapping.png){height="" width="400"} **Datasource type** is the broad type of source the widget is mapped to. Examples include {{glossary.Variable}}s, {{glossary.Table Record Field}}s, Machine {{glossary.Attribute}}s, and more. **Datasource** is the specific attribute within that type that the widget is mapped to. :::(Info) (NOTE) A warning icon appears in the corner of an input to indicate that no datasource is selected. ::: ### Data mapping **For input widgets**, the datasource will represent the location where user input is stored. For all other widgets, the datasource represents the source of the data the widget displays. Many widgets are tied to data. Widgets content can be driven by dynamic data, like {{glossary.Table Record}}s or {{glossary.Variables}}. [Input widgets ](/r230/docs/input-widgets)can also be used to populate data into [variables](/r230/docs/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. ### Data driven widgets Some widgets can be populated from dynamic data. In most dynamic widgets, the *Datasource* setting indicates what data is driving the widget state. ![image.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image%284%29.png){height="" width="450"} **{{glossary.Color}}** All Color properties can either be set statically or dynamically based on a variable. **{{glossary.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. **{{glossary.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 {{glossary.Table}}. ## Styling You can edit the following properties of widgets after they are uploaded to Tulip in the {{glossary.Context 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 ### Widget triggers Different widgets have certain behavior that determines {{glossary.Trigger}} logic. ![image.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image%285%29.png){height="200" width=""} **Input Widgets** For all input widgets, when the input is changed, their triggers will run. :::(Info) (NOTE) In the case of Number and Text input widgets, {{glossary.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](/r230/docs/what-is-an-interactive-table-widget). :::(Warning) (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 * [Input Widgets](/r230/docs/input-widgets) * [Embedded Widgets](/r230/docs/embedded-widgets) * [Button Widgets](/r230/docs/how-to-use-buttons-in-apps)