--- 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 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. 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 Variables, plain static text, and entire 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 Widget you would like to configure. 2. The **Widget tab** opens in the Side 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) ## Widget datasources The content displayed for 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) **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 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 Table Records or 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) **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. ## 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 ### Widget triggers Different widgets have certain behavior that determines Trigger logic. ![image.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image%285%29.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](/r230/docs/what-is-an-interactive-table-widget). 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) **Widgets** **Widgets** are the elements that make up a specific **App Step.** Widgets can display information to users, collect user input, or trigger app logic. *Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.* **Variables** **Variables** are a location to store app information. Variables have a specific type that must match the contents they can store. Variables are only accessible within a single application and are cleared when the app is restarted or completed. **Table Record Placeholder** A **Table Record Placeholder** is a reference to a row in a **Tulip Table**. Table Records can be created either from the Table UI or from an App Trigger. **Widget** **Widgets** are the elements that make up a specific **App Step.** Widgets can display information to users, collect user input, or trigger app logic. *Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.* **Side Pane** **(Context Pane)** The **Side Pane** is the configuration pane on the right side of the **App Editor** where steps, apps, and widgets can be configured. **Triggers** can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png) **Variable** **Variables** are a location to store app information. Variables have a specific type that must match the contents they can store. Variables are only accessible within a single application and are cleared when the app is restarted or completed. **Table Record Field** **Table Record Fields** are single columns within a **Tulip Table.****![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Table%20Record%20Field.gif)** **Attribute** **Attributes** are properties. In Tulip, an attribute generally references a property of a machine. Attributes can be either set points or actuals. *Ex. Cycle time, Spindle speed, Feed rate, ect.* **Table Record** A **Table Record** is a reference to a row in a **Tulip Table**. Table Records can be created either from the Table UI or from with an App Trigger. To edit a record it must be loaded into a **Table Record Placeholder.** **Color** **Colors** are a Tulip Datatype to represent a color. Color variables can support transparent or semi-transparent colors. **Tulip Tables** **Tulip Tables** are a global location to store your production data. **Tables** are made up of **Records** (rows). A single can be accessed from multiple apps or stations at the same time. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Tulip%20Tables%20Overview%20-%20Feature%20Overview(1).gif) **Trigger** **Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**. **Triggers** can contain **actions**, **transitions**, and **conditions**. **Trigger** **Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**. **Triggers** can contain **actions**, **transitions**, and **conditions**.