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

If your custom object has relationships with other objects, then users can add related object records directly from the custom object's detail page. To enable this, you must build two things: a new subview for the related object and an Add dialog that can be launched from the detail page. This topic illustrates how to create a subview for a related object (related via a one-to-many relationship).

In our example, the Payment object has a one-to-many relationship with the Order object. At runtime, the user should be able to add an order to a payment.

That's the scenario that we'll address in this topic.

Setup Overview

Enabling the addition of related object records involves multiple steps in Oracle Visual Builder Studio:

1. Create the subview for the related object.

   This topic describes this process.

2. Create a link field on the subview table.

   Users can click the link field to drill down to the related object record's details.

3. Build the Add dialog so that users can add the related object record to the custom object record.

4. Build the Delete dialog so that users can delete the related object record from the custom object record.

5. Add the Delete icon to the subview table so that users can access the Delete dialog.

Application Composer Prerequisites

Before creating the Add dialog, you must complete these prerequisite steps in Application Composer, inside a sandbox.

1. Create the one-to-many relationship for your custom object.

   In our example, we want users to be able to add an order to a payment. In this case, create a one-to-many relationship between Payment as the source object and Order as the target object.

   The relationship's display name can be something like PaymentOrder.

2. You must also create the Add smart action.

   The Add smart action displays from the Action Bar on both the detail page and subview. Users can select the Add smart action to launch the Add dialog.

3. Publish your sandbox.

   Note:

   If you're already running Visual Builder Studio, then sign out and sign back in before continuing to configure your application extension. Doing this ensures that Visual Builder picks up the latest published changes from Application Composer.

Visual Builder Studio Prerequisites

After completing the Application Composer prerequisites, you must complete these steps in Visual Builder Studio before adding the Add dialog to the detail page.

1. First, create a variable for the detail page.

   1. Click the detail tab, then click the Variables subtab.

   2. Click + Variable.

   3. In the Create Variable dialog, make sure the Variable option is selected and, in the ID field, enter enableAddOrder.

   4. In the Type field, select Boolean.

   5. Click Create.

   6. On the Properties pane, in the Default Value field, click false.

2. Let's add a new string to the translation bundle:

   1. On the customBundle tab, click + String.

   2. In the Key field, enter OrderName.

   3. In the String field, enter Order Name.

   4. Click Create.

After adding an order to a payment, the user will be navigated to the order subview page. The user can click the order name, which is a link field, to navigate to the Order detail page.

In our example, the Order object is a custom object. Let's create an order detail page and create page so that you can test the link field.

1. Click the App UIs tab.

2. Expand the cx-objects node.

3. Click the + icon next to cx-objects to create a new flow.

   

4. In the Create Flow dialog, in the Flow ID field, enter the flow name, such as order.

5. Click the + icon next to the order node to add pages to your custom application.

6. Click Create Page.

7. Create two pages:

   • list

   • create

   • detail

8. Enable navigation to your custom application.

   1. Click the order flow's create tab > Settings subtab.

   2. Select Let other App UIs navigate to this page.

   3. Click the order flow's detail tab > Settings subtab.

   4. Select Let other App UIs navigate to this page.

   5. Click the order flow's list tab > Settings subtab.

   6. Select Let other App UIs navigate to this page.

   7. Click the order tab > Settings subtab.

   8. In the Default Page field, select list.

   9. Select Let other App UIs navigate to this page.

9. When you created the order flow, an order-start page was automatically created.

   Delete the order-start node by right-clicking and clicking Delete.

10. Next, create a variable for the order flow's detail page.

    Click the detail tab, then click the Variables subtab.

11. Click + Variable.

    1. In the Create Variable dialog, make sure the Variable option is selected and, in the ID field, enter id.

    2. Click Create.

    3. On the Properties pane, in the Input Parameter section, click Enabled.

    4. Click Pass On URL.

       

Finally, create a new service connection to your related object. In our example, we will create a service connection to the Order_c object.

1. Click the Services tab.

2. Click + Service Connection > Select from Catalog.

