1. How do I create an application extension for custom objects in Oracle Visual Builder Studio?
  2. Configure a Child Object

Configure a Child Object

Add a panel for a child object to the parent and configure the subview for the child object.

Configure the Panel for the Child Object

Configure the panel for the child object using the cx-panel fragment.

To configure the panel region:

  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.

    This screenshot illustrates the Code button.

  5. In the Filter field, enter dynamic container.

  6. Drag and drop the dynamic container component to the detail page canvas, outside the closing oj-vb-fragment tag. The dynamic container holds the panels for the detail page.

    This screenshot illustrates how to drag a component to the page canvas.

  7. In the code for the dynamic container, replace containerLayout1 with PanelsContainerLayout.

    This screenshot illustrates how to update the dynamic container's layout name.

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

  9. In the detail page's JSON, rename the two instances of containerLayout1 to PanelsContainerLayout.

    The two instances appear in the "layouts" section and in the "templates" section.

Next, let's create the section template that will be used for the panel.

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

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

  3. Enter a title for the section, such as Payment Lines, and click OK.

  4. Delete the Default Section.

    This screenshot illustrates how to add panel templates.

Let's configure a template and layout for the Payment Lines panel.

  1. On the Properties pane, click the Payment Lines 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 Payment Lines panel template.

  2. Click the Code button.

    This screenshot illustrates the Code button.

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

  4. Drag and drop the cx-panel fragment to the template editor, between the paymentLines template tags.

    This screenshot illustrates how to drag a fragment to the template editor.

  5. Add the following parameters to the fragment code so that the code looks like the below sample. Be sure to replace Payment_c_Id and PaymentLineCollection_c with the appropriate values for your custom top level and child objects.

    
<template id="paymentLines">
  <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-panel"> 
    <oj-vb-fragment-param name="resource"
      value='[[ {"name": $flow.constants.objectName, "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": "selfLink", "params": [{"key": "Payment__c_Id", "value": $variables.id }]}] ]]'></oj-vb-fragment-param>
    <oj-vb-fragment-param name="child" value='[[ {"name": "PaymentLineCollection_c", "primaryKey": "Id", "relationship": "Child"} ]]'></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 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.
    child Enter the REST child object name for the child object that the panel is based on.

  6. 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 Create Layout icon.

    This screenshot illustrates how to create a layout.

  7. In the Create Layout dialog, click the REST resource for your child object.

    In our example, expand cx-custom and click Payment_c/PaymentLineCollection_c.

    This screenshot illustrates how to pick the REST resource for a layout.

  8. Click Create.

  9. On the PaymentLineCollection_c tab, click + Rule Set to create a new rule set for the layout.

    1. In the Create Rule Set dialog, in the Component field, select Dynamic Form.

    2. In the Label field, enter PanelCardLayout.

    3. In the ID field, change the value to PanelCardLayout.

    4. Click Create.

  10. Before we update the rule set and layout that you just created, let’s create a custom field that will be used on the panel itself.

    The panels on the detail page use the avatar-card style. This means that the panel will have an avatar, which is a visual representation of one of the fields on the panel, typically a name.

    This screenshot illustrates what the avatar looks like on a panel.

    In this step, let's create a custom field, Avatar, as well as the avatarFieldTemplate field template, which defines the style of the avatar.

    Create the custom field first.

    1. On the PaymentLineCollection_c tab, click the Fields subtab.

    2. Click + Custom Field.

    3. In the Create Field dialog, in the Label field, enter Avatar.

    4. In the ID field, the value should be avatar.

    5. In the Type field, select Object (Virtual Field).

    6. Click Create.

    7. On the Properties pane for the new virtual field, next to the Fields section, click Add.

    8. Select RecordName.

      Pick any field from which initials can be derived. For example, we can use the RecordName field for custom objects. For the Account object, you would select the PartyName field.

    9. Click Add.

    Create the field template next.

    1. On the PaymentLinesCollection_c tab, click the Templates subtab.

    2. Click + Template.

    3. In the Create Template dialog, for Type, select the Field option.

    4. In the Label field, enter avatarFieldTemplate.

    5. Click Create.

    Map the custom field to the field template.

    1. On the PaymentLinesCollection_c tab, click the JSON subtab.

    2. In the PanelCardLayout section, add this code:

      ,
