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

Create and configure the second model [[]]

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

Configure the model [[]]

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.

Warning

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

Create a condition on the model [[]]

Note

Skuid 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: Filterable default off.
  5. Click Save.

Create the Drawer [[]]

Enable the Drawer [[]]

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.

Add an icon and Before Load Actions 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 Skuid 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 Skuid 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.

Configure the drawer [[]]

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.

Add a Tab Set to the 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.

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.

    • 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 Skuid 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, Skuid 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. 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 Skuid 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. Instead, 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

The drawer doesn’t display anything. [[]]

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.

The drawer doesn’t open. [[]]

  • Have you added components to your drawer?
  • Is there a problem with your Before Load Actions?

No data is shown in the drawer. [[]]

  • 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?

The data in the drawer isn’t the data for the record clicked on. [[]]

  • Is there a Context Condition for each component in the drawer?