Master/Detail View is a feature available for the table screen element. This functionality allows the user to drag in screen elements inside of a table to design the table’s detail view. Once the screen is rendered, each row in that table will have an expand arrow icon button available to click in the left-most column. Once clicked, the detail view will be expanded and rendered, with context for that specific table row’s data.

Master/Detail View enabled for a generated table screen

Detail section expanded for a table row

Properties

The Master/Detail View can be enabled for a table screen element via the “Enable Master/Detail View” property in the “Behavior” property section. Enabling this feature will also reveal another property input related to the functionality, “Detail Section Height”. By default this value is 300 (pixels), but can be adjusted to fit the needs of your detail section. The available space inside the table for the detail section in the screen designer will expand/shrink to match this property’s value.

Transform Context

For transforms run inside of screen elements in the detail section of a table, they receive additional transform context data about the table and the data in the current master row. These data can be referenced with $parent.

• $parent.data: A single object with data for the current master row
• $parent.context: Various other information regarding the table

Examples

Form

Here’s an example of setting up a form screen element inside of a table’s detail section. By setting the form’s Data Transform to $parent.data (while making sure the Data Model and Parameters Transform properties are left blank), the form will use the data from the current master row as its data. Therefore, we can set up screen elements inside of the form that have Data Paths that point to the same Data Paths as table columns in the table.

Form screen element added to a table’s detail section, with its Data Transform set to $parent.data so that it uses the master row’s data

Form inputs set up to use a Data Path that matches the Data Path of table columns in the parent table

Detail section expanded for a table row

Table

Here’s an implementation of Master/Detail View that utilizes another table nested inside of the original one. In this example, the nested table in the detail section will display a list of calendar events for the master row’s calendar, where the parent table will display a list of calendars. We can accomplish this by using the master row’s calendar ID in the Parameters Transform property for the nested table, so that its query can filter by only calendar events matching that calendar ID.

The nested table’s Data Model property should be set to “CalendarEvent”, and its “Parameters Transform” property should be as follows:

In this setup, the nested table will query new data when the detail section is expanded for a row. A query will be run to get all of the calendar events that match the calendar ID from the master table row.

A table screen element is dragged into the detail section of a parent table, and its Data props are configured to query calendar events for the master table row’s calendar

The detail section for each calendar master row will display a nested table that has information about its calendar events