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

You can configure 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 standard object panel to an object's detail page (when the panel object is related via a one-to-many relationship).

What's the Scenario?

Let's look at an example. In this example, the Payment object has a one-to-many relationship with the Lead object. At runtime, users should be able to create leads for a payment, and view those leads on the Payment detail page.

Setup Overview

To enable users to create leads for a payment, we'll add a Leads panel and subview to the Payment detail page.

1. First, create the Create Lead smart action in Application Composer.

   See Prerequisite: Create Smart Action.

2. Add a new Leads panel to the Payment detail page.

   See Add the Leads Panel to the Payment Detail Page.

3. After adding the Leads panel, you can then add the subview.

   See Add a Subview for the Leads Panel.

Prerequisite: Create Smart Action

The Create Lead smart action displays from the Action Bar on both the Payment detail page and Leads subview. Users can select the Create Lead smart action to navigate to a create lead page.

Note: If you previously created a Create Lead smart action for a non-fragments implementation, then you don't need to create a new smart action for this use case. Instead, update your existing smart action to specify the Create action type, object, and field mapping. This ensures that your custom smart action still works with this new fragment-based extension.

If you haven't yet created a Create Lead smart action, then create one now:

1. Create a sandbox.

2. In Application Composer, under the Common Setup menu, click Smart Actions.

3. At the top of the page, click Create.

4. On the Kind of Action page, click UI-based action and then click Continue.

5. On the Basic Details page, in the Name field, enter the smart action name.

   For example, enter Create Lead.

6. In the Object field, select the one-to-many relationship's source object.

   In this case, select Payment and then click Continue.

7. On the Availability page, in the Application field, select Sales.

8. In the UI Availability field, select List Page and click Continue.

9. On the Action Type page, in the Type field, select Create.

10. In the Target Object field, under the Top Level Object heading, select the one-to-many relationship's target object.

    For example, select Sales Lead.

11. In the Field Mapping region, click Add.

12. In the Actions column, click the Edit icon and then set these field values:

    

    Attribute Defaults

    Column	Value
    Name	Select the field on the one-to-many relationship's target object that holds the source object's ID and relationship name. This is a standard field on the target object (Sales Lead). The format of the field name is always <Source object name>_Id_<Relationship name>. For example, select Payment ID PaymentLead1M (Payment_Id_PaymentLead1M). Note: You won't see this field on the target object in Application Composer.
    Type	Attribute
    Value	Select Record ID (Id). This is a standard field on the source object (Payment). This means that when users create a lead, the create smart action defaults the payment's ID into the lead record's Payment ID PaymentLead1M (Payment_Id_PaymentLead1M) attribute.

13. Click Done.

14. Click Continue.

15. On the Action Details page, in the Navigation Target field, select Local and then click Continue.

16. On the Review and Submit page, click Submit.

Add the Leads Panel to the Payment Detail Page

To add a new Leads panel to the Payment detail page:

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. Add the following code to the canvas, just below the closing </oj-vb-fragment> tag of the cx-detail fragment:

   <oj-dynamic-container layout="PanelsContainerLayout" layout-provider="[[ $metadata.dynamicContainerMetadata.provider ]]"
       class="oj-flex-item oj-sm-12 oj-md-1"></oj-dynamic-container>
   <oj-dynamic-container layout="SubviewContainerLayout" layout-provider="[[ $metadata.dynamicContainerMetadata.provider ]]">
     </oj-dynamic-container>
   

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

   

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 Leads Panel.

10. In the ID field, keep the value of leadsPanel.

    Note: Don't use the REST object name for this ID because you'll use the REST object name when you create the subview.

11. Click OK.

12. On the Properties pane, click the Leads Panel 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 Leads panel template.

13. Click the Code button.

    

14. On the Components palette, in the Filter field, enter cx-panel.

15. Drag and drop the cx-panel fragment to the template editor, between the leadsPanel template tags.

    

16. Add the following parameters to the fragment code so that the code looks like the below sample. Be sure to replace leads and Payment_Id_PaymentLead1M with the appropriate values for your related object name 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 (leads).

    <template id="leadsPanel">
      <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": "leads", "primaryKey": "Id", "endpoint": "cx" } ]]'>
        </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_PaymentLead1M", "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.

17. Click < Return to page.

18. Click the Code button.

19. You're ready to add the subview next.

Tip: Once you add the panel to the panel region, that's all that's required. The standard object panel comes configured with a set of attributes to display by default. If you want to configure the panel, however, then you can do so. See Configure the Contents of a Panel.

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

Add a Subview for the Leads Panel

After adding a related object panel to your custom object's detail page, add the subview next.

1. On the payment_c-detail page, highlight the <oj-dynamic-container> tags for the subviews.

   

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

3. In the Title field, enter a title for the section, such as Leads.

4. In the ID field, keep the value of leads.

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

5. Click OK.

6. On the Properties pane, click the Leads 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 leads template.

7. Click the Code button.

   

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

9. Drag and drop the cx-subview fragment to the template editor, between the leads template tags.

   

10. Add the following parameters to the fragment code so that the code looks like the below sample. Be sure to replace leads and Payment_Id_PaymentLead1M 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 (leads).

    <template id="leads">
      <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-subview">
        <oj-vb-fragment-param name="resource" value='[[ {"name": "leads", "primaryKey": "Id", "endpoint": "cx" } ]]'>
        </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_PaymentLead1M", "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 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.

11. Comment out the dynamic container components from the payment_c-detail page.

    1. Click < Return to page.

    2. Click the Code button.

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

       

       Note: To add more panels and subviews, you must first un-comment the dynamic container components.

Tip: Once you add the subview, that's all that's required. The subview for a standard object comes configured with a set of attributes to display by default. If you want to configure the subview, however, then you can do so. See Configure the Subview Layout.

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 Sales Leads panel.

   

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

   

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

   

   After creating a lead, you should be navigated to the lead's detail page. Click the browser back button to return to the Payment detail page where the new lead displays in the Sales Leads panel.

   

6. On the Sales Leads panel, click the link for the lead you just created to navigate to the lead's detail page.

   Click the browser back button.

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

   

8. On the Sales Leads subview, click a lead to navigate to the lead's 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).