---
title: "Display connector ouputs in apps"
slug: "displaying-interactive-lists-of-table-records-or-connector-output-in-apps"
tags: ["App Editor (Route)", "Widget", "Widgets"]
updated: 2024-11-19T17:04:13Z
published: 2024-11-19T17:04:13Z
---

> ## 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.

# Display connector ouputs in apps

*Here's how to display clickable lists of records or objects in an app.*

**In this article, you will learn...**

- **How to display multiple table records based on a variable**
- **How to select a record from the list and load it into an app**
- **How to turn connector output into an interactive list**
- **How to fire trigger logic when an operator selects a row in an interactive list**

*Note: In order to use this tutorial, you must understand how to create a Table. [Check out this separate guide](https://support.tulip.co/docs/building-your-first-table-walkthrough) if you have not done that before.*

Do you need to display any of these common shop floor assets to your operators and technicians?

- A list of work order assignments by workstation
- Machines that need to be inspected
- Tools and their locations in your facility
- Issues logged at a station and their progress to resolution
- Material lists

If so, you will need to use the Embedded Table Widget in the App Editor.

The Embedded Table widget can be fed by the following data sources:

- Multiple rows of SQL output
- Array of objects from an HTTP connector
- Tulip Table Record
- User Fields

After setting up the data source, you can then show filtered lists to operators and allow them to click any row in the table. You can even fire Trigger logic after they choose a Record.

This guide will show you how to create interactive tables for each use data source above.

If you want to see an example in context, check out this [guide to process visibility of work orders by station](https://support.tulip.co/docs/how-to-get-real-time-visibility-of-work-orders-by-workstation)

## Adding the Embedded Table Widget

### Tables

First, create a Record Placeholder on the left side of the screen. This will allow you to load one record from the list into the app.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185035224.png)

Then, add the widget to a step by selecting "Embed" from the Toolbar and then choosing "Tulip Table".

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185035663.png)

Then, link it to a Tulip Table via the "Data Source" dropdown:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_227885320.png)

After that, you can link the Embedded Table to a Record Placeholder and begin adding filters in the Side Pane. Here is what that looks like:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185037318.png)

To add columns, select them from the dropdown list to add them one at a time.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185037604.png)

You can change the layout of the Table by dragging each column in the App Editor or Player to change the width of columns.

### Connector Output

Here's how to create interactive lists from Connector output.

First, set up a connector that sends an array to your Tulip app. Learn how to [configure the connection between connectors and apps here](https://support.tulip.co/docs/how-to-use-outputs-from-connector-functions-in-apps)

Then, add the Embedded Table to a step as shown above.

Then, select "Variable" as the data source and choose the variable that stores the output array from a connector function.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_227885757.png)

Finally, choose a Variable of type "Object" to store the output or create one within the "Linked Variable" dialog.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_227886197.png)

Then, select a column for each property within the object that you would like to display.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_227886998.png)

## Firing Trigger Logic and Designing a Step

After you have set up your Embedded Table, there are two ways to use it:

1. Immediately fire a trigger Action when an operator presses a row
2. Update a Variable or Record Placeholder and do not fire any trigger.

This section will show you how to set up both of those situations in your app.

### Firing Trigger Logic

To add a Trigger that fires when a row is pressed or clicked in the Player, click the "+" button next to the Trigger label in the Side Pane. You will see the Trigger Editor open with the "When" clause set to "when a row is selected".

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_227888920.png)

### Designing A Step

Here's an overview of a popular way to use the Embedded Table in the Player:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185044034.png)

The Embedded Table is being used alongside two other Widgets:

1. The text widget to instruct the operator to click or press a record.
2. The Table Record widget to show which record has been selected.

In order to select a record, the operator must press a record, but you will probably want to give them some feedback that they have successfully selected the correct record.

To do this, add the "Table Record" text widget to the Step.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185046806.png)

Then, link it to the same Record Placeholder as the Embedded Table in the Side Pane:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185047204.png)

Test it out in the Player, and the record placeholder should update in real-time.

