Include Child Fields in a Parent Object

Models for data source objects can access and display the fields from that object (or entity). 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 Field Editor 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 App 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 Row Actions, click fa-plus-circle Add Row Action.
  2. In the Basic tab, edit:
    • Action Type: Run Multiple Actions
    • Action Label: See Details
    • Action Icon: Choose an icon to display on the table.
  3. In the Actions tab, click fa-plus-circle Add Row Action three times.
    • First action: Stop all other activity on the page and let end users know that the requested popup is coming.
      • Action Type: Show message and block UI
      • Message: Loading
      • Timeout: Never
    • Second action: Create and configure a popup.
      • Action Type: Show Popup.
    • Third action: Resume activity on the page.
      • Action Type: Unblock the UI
  4. Click Save.

Create the popup [[]]

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

  1. Click the action named Show Popup.

  2. Click Configure Popup.

  3. Drag and drop a Field Editor component into the popup and configure the Basic tab:

    • Model: The account model.
    • Show Save/Cancel: Checked
    • Default Mode: Read with Inline-Edit
  4. Click the Display tab. Under Field Layout, edit:

    • Field Layout: Label Above Field
  5. Add fields to the Field Editor, 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 popup easier to read, create and add the fields to sections.

  6. Click Save.

Add the child relationship fields to the Field Editor [[]]

  1. In the App 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 Field(s) button.

Configure the added child relationship fields [[]]

Within the Field Editor, click the cases field.

  1. Edit the Basic 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.