Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Add Drawers to a Table or List

A drawer is a panel that opens below a Table component row or below 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.

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 records simultaneously—something that is more difficult with other "container" elements, such as modals or sliding panels.

Use the drawer to reveal details

In the example below, we'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

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

Assumptions

Note: 

The steps below 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).
  • A Table component on that model displaying those top-level fields.

First, 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.)

Now, configure that model by making the following edits in the Properties pane:

  1. Query on page load: Uncheck
  2. Create Default Row if Model has none: Uncheck

Note:  This ensures 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.

Next, be sure to 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 that reference field, you cannot create the necessary condition.

Note:  Nintex Apps uses the term "condition" in several places within the app. Check out the glossary to learn more.

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

  1. Click the contact model.
  2. Click Conditions under the contact model.
  3. Click add next to Conditions to create a new condition.
  4. In the Condition property pane, edit:
    • Field: The reference field that links the contact object to the account object. (See warning above.)
    • Operator: =
    • Value: (Leave blank.)
    • State: Dynamic (Default off).
  5. Click Save.

Click anywhere on the Table component, and edit the Table Properties:

  1. On the Display tab, under Drawers, check Enable drawers.

A chevron-right displays next to the horizontal list of fields on the Table. This provides access to the Drawer.

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

How does Nintex Apps know which contacts to surface? 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. To open the drawer, do one of the following:

    • Click the chevron-right Configure drawer icon on the Table.
    • In the Display tab, under Drawers, click Configure drawer.

  2. In the Drawer Properties General tab:

    • Show drawer icon: Check

  3. In the Before load actions tab:

    • Click add-page Add actions to add and configure actions:

      • First action: Provide a message telling users that the drawer-opening process is underway.

        • Action type: Show message and block UI
        • Message: Add a helpful message.
        • Timeouts (seconds): Never

      • Second action: Trigger the previously-created model condition.

        • Action type: Activate & set value of model condition

        • Model: The contacts model

        • Condition: The 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.

      • Third action: Return the appropriate data.

        • Action type: Query model

        • Model: The contacts model

        • Query behavior: Get More – merge in new Rows with old

          Note:  This adds new contact data to the existing contact data. This way, end users can see multiple open drawers at the same time. If Query Behavior is not set to this property, when a user opens a second drawer the first drawer goes blank because the second drawer's data completely replaces the first's.

      • Fourth action: Display the requested data in the drawer.

        • Action type: Unblock the UI

  4. Click Save.

And now for the fun part: building out the drawer.

  1. Click the Drawer chevron-right to access the drawer.
  2. In the General tab, click Configure drawer.
  1. Drag and drop a Tab Set into the drawer and edit:
    • Remember active tab: Checked.
  2. Click the first tab in the Tab Set and customize the tab properties:
    • Tab label: Details
    • Icon ( optional ): Choose an icon for the tab.
  3. Click the Tab Set, then click Add tab. Customize this new tab's properties:
    • Tab label: Contacts
    • Icon ( optional ): Choose an icon for the tab.

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.

    • Add the fields that will provide additional details about customer accounts.

  2. Click the Table, then click the Context tab in the Table properties pane.

  3. Click add-page next to Context Conditions, and edit:

    • Field: Id
    • Merge Field: Id
    • Operator: =

    Note:  Since this Table displays information from the accounts model, both ID fields are 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.

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. Click the Form, then click the Context tab in the Form properties pane.

    • Click add-page next to Context Conditions, and edit:
      • Field: For this field use the ID field from the account model, not from the contacts model. This is a reference type field, often with a name like "AccountId."
      • Merge Field: Id
      • 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.

  3. Close the Drawer Configuration window and click Save.

Preview and test

With the page completed, click Preview to see the end result.

Pick a record, then click the > 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.

Nifty, huh? Close the drawer by clicking chevron-right a second time.

Or open more than one drawer. Each one provides an entirely different set of records. ( This is how you know your Context Conditions are working correctly. )

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

It's all possible with drawers.

Best practices

Simplify Save and Cancel

In the example above, both of the components added to the Tab Set (the Table and the Form) have their own Save and Cancel buttons. Prefer a global save and cancel option?

Uncheck Show a save and cancel button in the Properties pane for each component. , add a Button Set to the drawer. Add two buttons to the button set, then use the action framework to configure the buttons:

  • Name one button Save, and set its actions to Save model changes for both models.
  • Name the other button Cancel, and set its actions to Cancel model changes for both models.

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 included in the second model? (e.g. AccountId on a contact model)
  • Do you have the Query model 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?
  • Is there a Context Condition for each component in the drawer?