Include Child Fields in a Parent Object

Models for data source objects can access and display the fields from that object. But models can also access and display fields from objects “associated” with the original object—those that have a “child” relationship to it.

Including Child Fields

In this tutorial, let’s build a page that lists top-level account information. When the end user wants more detail, they can click an icon to open a popup with a Form that adds more detail about the account—and also includes a field listing of any open support cases. This latter field is drawn not from the accounts object, but from a cases object.

Assumptions

Note

This tutorial assumes you have a page with:

  • a model on an object that collects account information
  • a Table component linked to the account model that displays a few fields about the account (for example, name, description, revenue).

Add Cases to the Account object [[]]

Before building the popup, make sure the model has access to the cases fields.

  1. In the Elements pane, click the account model.
  2. Under the model name, click Fields.
  3. Click the Child Relationship tab.
  4. Locate the Cases object (you can enter “Cases” in the search bar to find it) and check it.

The fields in Cases are now available to the account model.

  1. Under the model name, click Fields.
  2. Click Cases from the list of fields. Skuid displays the fields contained in the cases object.
  3. Select the following fields:
    • Case Number
    • Subject
  4. Click Save.

Note

The individual cases fields are not displayed in the Field list under the model name. The cases item represents all fields that you selected from the cases object.

Create Show Detail action on table [[]]

Next, add an action to the Table Component:

  1. In the Table, under Add Feature, click Row Action.
  2. In the General tab, edit:
    • Action label: See Details
    • Action icon: Choose an icon to display on the table.
  3. In the Actions tab, click add Add Row Action three times.
    • First action: Stop all other activity on the page and let end users know that the requested modal is coming.
      • Action type: Show message and block UI
      • Message: Loading
      • Timeout: Never
    • Second action: Create and configure a modal.
      • Action type: Show modal.
    • Third action: Resume activity on the page.
      • Action type: Unblock the UI
  4. Click Save.

Create the modal [[]]

Now make the modal, which will display the account details.

  1. Select the action named Show modal.

  2. Click Configure modal.

  3. Drag and drop a Form component into the modal and configure the General tab:

    • Model: The account model.
    • Show save and cancel buttons: Checked
    • Default mode: Edit
  4. Add fields to the Form, including:

    • Name

    • Description

    • Employees

    • Address and phone number for the account

    • If desired, the owner of the account record.

    • Anything else you think would be a helpful detail.

      Note

      To make the modal easier to read, create and add the fields to sections.

  5. Click Save.

Add the child relationship fields to the Form [[]]

  1. In the Elements pane, under the model name, in the fields list: drag and drop the cases “field” into the component. Remember, this “field” actually represents the two fields from the cases object.

    Note

    Child relationship fields must be added by dragging and dropping. They cannot be selected using the Add Model fields button.

Configure the added child relationship fields [[]]

Within the Form, click the cases field.

  1. Edit the General tab to format how the two cases fields will display.
    • Template: Use the field picker to select the two cases fields. (Select them in the order you want them to appear on the page.) They will display in the Template property field in curly brackets: {{[first field selected}}{{second field selected}}
      • To make the fields easier to read, add a couple of spaces and a hyphen: {{[first field selected}} - {{second field selected}}
    • Allow HTML: Checked.
    • Delimiter: <br/>
  2. Click Save and Preview.

Try it out

In the Table Component, click See Details. The popup displays details about the selected account–including any associated case.

Note

If there are no cases associated with the account, those fields will be empty.

The child object fields are not inline editable. To edit the case data:

  • Add a case model to the page.
  • Add a Table component to the page on the case model.
  • Edit desired case fields from the table.