Use drawers to reveal details

Drawers let you display additional information without leaving the current page. For example:

  • A customer accounts Table or List could use a drawer to display invoices or service orders.

  • A product Table could use a drawer to display supply-chain information.

  • A customer support ticket List could use a drawer to display actions taken to resolve a ticket and which teams worked on it.

This tutorial guides you through creating a drawer for a Table that displays basic information about client companies, such as company name, industry, and annual revenue. You can add most Nintex Apps components to a drawer. In this example, a Tab Set component displays:

  • Detailed information about each company in a Table component.

  • Contact information for each company in a Form component.

A Table component is used in this example, but the process is the same for a List component.

You can use a Context condition and, optionally, a Before-load action to display the related contacts. Both approaches use a Context condition to display only the contacts associated with the selected account. The difference is when the contact records are loaded:

  • Context condition: Use this approach when the contact records load when the page loads. For more information, see Context.

  • Before-load action: Use this approach when you want the contact records to load only when the end user opens the drawer. A Before-load action activates a model condition and queries the contacts model. For more information, see Drawers.

Jump to: 

Create and configure the first model

The steps in this tutorial assume that you already have a page with:

  • An accounts model that contains information about client accounts. The model includes all fields needed to display basic account information (for the Table component) as well as detailed account information (for the drawer). For more information, see Create and configure models.
  • A Table component on the accounts model that displays basic account information. For more information, see Table.

Create and configure the second model

Create a second model based on a data object that contains contact information for client accounts. Include the fields needed to display each contact's name, title, phone number, email address, and other relevant details.

Configure the model

  1. Open the contacts model.

  2. To load contact records when the drawer opens, click Properties, and disable the following toggles:

    • Query on page load

    • Create default row if model has none

    3. Note: These settings prevent the contact records from loading when the page loads. The Before-load action configured later in this tutorial queries the contacts model when the end user opens the drawer. To load contact records when the page loads, leave both settings enabled.

  3. Include the reference field that links the contacts model to the accounts model, along with all other fields needed to display the contact information. The reference field is typically named AccountId.

    Important: If you do not include the reference field, you cannot create the necessary condition.

Create a condition on the model

Note: Create this model condition only if you are using the Before-load action approach.

This model condition filters the contacts associated with the account record that the end user selects.

  1. Open the contacts model.
  2. Click Conditions.
  3. Click Add condition.
  4. Click Add field and select the reference field that links the contacts model to the accounts model.
  5. For the field value, select =.
  6. Select Single specified value. Leave the next field blank.
  7. Under Condition state, select Dynamic.
  8. Type a unique Condition name.
  9. Under Default state, select On.
  10. Click Apply.

Add the drawer

  1. Click the Table component for the accounts model.
  2. In the Properties panel, expand Drawers and click Add drawer.

  3. To open and close the drawer from a table column, enable the Use column to open and close drawer toggle. A chevron-right icon appears next to the horizontal list of fields on the Table. This provides access to the Drawer. This option is enabled by default. If this option is not enabled, 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, under Icon, click More options, select Edit, and select a different icon.

Add Before-load actions to the drawer

Note: Configure the Before-load actions in this section only if you want to load contact records when the end user opens the drawer. If the contacts model loads records when the page loads, skip this section. In both cases, configure a Context condition on the Form, as described in Add a Form to the second tab and configure.

  1. Select the drawer in the Table.

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

  3. Click Add action. For more information, see Action flows.

  4. Add the first action with the following settings to provide a message telling users that the drawer-opening process is underway:

    • Action name: Block UI with message

    • Message: Type a helpful message.

    • Timeouts (seconds): Never

  5. Click Convert to action flow.

    The action flow canvas is displayed.

  6. Add the second action to the flow with the following settings to trigger the previously created model condition:

    • Action name: Activate/set model condition

    • Model: Contacts model

    • Condition: Model condition on the contacts model

    • Behavior: Activate and set value

    • Field value source: Single specified value

    • Value: {{Id}}

      Note: Using this ID lets Nintex Apps identify the selected account and retrieve the associated contacts.

  7. Add the third action to the flow with the following settings to query the contacts model to load the contact records:

    • Action name: Query models

    • Model: Contacts model

    • Query behavior: Get more – Merge in new rows with old

      Note: This action adds the queried contact data to the existing contact data. This way, end users can see multiple open drawers at the same time. If the Query behavior is not set as indicated, when a user opens a second drawer, the first drawer becomes blank because the second query replaces the existing records.

  8. Add the fourth action to the flow with the following setting to display the requested data in the drawer:

    • Action name: Unblock UI
  9. Click Save.

Add a Tab Set to the drawer

  1. Drag and drop a Tab Set component into the drawer.

  2. In the Properties panel, expand Tab.

  3. Enable the Remember active tab toggle.
  4. Click the first tab in the Tab Set and set the following General properties:
    • Tab label: Type "Details".
    • Icon (Optional): Select an icon for the tab.
  5. Select the Tab Set in the Table and click Add tab.
  6. Set the following General properties for the second tab:
    • Tab label: Type "Contacts".
    • Icon (Optional): Select an icon for the tab.

Add a Table to the first tab and configure

This Table displays additional details about the selected customer accounts.

  1. Drag and drop a Table component into the first tab in the drawer (the Details tab). Make sure it's on the accounts model.

  2. Click Add fields and select the fields that will provide additional details about customer accounts.

  3. Select the Table.

  4. In the Properties panel, expand Context conditions. For more information, see Context.

  5. Click Add.

  6. Enter the following conditions:

    • Add field: ID

    • Operator: =

      Note: Since this Table displays information from the accounts model, the ID field is from the accounts model. This tells Nintex Apps that the details displayed in this Table must be from the same account record that the user selected. This way, if a user has multiple drawers open, Nintex Apps knows which record's data goes in each drawer.

Add a Form to the second tab and configure

This Form displays contacts for the selected customer account.

  1. Drag and drop a Form component into the second tab in the drawer (the Contacts tab). Make sure it's on the model that collects contact information.

  2. Add sections and fields that provide information about customer contacts. For more information, see Form.

  3. Select the Form.

  4. In the Properties panel, expand Context conditions. For more information, see Context.

  5. Click Add.

  6. Set the following conditions:

    • Add field: Select the reference field on the contacts model that links the contact to the account, such as AccountId.

    • Operator: =

      Note: The Form displays contact information for the account the end user selected. The context condition tells Nintex Apps to display only contacts where the reference type field that defines the contact's account is the same as the ID for the selected account record.

  7. Click Save.

Preview and test

  1. Click Preview to see your results.

  2. Click the icon at the beginning of the row to open the drawer. The drawer contains two tabs:

    • Details: Displays the table with more information about the selected record.

    • Contacts: Displays the contacts associated with the selected account.

  3. Click the icon again to close the drawer, or open another drawer. Each drawer displays the records for its selected account.