Adding an Action to Premise Customer History

You can use VB Studio to add custom actions to customer history records on the Premise screen, which is available in CX for Utilities Agent Service. These custom actions will be available in an action menu on the right side of each customer history record, as shown here:

Figure 14-7 Premise Customer History


This screen shows an example of a premise customer history record with an action menu.

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 premise data and understands how to use Visual Builder. For additional information, see:

Example: Adding an Action Menu Item to Customer History Records on the Premise Screen

  1. Log into CX for Utilities Agent Service as an administrator.

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

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

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

  5. Select the e11y-user-action-template fragment.
  6. Select the Variables sub-tab to display the constants and variables.

  7. Click on the USER_ACTION_CONTEXT_LIST constant.

  8. 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. Also be sure that the value of “id” matches the id of the user action you created.

    [
    
    {
    
    "id": "UNIQUE_ID_TO_IDENTIFY_THIS_ACTION",
    
    "label": "Custom Action",
    
    "active": true,
    
    "context": {
    
    "type": "Url",
    
    "url": "https://test.url.com/trunk/${from}.html?component=${customerClass}&demo=${billingAccountId}",
    
    "windowName": "_blank",
    
    "params": [
    
    {
    
    "name": "from",
    
    "value": "jetCookbook"
    
    },
    
    {
    
    "name": "customerClass",
    
    },
    
    {
    
    "name": "billingAccountId"
    
    }
    
    ]
    
    }
    
    }
    
    ]

    This sample code uses the customerClass and billingAccountId params in the action meta-data, which are exported for Visual Builder extensions to use. See the page’s variable UserActionParamsUiQuickActionBar for a complete list of params we export, which currently includes:

    • customerClass

    • billingAccountId

    • setupDate

    • endDate

    • serviceTypes

    • mainCustomer

    • relatedParties

  9. If there are extensions params that you want to use in action meta-data's context params, complete these steps:

    1. Return to the main-premise-landing-start tab and select the Variables sub-tab.

    2. Click on the USER_ACTION_PARAMS_CUSTOMER_HISTORY_ACTION constant.

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

      [[
      
      [
      
      {
      
      "name": "extTestId",
      
      "value": $page.variables.extTestId
      
      }
      
      ]
      
      ]]
  10. 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.

  11. Return to the main-premise-landing-start tab and select the Variables sub-tab.

  12. Click on the USER_ACTION_UI_CUSTOMER_HISTORY_ACTION constant.

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

  14. Preview your changes to verify that they look as you expected. This will launch a new tab with the Premise screen. 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.