Use drawers to reveal details

Drawers provide lots 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 display 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.

In this tutorial, you're going to create a drawer on a Table that lists minimal top-level information (for example, name of company, industry, annual revenue) about client companies. Drawers can accommodate most Nintex Apps components. This drawer uses a Tab Set component to display:

  • More detailed information about each company in a Table component
  • Information about the contacts associated with each company in a Form component

We are using a Table component for this example, but the process is the same if you are adding a drawer to a List component.

Jump to: 

Create and configure the first model

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

  • A model that surfaces information about client accounts. The model includes all fields needed to display top-level 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 that model that displays those top-level fields. For more information, see Table.

Create and configure the second model

Create a second functioning model on a data object that surfaces information about the contacts for client accounts. The model should include all the fields needed to display information about customer contacts at a specific account (name, title, phone number, email address, etc.).

Configure the model

  1. Open the contact model.

  2. Click Properties.

  3. Toggle off the following properties:

    • Query on page load

    • Create default row if model has none

    4. Note: These properties ensure that the contact data for a specific account is only loaded when it's requested, making the initial page load faster. It also ensures the end user only gets the related data that is needed.

  4. Include the field on the contacts data object that connects it to the account's object. This is a reference type field, often with a name like AccountId.

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

Create a condition on the model

This model condition will allow you to filter for the contacts associated with the account record selected by the end user.

  1. Open the contacts model.
  2. Click Conditions.
  3. Click Add condition.
  4. Click Add field and select the reference field that links the contact object to the account object.
  5. From the operator drop-down, select =.
  6. Do not select a value.
  7. From the Condition state drop-down, select Dynamic.
  8. Click Apply.

Add the drawer

  1. Click on the Table component.
  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.

Add Before-load actions to the drawer

In this drawer, you're going to be providing additional information from the account model that's already used on the Table. You're also going to be asking for contacts for those accounts.

Use a Before-load action to ensure that, when the end user opens the drawer for a specific record, the correct data is pulled into it. This is where that model condition created earlier comes into play.

  1. Select the drawer in the Table.

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

  3. Click Add.

  4. Select Add action flow.

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

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

    • Action name: Block UI with message

    • Message: Enter a helpful message.

    • Timeouts (seconds): Never

  7. 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

    • Value: {{Id}}

      Note: Using this ID lets Nintex Apps know which record this drawer was opened for, and therefore which contact information should be passed into the drawer.

  8. Add the third action to the flow with the following settings to return the appropriate data:

    • Action name: Query models

    • Model: Contacts model

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

      Note:  This action adds new 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 goes blank because the second drawer's data completely replaces the first's.

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

    • Action name: Unblock UI
  10. 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. Toggle on Remember active tab.
  4. Click the first tab in the Tab Set and customize the General properties:
    • Tab label: Type "Details"
    • (Optional) Icon: Select an icon for the tab.
  5. Select the Tab Set in the Table and click Add tab.
  6. Customize the second tab's General properties:
    • Tab label: Type "Contacts"
    • (Optional) Icon: Select an icon for the tab.

Add a Table to the first tab and configure

This Table will display additional details about 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 model that collects accounts.

  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 clicked on. 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 will display 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.

  3. Select the Form.

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

  5. Click Add.

  6. Enter the following conditions:

    • Add field: ID. Use the ID field from the account model, not from the contact model. This is a reference type field, often with a name like "AccountId."

    • Operator: =

      Note:  The Form displays contact information for the account the end user clicked on. 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 account record clicked on.

  7. Click Save.

Preview and test

  1. Click Preview to see your results.

  2. Pick a record.

  3. Click the icon at the head of the row to open that drawer. The Tab Set will offer two options: Details, which displays the Table with more details about the record, and Contacts, which provides information about the contacts for that account.

  4. Click the icon at the head of the row a second time to close the drawer. Or, open another drawer. Each one provides an entirely different set of records. This is how you know your Context conditions are working correctly.