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 Form 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 [[]]

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 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 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 [[]]

Enable the Drawer [[]]

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

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

Add and configure a drawer row action [[]]

  1. On the Table, click ADD next to Row Action.
  2. In the Table Action Properties pane, in the Basic tab, edit the following:
    • 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.
  3. Locate and click the chevron-right at the head of the row of fields on the table. This opens the Drawer Properties. Edit:
    • Show Drawer Icon: Check
  4. 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. In the Drawer Properties pane, click the Before Load Actions tab

Note

If you’re not already in the Drawer properties pane, locate and click the chevron-right.

  1. 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, 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
  2. Click Save.

Configure the Drawer [[]]

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

  1. In the Basic tab, click Configure Drawer.

Note

Note in the Drawer properties pane? Locate and click the > icon.

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

  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.

    • Add the fields that provide information about customer contacts.
  2. Click the Form, then click the Context tab in the Table 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 name like “AccountId.”
      • Merge Field: Id
      • Operator: =

    Note

    The Form 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. 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 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 Form) 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 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?