3. Click Sales and Service.

4. Click the pencil icon next to CrmRest and enter your custom object name.

   

   For example, enter Order_c.

5. In the Metadata Retrieval Option field, select Dynamically retrieve metadata.

6. In the Filter Objects/Endpoints field, enter your custom object name to filter the list.

   For example, enter order.

7. Click the check box for your custom object.

   For example, Order_c.

8. Click Create.

Create Event Listener and Action Chain

1. Next, create an event listener and action chain.

   1. Click the payment flow's detail tab, then click the Event Listeners subtab.

   2. Click + Event Listener.

   3. In the Create Event Listener dialog, in the Filter Events field, enter beforeInvokeSmartActionEvent.

   4. Click beforeInvokeSmartActionEvent.

   5. Click Next.

   6. Click the + icon next to Page Action Chains.

   7. In the New Page Action Chain field, enter AddOrderBeforeInvokeSAChain.

   8. Click Finish.

2. Let's modify the action chain.

   1. On the refreshed Event Listeners page, next to the new AddOrderBeforeInvokeSAChain event listener, click Go to Action Chain.

   2. Drag an If logic action to the Start node.

   3. On the Properties pane for the If action, in the Condition field, enter the following:

      [[ $variables.event.smartActionId === 'CUST-AddOrder-Payment_c' ]]

      Note:

      CUST-AddOrder-Payment_c is the Add Order smart action that you previously created.

   4. Let's configure the true branch for the If logic action.

      1. Drag an Assign Variables action to the true branch.

      2. On the Properties pane, next to the Variables heading, click Assign.

      3. In the Assign Variables dialog:

         1. On the Target side, click enableAddOrder.

         2. In the text entry box, enter true.

         3. Click the Static option.

         4. Click Save.

Create the Order Subview

Next, create a new subview for the orders that you're adding to a payment. This is where you'll add the Add Order dialog.

1. On the payment flow's detail tab, click Page Designer.

2. Click the Design button.

3. In the Structure view, click the Dynamic Container node inside the Drilldown slot.

   This is the dynamic container that we added when we first created the framework of the detail page. This dynamic container holds the detail page's subview pages.

   Note: In the Structure view, you can see two Dynamic Container nodes. One dynamic container holds the foldout panels. The other dynamic container holds the subview pages. We're using the dynamic container that holds the subview pages.

   

4. On the Properties pane, click + Case.

5. In the Condition field, enter:

   $variables.view === 'Order_PaymentOrder_Tgt'

   This is the same value that you set in the navigation parameter for the Add Order smart action.

6. Next to the Section heading, click the Add Section icon, and then click New Section.

7. Enter a title for the section, such as OrdersSubview, and click OK.

8. On the Properties pane, click the OrdersSubview link.

   

   Page Designer navigates you to the template editor where you can design the subview template.

9. On the Components palette, in the Filter field, enter Dynamic Table.

10. Drag and drop the Dynamic Table component to the Structure view.

    

11. On the Properties pane for the Dynamic Table node, in the Class field, enter oj-sm-width-full.

12. On the Properties pane, click the Quick Start tab.

    1. Click Configure Layout.

    2. In the Configure Layout dialog, pick the related object's endpoint.

       In our example, click Payment_c/Order_PaymentOrder_Tgt.

       

    3. Click Next.

    4. In the Label field, enter the rule set name. In our example, enter subview.

    5. Click the fields that you want to include in this subview.

       In our example, click RecordName and CurrencyCode.

    6. Click Next.

    7. Map the Page > Variables > id variable on the Sources side to the <primarykey>_Id (in our example, Payment__c_Id) on the Target side.

    8. Click the Expression option.

    9. On the Target side, click the onlyData parameter.

    10. In the text entry box, enter true and click the Static Content option.

    11. On the Target side, click the totalResults parameter.

    12. In the text entry box, enter true and click the Static Content option.

    13. Click Finish.

13. Here's a final look at where the Order subview should be located within the Dynamic Container:

    

14. 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).