"fieldTemplateMap": {
"avatar": "avatarFieldTemplate"
      }

      The resulting code will look like this:

      This screenshot illustrates how to map the custom field to the field template.

  11. Next, let's add the fields that you want to display on the panel.

    1. On the PaymentLineCollection_c tab, click the Rule Sets subtab.

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

    3. Click the cx-card fragment.

      This fragment provides the format of the panel.

      This screenshot illustrates how to pick the cx-card fragment.

    4. Each panel includes specific slots. From the list of fields, drag each field to the desired slot.

      For example, drag and drop the Avatar field to the avatarItem slot.

      This screenshot illustrates how to drag a field to a slot on the panel layout.

      Drag and drop other desired fields to the appropriate slots.

    5. On the Properties pane, click Go to Template.

  12. On the Templates subtab, click the Code button.

    This screenshot illustrates the Code button.

  13. Add the following parameters to the template code.

    <oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="style" value="avatar-card"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="badgeItemColor" value="oj-badge-success"></oj-vb-fragment-param>

    The template code should look like the below sample. (The below sample also includes style instructions for the avatarFieldTemplate field template.)

    <!-- Contains Dynamic UI layout templates -->
<template id="defaultTemplate">
<oj-vb-fragment name="oracle_cx_fragmentsUI:cx-card" bridge="[[ vbBridge ]]">
    <oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="style" value="avatar-card"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="badgeItem" value="[[ $fields.Type_c.name ]]">
    </oj-vb-fragment-param>    
    <oj-vb-fragment-param name="avatarItem" value="[[ $fields.avatar.name ]]">
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="item1" value="[[ $fields.RecordName.name ]]">
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="item4" value="[[ $fields.CreationDate.name ]]">
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="item2" value="[[ $fields.Amount_c.name ]]">
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="item3" value="[[ $fields.CreatedBy.name ]]">
    </oj-vb-fragment-param>
    <oj-vb-fragment-param name="badgeItemColor" value="oj-badge-success"></oj-vb-fragment-param>
  </oj-vb-fragment>
</template>
 
<template id="avatarFieldTemplate">
<oj-avatar role="img" size="sm" initials="[[ oj.IntlConverterUtils.getInitials($value.RecordName(), $value.RecordName()) ]]"
    :aria-label="[['Avatar of ' + $value.RecordName()]]"
    :title="[['Avatar of ' + $value.RecordName()]]" background="green">
  </oj-avatar></template>

    You can add more fields by returning to the default layout and dragging and dropping, as you previously did.

    Alternatively, you can add fields to the panel using the Properties pane. To do this, click the Fragment Container node in the Structure pane.

    This screenshot illustrates the Structure pane for the Payment Line panel's template.

    Then, add your desired custom object fields using the Input Parameter fields on the Properties pane.

    This screenshot shows how to use the Properties pane to populate a panel.

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

    Parameters for Custom Panel

    Parameter Name Description

    style

    Specify "avatar-card" for the panels that you add to the detail page.

    enableActions

    Panels can have actions when they display on a dashboard. Panels that display on a detail page typically don't need actions, however, so set this parameter to "false".

  14. Manually update the template's JSON with the labelEdge property.

    1. On the PaymentLineCollection_c tab, click the JSON subtab.

    2. In the section for the PanelCardLayout's default layout, add the labelEdge property with a value of "none".

      In our example, this is what the labelEdge property should look like:

      This screenshot illustrates where to add the labelEdge property.

  15. Finally, comment out the dynamic container component 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.

      This screenshot illustrates how to use the dropdown to view the page.

    4. Comment out the dynamic container component that you added for the panel region.

      This screenshot illustrates how to comment out the dynamic container component.
      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.

  16. Test the panel that you added 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.

      This is a screenshot of the Preview button in Visual Builder Studio.

    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

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

      This is a screenshot of the test list page.

    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.

      Note: The screenshot below illustrates what a panel looks like with data. In your testing, the panel might be empty.
      This screenshot illustrates what the panel will look like.

      The link at the bottom of the panel navigates the user to the subview. Learn how to configure the subview in Configure the Subview for Child Objects.

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

    This screenshot illustrates how to use the Push Git command.

