Add Drawers to a Table

A drawer is a panel that opens below a Table component row, displaying additional data, either from the Table’s model (to provide more information about the selected record) or from a related object/entity.

Using drawers allows users to quickly scan a Table consisting of multiple records, then open drawers on individual rows 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 popups or sliding panels.

Use the Drawer to Reveal Details

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 Field Editor 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 or entity 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 user only gets the related data that is needed.

Next, be sure to include the field on the contacts data object or entity that connects it to the account’s object or entity. This is a reference type field, often with 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 condition will allow us to filter for the contacts associated with the account record selected by the user.

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

Create the Drawer [[]]

Add and configure a drawer row action [[]]

  1. On the Table, click fa-plus-circle next to Add Row Action.
  2. In the Table Action Properties pane, in the Basic tab, edit the following:
    • Action type: Drawer
    • Action Label: Add a helpful label. (This displays this when users mouse over the Action Icon.)
    • Action Icon: Choose a icon that displays when the drawer is closed.
    • Drawer Opened Icon: Choose a icon that displays when the drawer is open.
  3. Click the Configure Drawer icon.
  4. In the Drawer Properties pane:
    • Show Close Handle: Check. This means that when the drawer is opened, a Close handle displays at the bottom of the drawer; users can click it to close the drawer.
  5. Click Save.

Add 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 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. Click the Configure Drawer icon.

  2. In the Drawer Properties pane, click the Before Load Actions tab

  3. Click fa-plus-circle 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, 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.

Add a Tab Set to the drawer [[]]

  1. Drag and drop a Tab Set into the drawer and edit:
    • Tab navigation: Tabs on Top
    • Remember user’s last tab: Checked.
    • Defer rendering of tab contents (makes pages load faster): Unchecked.
  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 fa-plus-circle 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 account.

  1. Drag and drop a Table component into the first tab in the drawer (the Details tab).

    • 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 fa-plus-circle 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.

  4. Click Save.

Add a Field Editor to the second tab and configure [[]]

This Field Editor will display contacts for the selected customer account.

  1. Drag and drop a Field Editor component into the second tab in the drawer (the Contacts tab).

    • Add the fields that provide information about customer contacts. Organize them into columns!
  2. Click the Field Editor, then click the Context tab in the Table Properties pane.

    • Click fa-plus-circle 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 name like “AccountId.”
      • Merge Field: Id
      • Operator: =

    Note

    The Field Editor displays contact information for the account the 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. Click Save.

Preview and Test

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

Pick a record, then 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 using the close handle at the bottom.

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

Both of the components added to the Tab Set (the Table and the Field Editor) have their own Save and Cancel buttons. Prefer a global save and cancel option?

Uncheck Show Save/Cancel 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 Mode 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?