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

Note: In order to use this tutorial, you must understand how to create a Table. Check out this separate guide 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 Builder.

This guide will show you how to display a list of records from a table using the widget, specify which records should be on the list, and then allow the operator to select one.

If you want to see an example in context, check out this guide to process visibility of work orders by station.

Adding the Embedded Table Widget

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.

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

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

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

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

Setting Up Filters and Sorting on the Widget

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.

Then, you can set up two types of filters:

  1. Static values, like a number or text value
  2. Variables, including 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.

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.

Selecting a Record and Loading it into the App

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

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.

Then, link it to the same placeholder as the Embedded Table in the Context Pane:

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

Changing the Size of Rows In the Embedded Table

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 Context Pane. This will automatically increase the height of the row to accomodate the font size.

Further Reading

Did this answer your question?