Configure the Subview for Child Objects

You can use fragments in Oracle Visual Builder Studio to create a custom object’s user interface pages: the list page, create page, and detail page with panels. A panel can display only a few records, however, due to limited real estate. To see all records, users must navigate from the panel to a subview. This topic explains how to build the subview using fragments.

What's a Subview?

Since the real estate of a panel is small, users can click a View All link to navigate to a second page that displays all records.

Here's a screenshot of a View All Contacts link on a panel. Notice that, in this example, the panel itself has room to display only one contact, John Cook, although a total of three records exist. Users can click the View All Contacts link to see all three contacts.

This is a screenshot of a View All link.

Here's a screenshot of a subview. A subview includes a basic information region at the top and a table. If you create a custom panel for a child or related object, then you must create this page, as well. You can create this page using a fragment.

This is a screenshot of the View All Contacts page.

Create the Payment Lines Subview

Let's create the subview for our payment records. To do this, we'll add a new dynamic container to the detail page in Page Designer.

  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. Confirm that you are viewing the page in Page Designer.

    This screenshot illustrates how to use the dropdown to view the page.

  5. Click the Code button.

    This screenshot illustrates the Code button.

  6. In the Filter field, enter dynamic container.

  7. Drag and drop the dynamic container component to the detail page canvas, outside the previous dynamic container that holds the panels. This dynamic container will hold the subview.

  8. In the code for the dynamic container, replace containerLayout1 with SubviewContainerLayout.

    This screenshot illustrates the placement of the new dynamic container for the subview.

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

  10. In the detail page's JSON, rename the two instances of containerLayout1 to SubviewContainerLayout.

    The two instances appear in the "layouts" section and in the "templates" section. Here’s where the instance appears in the "templates" section.

    This screenshot illustrates where to replace the original text with the new SubviewContainerLayout text.

Create the section template that will be used for the subview.

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

  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 using the REST child object name, such as PaymentLineCollection_c.

  4. In the ID field, change the value to PaymentLineCollection_c.

    Note: You can retrieve the REST child object name from the service connection endpoint.

    This screenshot illustrates how to find the REST object name.

  5. Click OK.

  6. Delete the Default Section.

    This screenshot illustrates the section for the subview.

  7. 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 name, PaymentLineCollection_c.

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

      This screenshot illustrates where to make updates in the JSON file.

Configure the Subview Layout

We previously added the subview dynamic container to the page, as well as the section template.

Build the structure of the subview using the cx-subview fragment.

  1. On the Properties pane, click the PaymentLineCollection_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 PaymentLineCollection_c template.

  2. Click the Code button.

    This screenshot illustrates the Code button.

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

  4. Drag and drop the cx-subview fragment to the template editor, between the paymentLineCollectionC template tags.

    This screenshot illustrates where to drag the fragment to in the page.

  5. Add the following parameters to the fragment code so that the code looks like the below sample. Be sure to replace Payment__c_Id and PaymentLineCollection_c with the appropriate values for your custom top level and child objects. Retrieve these values from the service connection endpoint.

    This screenshot illustrates how to use the service connection to find the appropriate parameter values.

    <template id="paymentLineCollectionC">
  <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-subview">
<oj-vb-fragment-param name="resource"
      value='[[ {"name": $flow.constants.objectName, "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": "selfLink", "params": [{"key": "Payment__c_Id", "value": $variables.id }]}] ]]'></oj-vb-fragment-param>
    <oj-vb-fragment-param name="child" value='[[ {"name": "PaymentLineCollection_c", "primaryKey": "Id", "relationship": "Child"} ]]'></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 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.
    child Enter the REST child object name for the child object that the panel is based on.

