Drawers

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.

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.

   • Add sections and fields that provide information about customer contacts.

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.