Child Relationships

In this tutorial, we’ll show how to show fields from child relationships on a Field Editor in the parent object. (Yes - in Skuid this is possible!) In this example, we’ll include a “Cases” field on a Field Editor set to the Account model.

Create a model for your data

Include all relevant fields you want in your Field Editor. For our example we’ll use the Account Salesforce object. We’ll also set the Model Id to “AccountsData” and select the following fields within the model: Account Name, Account Description, Account Phone, Billing Address, Employees, and Owner ID.

If you are following along, note that you’ll also need to set your model condition to make this a detail page.

Create a Field Editor set to the parent object.

|image0|

For more information on how to build a Field Editor, check out the Field Editor topic.

In this example, we’re choosing to show the Label above the Field, because it saves space and will look better with our list of cases. You can set this within the Display tab.

In the parent object model, click Child Relationships and then select the appropriate child object.

|image1|

  1. Click Models > AccountsData > Fields.
  2. Click on Child Relationships.
  3. Use the search box to help you quickly locate child objects.
  4. Check the appropriate child object (e.g. Cases).

Select the child Object fields you want to include.

|image2|

  1. Click on the child object within your model’s fields to see the fields within that child object.
  2. Check the fields you wish to access from within your child object. For our example, let’s check Case Number and Subject.

Drag and drop the child object into the Field Editor.

|image3|

Note that you must drag child relationships from the left-hand panel using the tree-chart icon. You cannot add them from the “Add Model Field(s)” button.

Edit Field Properties for the Child Relationships Field.

|image4|

Once you’ve dragged your child object onto the Field Editor, you’ll notice that it essentially becomes a Template component as a field, and its capabilities are much the same. To begin setting up your child object field, click on the new field if it’s not already selected.

  1. Enter a custom field label. On this example, we’ll leave the label blank and use a section header instead.
  2. Enter a template including the fields you selected in Create a Field Editor set to the parent object. Put them in {{curly brackets}} or select them by clicking on the field-picker icon (highlighted in red).
  3. All of this parent’s child relationships will be displayed in this field. That means every case associated with this account will be displayed, and the text within the Delimiter field is how the cases will be separated. We’ll use the HTML break tag <br/> to make each case it’s own line. (Make sure that you check Allow HTML or this delimiter will not work!)

Result: Save and preview to see your child relationships displayed!

|image5|

Note that your child object fields will not be inline editable. If you want to edit this data, you can add a table on the child object (e.g. Cases) or the join object (e.g. in the case of Opportunity Products).

  • 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
  1. 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.