Drawers

A drawer is a panel that opens below a Table component row or a List item. The drawer displays additional data, either from the component's model (to provide more information about the selected record) or from a related object by using a context condition. Individual drawers can be opened and closed with the column or a row action that uses an action flow. You can open and close all drawers with a component interaction or action flow.

Using drawers allows end users to quickly scan a Table or List consisting of multiple records, then open drawers on individual rows/items to obtain a broader view of those records. Additionally, by opening two separate drawers, users can compare different related records simultaneously, something that is more difficult with other "container" elements, such as modals or sliding panels.

Drawers provide a lot of options:

  • Drawers on a Table (or List) of customer accounts could display invoices for each, or service orders.
  • Drawers on a Table cataloging products might give updated information about the product's supply chain.
  • A List of customer support tickets might use a drawer to track each action taken to resolve the complaint, and the associated in-house handoffs between service providers.

Jump to:

Context considerations

Drawers act as context containers that display records related to the row from which they are opened. Each drawer has a default context variable, drawer_context, mapped to ID of the clicked row.

If your scenario requires more specific filtering, you can define additional context variables. These variables can then be referenced by the models and components within the drawer, ensuring they display the exact subset of data you need.

For more information, see Context .

Add a drawer

  1. Click on the Table component or List item.
  2. In the Properties panel, expand Drawers and click Add drawer.

  3. If desired, toggle on Use column to open and close drawer. A chevron-right displays next to the horizontal list of fields on the Table. This provides access to the Drawer. This option is toggled on by default. If this option is not toggled on, the column is hidden, but the drawer still exists.

  4. If you are using the column to open and close the drawer and you want to select a different icon to display next to the list of fields, click More options next to the icon, select Edit, and select a different icon.

Configure actions to open/close drawers

If you add a row action to a Table or List component, you can set it up to open/close a single drawer with an Open/close a drawer component-context action. This action will toggle the row’s drawer: it will open the drawer if it is closed, or close it if it is opened. To configure the action in the action flow, follow the instructions below:

  1. Select the Open/close a drawer component-context action type in the action flow.

  2. In the Settings panel, click Configure Drawer.

You can also add the Open all drawers and Close all drawers component actions to any action flow. To configure the actions in the action flow, follow the instructions below:

  1. Select Run component action.

  2. Select the list or table component.

    Note: The components are listed by name and unique ID. You can customize the unique ID in component properties to make it easier to identify.

  3. Select Open all drawers or Close all drawers.

Configure properties

Click on the drawer on the canvas or the index to open its properties.

Before-load actions refers to actions used before a drawer is loaded. Generally, these actions are used to activate and set the values of model conditions, and to query models to ensure that the contextually-relevant data will display in the drawer.

  1. In the Properties panel, expand Before-load actions.

  2. Click Add.

  3. Select Add action flow.

  4. Click Create new action flow. For more information, see Action flows.

Context variables for context containers are managed from the Context variables property section. For more information, see Context .

  1. In the Properties panel, expand Context variables.

  2. Click Add context variable.

  3. Enter a Context variable name.

  4. Select a Value type.

  5. Select a Value source.

Remove a drawer

Complete one of the following actions to remove an existing drawer:

  • Right-click on the drawer in the Index and select Remove.

  • Right-click on the drawer in the Index and press Delete (Mac) or Backspace (PC).

  • Expand the Drawer properties and click Remove drawer.

  • Select the drawer and then click the Delete icon on the component tool bar.

If the drawer contains components and it is deleted, all components inside the drawer will also be deleted.

Troubleshooting

Is there actually data in the drawer's model? Check this by dragging and dropping a Table onto the page and connecting it to the second model. If no data displays in that Table, either there's no data in the model, or the model is incorrectly set up.

  • Have you added components to your drawer?
  • Is there a problem with your Before-load actions?
  • Is the reference field connecting the second model to the first model included in the second model? (For example, AccountId on a contact model.)
  • Do you have the Query models action in your Before-load actions?
  • Is it querying the right models?
  • Is the query type Get more – Merge in new rows with old? It should not be Standard - Completely replace data.
  • Are the Context conditions configured correctly? For more information, see Context .
  • Is there a Context condition for each component in the drawer? For more information, see Context .