Configure the subview layout.

  1. Click the Layouts tab, then click PaymentLineCollection_c.

  2. On the PaymentLineCollection_c tab, click + Rule Set to create a new rule set for the layout.

    1. In the Create Rule Set dialog, in the Component field, select Dynamic Table.

    2. In the Label field, enter SubViewLayout.

    3. In the ID field, change the value to SubViewLayout.

    4. Click Create.

  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 so that users can be automatically navigated back to the subview after editing the payment.

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

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

      This screenshot illustrates how to use the dropdown to view the page.

    3. Click the Code button.

      This screenshot illustrates the Code button.

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

      This screenshot illustrates which fragment tag to click.

    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, next to the Variable field, click the Select Variable icon.

      4. In the Variables popup, under the Page heading, click view.

        This screenshot illustrates the variable to select.

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

  5. Comment out the subview's dynamic container component 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.

      This screenshot illustrates how to use the dropdown to view the page.

    4. Comment out the dynamic container component that you added for the subview.

      This screenshot illustrates how to comment out the dynamic container component.

  6. Add an Actions menu to the subview.

    To do this, create a custom field, Actions Menu.

    1. On the PaymentLineCollection_c tab, click the Fields subtab.

    2. Click + Custom Field.

    3. In the Create Field dialog, in the Label field, enter Actions Menu.

    4. In the ID field, the value should be actionsMenu.

    5. In the Type field, select String.

    6. Click Create.

    Map the custom field to the field template.

    1. On the PaymentLinesCollection_c tab, click the JSON subtab.

    2. In the SubViewLayout section, add this code:

      ,
      "fieldTemplateMap": {
        "actionsMenu" : "actionMenuTemplate"
      }

      The resulting code will look like this:

      This screenshot illustrates how to map the custom field to the field template.

    Add the custom field to the subview table.

    1. Click the PaymentLineCollection_c tab > Rule Sets subtab.

    2. Click SubViewLayout.

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

    4. From the list of fields, click the actionsMenu field to add it to the subview table.

  7. The Actions menu provides both an Edit and Delete action. Users click Edit to edit a payment line.

    Create a layout for the edit payment line page.

    This screenshot illustrates what the Actions Menu will look like at runtime.

    1. On the PaymentLineCollection_c tab, click < Rule Set to return to the main Rule Sets page where you can create a new rule set.

      1. Click + Rule Set.

      2. In the Create Rule Set dialog, in the Component field, select Dynamic Form.

      3. In the Label field, enter EditLayout.

      4. In the ID field, change the value to EditLayout.

      5. Click Create.

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

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

      2. Click Select fields to display.

      3. From the list of fields, select the fields that you want to display on the edit payment line page. The fields display as columns in the order that you click them, but you can rearrange them.

    3. On the Properties pane for this layout, in the Max Columns field, enter 2.

      You might need to click < Form to see the properties for the layout.

  8. 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.

      This is a screenshot of the Preview button in Visual Builder Studio.

    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

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

      This is a screenshot of the test list page.

    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.

      Note: The screenshot below illustrates what a panel looks like with data. In your testing, the panel might be empty.

      This screenshot illustrates what the panel will look like.

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

      This screenshot illustrates what the subview looks like.

    6. Click the Actions Menu > Edit to edit the payment line.

      This screenshot illustrates the page that displays once the user clicks the Edit action to edit a payment line.

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

    This screenshot illustrates how to use the Push Git command.

Display a Smart Action on a Child Object Subview Only for a Specific Parent Object

When you create a subview for a child object, you may need to create smart actions that apply specifically to that subview.

Suppose, for example, that you used the CX Extension Generator to display a list of shipments on payments, with Shipments being a child object of Payments. CX Extension Generator automatically creates the Add smart action that users enter in the Action Bar to add shipments to payments, but it doesn't create any smart action to remove the entry. Here are the steps to create the smart action and make it available only on the Payment subview.

  1. Create the Remove smart action as a REST-based smart action as described in the topic Create REST-Based Smart Actions. Be sure to enter the name of the parent object in the Context region of the Availability page.

  2. In VB Studio open the parent object's detail page and view the Template code (App UIs > Payment_c_detail > Code > Page > Template

    Navigation in VBS described in the text.

  3. Find the template for the subview in the code, and add the following parameter: 

    <oj-vb-fragment-param name=“enableActions” value=‘[[{“enabled”: “true”, “enableContext”: “true”}]]’></oj-vb-fragment-param>

    Insert it right before the </oj-vb-fragment> tag.

    Code highlighting the location for the added code.