Skip to main content

Table Row Popup

In this guide, you’ll learn how to open a popup page when a row is clicked inside a Directory App. The popup will display additional data from the selected row — even values that are not shown directly in the table.

Goal​

When a user taps on a row in a table, open a popup page showing more detailed data from that row.

Overview​

This pattern is useful when you want to provide a clean table view (e.g., employee list, tenant directory, product list) but also allows users to see more details without cluttering the main display.

By using dynamic data injection and popup interaction, this setup makes your content:

  • Cleaner and more readable
  • Interactive and informative
  • Reusable for many data types

Step-by-Step​

1. Set Up the Directory App​

  • Add a Directory App widget to your content.
  • Bind it to a Datasource with multiple fields (e.g., floor, name, suite).
  • Configure the visible fields (you can leave out some — we will show them later in the popup).

Learn more: Directory App

2. Create the Popup Page​

  • Create a new page in your content (e.g., popup-details).
  • Add 3 Text Widgets to this page (for floor, name, and suite values).
  • Label each field with static labels (Floor:, Name:, Suite:) and next to them place 3 empty text widgets.
  • Enable Dynamic Font on each dynamic text widget for proper scaling.

3. Listen for Row Clicks​

  • Open the Content > External Events > Sensor Events.
  • Add a new Sensor Event with the ItemSelected trigger.
  • Add an Execute Action Batch as the action type.

4. Extract Values from the Selected Row​

Inside the Execute Action Batch:

  • Add 3 Sent Fields of type Property of Received Value:
    • value.floor → named as floor
    • value.name → named as name
    • value.suite → named as suite

These fields extract the selected row's values from the original value object.

5. Inject Values into the Popup Page​

  • Inside the Execute Action Batch, add 3 Interact Widget actions.
  • For each:
    • Set the Page to the popup page (e.g., popup-details).
    • Set the Widget to the corresponding text widget.
    • Set the Value Origin to Property of Received Value.
    • Set the Property Name to floor, name, and suite respectively.

6. Open the Popup​

  • Add a Popup Action as the last step of the batch.
  • Set:
    • Special: Open
    • Page: your popup page (e.g., popup-details)
    • Enable Auto Close and set timeout (e.g., 5 seconds).

Summary​

Now, when a user clicks a row in your Directory widget, a popup will open showing dynamic information from the selected row — even fields that weren’t visible in the original table.

This is useful for building interactive directories, staff lists, or product selectors with drill-down information.