Adding Actions to Account 360 Billing Account View

You can use VB Studio to add custom actions to the Actions menu on the Account 360 screen when viewing a billing account. This screen is available in CX for Utilities Sales.

Figure 14-8 Add Custom Actions

You can add these types of actions:

• Open URL action

• Navigate to page action

This example shows how to add either an open URL action or a navigate to page action to the button.

This example assumes that the reader is familiar with Account 360 and understands how to use Visual Builder. For additional information, see:

• Using Account 360 in the Using CX for Utilities Sales Guide

• The Visual Builder Studio library in the Oracle Help Center

• Customizing Variables and Constants in the Extending Oracle Cloud Applications with Visual Builder Studio Guide

Example: Adding an Action Menu Item to Account 360 Billing Account View

1. Log into CX for Utilities Sales as an administrator and navigate to Account 360.

2. Search for a billing account.

3. Click the menu at the top right of the page and select Edit Page in Visual Builder Studio.

4. Select your workspace and click Select. Note that you can also create a new workspace if needed.

5. In the App UIs panel, expand Customer Experience (CX), then expand Customer Experience For Utilities and then expand Fragments.

6. Select the e11y-user-action-template fragment.

7. Select the Variables sub-tab to display the constants and variables.

8. Click on the USER_ACTION_CONTEXT_LIST constant.

9. On the right side of the screen, enter the following sample code in the Default Value field, making sure that any params that you include in your code sample are also included in your URL.

   [
   {
   "id": "CUSTOM_ACTION_NAME",
   "label": "Custom Menu Label",
   "active": true,
   "context": {
   "type": "Url",
   "url": "https://custommenuname.html?component=${component}&demo=${demo}&testId=${testId}",
   "params": [
   {
   "name": "component",
   "value": "menu"
   },
   {
   "name": "demo",
   "value": "overview"
   },
   {
   "name": "testId",
   "scope": "ext"
   }
   ]
   }
   }
   ]
   

   Note:

   You can also add a navigate to page action by replacing the above code sample with this code sample:

   [
   {
   "id": "CUSTOM_ACTION_NAME",
   ...
   },
   {
       "id": "NAVIGATE_ACTION_NAME",
       "label": "Navigate to activities page",
       "active": true,
       "context": {
           "type": "InAppNavigation",
           "appName": "cx-sales",
           "appPage": "application/container/accounts/accounts-detail",
           "windowName": "_blank",
           "params": [
               {
                   "name": "puid",
                   "alias": "keyAccountPartyNumber"
               },
                       {
                           "name": "view",
                           "value": "activities"
                       }
           ]
       }
   }
   ]
   

10. If there are Visual Builder extension params that you want to use in action meta-data's context params, complete these steps to provide your Visual Builder extension params:

    1. Return to the billingaccount-dashboard tab and select the Variables sub-tab.

    2. Click on the USER_ACTION_PARAMS_DASHBOARD_MORE_ACTIONS constant.

    3. In the Default Value field, enter the value mapping for extension params:

       [{
       
       "name":"testId",
       
       "value":"[[$page.variables.testId]]"
       
       }]

11. Click on the JSON sub-tab to display a view where you can easily edit this sample code, and update the code sample so it reflects your custom values.

12. Return to the Variables subtab and click on the USER_ACTION_PARAMS_DASHBOARD_MORE_ACTIONS constant.

13. In the Default Value field, enter the ID you used in your code sample above. For example, enter ["CUSTOM_ACTION_NAME"] in this field.

14. Preview your changes to verify that they look as you expected. This will launch a new tab with the Account 360 in the billing account view. Validate that your new option is available, and that it navigates to the appropriate URL.

15. When your changes are ready for use, complete the steps to publish your changes to your production environment.