Add a Custom Object Panel for Related Objects (One-to-Many)

You can enhance an object's detail page by adding panels for related objects. This makes it easy for users to see – on a single page – all pertinent information related to a record. You can add custom object panels or standard object panels. This topic illustrates how to add a custom object panel to an object's detail page (when the panel object is related via a one-to-many relationship).

What's the Scenario?

In our example relationship, the Payment object has a one-to-many relationship with the Shipment object. At runtime, users should be able to create shipments for a payment, and view those shipments on the Payment detail page. To enable this, we need to add a Shipments panel to the Payment detail page.

Setup Overview

To add a related object panel to a custom object's detail page, you must complete a few steps first. Here's an overview of the required steps.

Complete these steps for your related object:
1. Make sure that the CX Extension Generator generated the pages and layout for the related object, in this case, for the Shipment object.
  
  See Create a New Application Using the CX Extension Generator.
2. Create the required create smart action for the related object in Application Composer.
  
  For example, create a Create Shipment smart action.
  
  The Create Shipment smart action displays from the Action Bar on both the Payment detail page and Shipments subview. Users can select the Create Shipment smart action to navigate to a create shipment page.
  
  See Create Smart Actions.
You can then add a new related object panel to the custom object's detail page.

See Add the Shipment Panel to the Payment Detail Page.
After adding the panel, you can then create and configure the subview.

See Configure the Subview for Related Objects (One-to-Many).

Add the Shipment Panel to the Payment Detail Page

To add a new panel for shipments to the Payment detail page:

In Visual Builder Studio, click the App UIs tab.
Expand cx-custom > payment_c, then click the payment_c-detail node.
On the payment_c-detail tab, click the Page Designer subtab.
Click the Code button.
Confirm that you are viewing the page in Page Designer.
Remove the comment tags for the dynamic container components that contains the panels and any subviews.
Highlight the <oj-dynamic-container> tags for the panels.
On the Properties pane, in the Case 1 region, click the Add Section icon, and then click New Section.
In the Title field, enter a title for the section, such as Shipments.
In the ID field, change the value to ShipmentsPanel.

Note: Don't use the REST object name for this ID because you'll use the REST object name when you create the subview.
Click OK.
On the Properties pane, click the Shipments section that you just added.

Page Designer navigates you to the template editor, still on the payment_c-detail tab, where you can design the Shipments panel template.
Click the Code button.
On the Components palette, in the Filter field, enter cx-panel.
Drag and drop the cx-panel fragment to the template editor, between the shipments template tags.

Add the following parameters to the fragment code so that the code looks like the below sample. Be sure to replace Shipment_c and Payment_Id_PaymentShipment1M with the appropriate values for your related object name and foreign key field, and retain the proper capitalization of the custom object name.

Note: The format of the foreign key field's name is always

<Source
                                object name>_Id_<Relationship name>

. You can also retrieve the field name by doing a REST describe of the target object (Shipment).

<template id="shipments">
  <oj-vb-fragment bridge="[[vbBridge]]" class="oj-sp-foldout-layout-panel" name="oracle_cx_fragmentsUI:cx-panel">
<oj-vb-fragment-param name="resource" value='[[ {"name": "Shipment_c", "primaryKey": "Id", "endpoint": $application.constants.serviceConnection } ]]'>
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="sortCriteria" value='[[ [{"attribute": "LastUpdateDate","direction": "desc" }] ]]'>
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="query"
      value='[[ [{"type": "qbe", "params": [{"key": "Payment_Id_PaymentShipment1M", "value": $variables.id }]}] ]]'>
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="context" value="[[ {} ]]"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="extensionId" value="{{ $application.constants.extensionId }}"></oj-vb-fragment-param>
  </oj-vb-fragment>
</template>

This table describes some of the parameters that you can provide for a custom panel.

Parameters for Custom Panel

Parameter Name	Description
sortCriteria	Specify how to sort the data on the panel, such as sort by last updated date and descending order.
query	Include criteria for querying the data on the panel.

In the previous step, you configured the panel template. Next, let's configure the layout for the panel.
Click the Layouts tab, then click the Shipment_c node.
On the Shipment_c tab, click the Panel Card Layout rule set.
Add the fields that you want to display on the panel.
1. Click the Open icon next to the default layout.
2. Each panel includes specific slots. From the list of fields, drag each field to the desired slot.
  
  For example, drag and drop the RecordName field to the item1 slot. If an Id field is present in that slot, you can remove it.
  
  Drag and drop other desired fields to the appropriate slots. For example, drag the ShipmentDate_c field to the item2 slot, and the Email_c field to the item3 slot.
Comment out the dynamic container components from the payment_c-detail page.
1. Click the payment_c-detail tab, then click the Page Designer subtab.
2. Click < Return to page.
3. Click the Code button.
4. Select Page from the dropdown.
5. Comment out the dynamic container components that contain the panels and subviews.
  Note: To add more panels to the panel region, you must first un-comment the dynamic container component so that you can add a new section for each desired panel.

You can test the panel after you add the subview. Let's do that next.