## Changing the Display Of the Embedded Table

### Row Size

By default, the row size is optimized for being clicked on a laptop or desktop. However, you may want to make each row bigger so that it can be easily pressed on a tablet or mobile device.

In order to do this, change the "Font Size" in the Side Pane. This will automatically increase the height of the row to accomodate the font size.

### Buttons For Each Row

To remove the button next to each row, toggle the "Select Button" option to show or hide the buttons.

Regardless of whether, you toggle the "Select Button" on or off, rows can be selected by pressing or clicking any part of the row.

### Row Index

When enabled, the index of the Record will display within the Table.

#### Rows Per Page

Determine how many rows should be available at a time in the table

## Setting Up Filters and Sorting on the Widget

*This section only applies to Embedded Tables that are connected to Tulip Tables and User Fields.*

You will probably want to filter the list of records that are shown to the operator. You might want to filter it based on:

1. The Station that is running the app
2. The operator using the app
3. A value in a Variable in the app
4. Something else!

Click the "Edit" icon next to the Filters option to set up a filter.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185039724.png)

Filter Options Include:

1. Static Value
2. Variable
3. Tulip Table Record
4. App Info

First, choose the field from the table where you would like to set up a filter. Then, choose a condition. Within the "Variable" option, you will see both app metadata like user and station as well as variables related to the app.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185041253.png)

After you have selected a filter, click the "X" in the top right of the modal.

You can set up sorting for the Embedded Table with the "Sort By" option.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Displaying%20Interactive%20Lists%20of%20Table%20Records%20Or%20Connector%20Output%20in%20Apps_185043727.png)

## Further Reading

- [How To Use Table Records in the App Editor](https://support.tulip.co/docs/how-to-modify-tables-within-the-app-editor)
- [How To Access Output from Connector Functions in Apps](https://support.tulip.co/docs/how-to-use-outputs-from-connector-functions-in-apps)
- [How To Get Real Time Visibility of Work Orders by Station](https://support.tulip.co/docs/how-to-get-real-time-visibility-of-work-orders-by-workstation)

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**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)

**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.*

**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.**

**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**.

**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.**

**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 Toolbar**

The **Widget Toolbar**Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png)

**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)

**Connectors**

**Connectors** enable real-time connectivity between your Tulip solution and a transactional system (e.g. an ERP). The output of a Connector Function can be used in Tulip Apps, Automations, and Functions.

- **HTTP Connectors** utilize HTTP API endpoints.
- **SQL Connectors** can enable connectivity with certain SQL databases.
- **MQTT Connectors** can connect to MQTT brokers for machine monitoring.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/connector.gif)

**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.

**Object**

**Objects**are a Tulip Datatype. Objects represent an arbitrary grouping of attributes. Leveraging objects can simplify the process of working with complex data architectures. Often **Connector** **Functions** will return **Arrays** of **Objects**

*ex. My car object has 5 attributes, Color, Make, Model, # of wheels, # of seats.*

**Action**

**Actions**are different operations that can be executed in **Triggers. Actions**cannot move users to other apps, or other**steps.**

Many **Actions**can be added to a single **Trigger.**

*ex. Store the value of variable x to table field y, Print app step, Adjust Edge device GPIO pin.*

**Tulip Player**

**Tulip Player** is the Windows/Mac executable program where users can run Tulip apps. Tulip player allows you to create a more seamless user experience by removing the need for a web browser, and allows increased IT controls.

**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.*

**Step**

A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

**Station**

**Stations**are a digital representation of a physical place or device in your facility. Stations are 1:1 with **Interfaces (display devices)** running Tulip Player, but Stations can also be assigned **Edge Devices,**Tulip Vision Camera Configurations, Machines,****and more.

**Static Value**

**Static values**are unchanging values that can be used within Triggers. Static values can be of any **Variable**type.

**App Info**

**App Info**is a subset of the data available within an application automatically. This data can be used both in **Widgets**and**Triggers.**This includes the current date and time, the app name, the app version, the current shift, and more.