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

After adding a related object panel to your custom object's detail page, you can now create and configure the subview. This topic illustrates how to create the subview for a related object (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 and view shipments for a payment on the Payment detail page, and then drill down to a Shipments subview.

We have already added a Shipments panel to the Payment detail page. Let's create the Shipments subview next.

Create the Shipments Subview

Create a new template for the subview that displays the shipments created for a payment.

1. In Visual Builder Studio, click the App UIs tab.

2. Expand cx-custom > payment_c, then click the payment_c-detail node.

3. On the payment_c-detail tab, click the Page Designer subtab.

4. Click the Code button.

   

5. Confirm that you are viewing the page in Page Designer.

   

6. Remove the comment tags for the dynamic container components that contains the panels and any subviews.

   

7. Highlight the <oj-dynamic-container> tags for the subviews.

   

8. On the Properties pane, in the Case 1 region, click the Add Section icon, and then click New Section.

9. In the Title field, enter a title for the section, such as Shipment_c.

10. In the ID field, change the value to Shipment_c.

    Note: Use the REST API object name for this ID.

11. Click OK.

12. Manually update the template's JSON with the correct subview name.

    1. On the payment_c-detail tab, click the JSON subtab.

    2. In the section for the SubviewContainerLayout's section template layout, replace the sectionTemplateMap and displayProperties values to match the subview's ID name, Shipment_c. This is the object's REST API name.

       In our example, this is what the SubviewContainerLayout's sectionTemplateMap and displayProperties should look like:

       

Configure the Subview Layout

Next, let's build the structure of the subview using the cx-subview fragment.

1. On the payment_c-detail tab, click the Page Designer subtab.

2. On the Properties pane, click the Shipment_c 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 Shipment_c template.

3. Click the Code button.

   

4. On the Components palette, in the Filter field, enter cx-subview.

5. Drag and drop the cx-subview fragment to the template editor, between the shipmentC template tags.

   

6. 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 object and foreign key field.

   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="shipmentC">
     <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-subview">
       <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>

   This table describes some of the parameters that you can provide for the subview:

   Parameters for Subview

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

Next, let's configure the subview layout.

1. Click the Layouts tab, then click Shipment_c > Rule Sets subtab.

2. Click the Sub View Layout rule set.

3. Add the fields that you want to display in the layout.

   1. Click the Open icon next to the default layout.

   2. From the list of fields, select the fields that you want to display on the subview table. The fields display as columns in the order that you click them, but you can rearrange them.

4. Create an event that updates the URL when a user navigates to a subview. This enables users to be automatically navigated back to the subview after editing a record.

   Note: If you already created this event when configuring a subview for a different object, then you can skip this step.

   1. On the payment_c-detail tab, click the Page Designer subtab.

   2. Confirm that you are viewing the page in Page Designer.

      

   3. Click the Code button.

      

   4. In the code for the detail page, click the oj-vb-fragment tag.

      

   5. On the Properties pane for the cx-detail fragment, click the Events subtab.

      1. Click + New Event > On 'viewChangeEvent'.

      2. Drag an Assign Variables action onto the canvas.

      3. On the Properties pane, in the Variable field, click view under the Page heading.

         

      4. In the Value field, enter {{ payload.view }}.

5. 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 the Code button.

   3. Select Page from the dropdown.

      

   4. Comment out the dynamic container components that contain the panels and subviews.

      

Add a Link to the Panel and Subview

On both the panel and subview, users should be able to click the shipment name to navigate to the Shipment detail page. To enable the shipment name as a hyperlink, you must do the following:

1. Add the RecordName field to the Shipment panel and subview layouts.

2. Create a hyperlink field template.

3. For each layout, associate the RecordName field with the hyperlink field template.

Note: If your target object's UI pages aren't fragment-based, then skip this section and instead, follow the steps in Create a Link Field for Related Objects (Many-to-Many).

First, create the hyperlink field template.

1. Click the Layouts tab, then click the Shipment_c node.

2. On the Shipment_c tab, click the Templates subtab.

3. Click + Template.

4. In the Create Template dialog, for Type, select Field.

5. In the Label field, enter hyperlinkTemplate.

6. Click Create.

7. In the template editor, click the Design button.

8. On the Components palette, in the Filter field, enter cx-hyperlink.

9. Drag and drop the cx-hyperlink fragment to the Structure pane, under the Input Text node.

   

10. Delete the Input Text node.

Next, associate the hyperlink field template that you just created with the RecordName field that you already added to the panel and subview layouts.

1. Click the Layouts tab, then click the Shipment_c node.

2. On the Shipment_c tab, click the Rule Sets subtab.

3. Click the Panel Card Layout rule set.

4. On the Properties pane, click the Templates subtab.

5. Click + Default Field Template.

6. Select the RecordName field and then select the hyperlinkTemplate template. Click Confirm.

   

7. At the top of the page, click < Rule Sets to return to the list of rule sets.

   

8. Click the Sub View Layout rule set.

9. Click the Open icon next to the default layout.

10. Click the RecordName field to select it.

11. On the Properties pane, in the Template field, select the hyperlinkTemplate template.

    

12. Modify the hyperlink template's JSON entry for the panel card layout.

    On the Shipment_c tab, click the JSON subtab.

    The following code displays in the PanelCardLayout section:

    ,
          "fieldTemplateMap": {
            "RecordName": "/hyperlinkTemplate"
          }

13. Remove the "/" so that the code looks like this:

    ,
          "fieldTemplateMap": {
            "RecordName": "hyperlinkTemplate"
          }

Test Your Panel and Subview

Test the subview by previewing your application extension from the payment_c-list page.

1. From the payment_c-list page, click the Preview button to see your changes in your runtime test environment.

   

2. The resulting preview link will be:

   https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list

3. Change the preview link as follows:

   https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list

   Note: You must add /application/container to the preview link.

   The screenshot below illustrates what the list page looks like with data.

   

4. If data exists, you can click any record on the list page to drill down to the detail page. The detail page, including header region and panels, should display.

   You should now see a Shipments panel.

   

5. In the Action Bar, select the Create Shipment action.

   

   The Create Shipment page displays. Here's an example of a general Create Shipment page:

   

   After creating a shipment, you should be navigated to the shipment detail page. Click the browser back button to return to the Payment detail page.

6. On the Shipments panel, click the link for the shipment you just created to navigate to the Shipment detail page.

   Click the browser back button.

7. Click the View All link to drill down to the subview.

   

8. On the Shipments subview, click the Mar Shipment link to navigate to the Shipment detail page.

   Click the browser back button.

9. Save your work by using the Push Git command.

   Navigate to the Git tab, review your changes, and do a Git push (which does both a commit and a push to the Git repository).