Customizing the Billing Care Account Banner

12 Customizing the Billing Care Account Banner

Learn how to customize the Oracle Communications Billing Care Account Banner.

Topics in this document:

About the Billing Care Account Banner

The Account Banner displays the following default set of views as tiles in the Billing Care interface listed in Table 12-1.

Table 12-1 Default Billing Care Account Banner Tiles

Tile Registry Key	Description
accountBannerContact	Displays account contact information
accountBannerAccountInfo	Displays account information such as plan and status
accountBannerCollections	Displays account collections information
accountBannerBillUnits	Displays a summary of account bill unit information
accountBannerVIPInfo	Displays account VIP status if applicable

Each tile displays the information from the Billing Care module responsible for the type of data. For example, the accountBannerContact tile displays data from the account module.

The accountBannerSections key in the Billing Care registry file contains the list of tiles to display in the Account Banner.

Customizing the Billing Care Account Banner

Customize the Account Banner tiles by:

Creating custom tiles requires the creation of the resources required by the tile. For example, you may need to create a custom module, or view model and possibly CSS, to display custom tile information correctly. See "About Billing Care Modules" for more information on Billing Care modules and the resources you need to create when using custom tiles.

The Billing Care SDK includes sample Account Banner customizations, including a README.txt file explaining the samples, in the SDK_home/samples/AccountBanner directory, where SDK_home is the directory where you installed the Billing Care SDK. Use these samples when developing your own Account Banner customizations.

Creating Configuration Files for Account Banner Customization

The Account Banner tiles displayed, and their display order, are defined in the Billing Care configuration file, Configurations.xml. This file includes key values specifying which tiles to display, and their order, in the accountBannerSections key as shown in Example 12-1.

Example 12-1 Configurations.xml accountBannerSections Sample

<configuration key="accountBannerSections">
   <value>accountBannerContact,accountBannerAccountInfo,accountBannerCollections,accountBannerBillUnits,accountBannerVIPInfo</value>         
</configuration>

Each value represents a tile and is a key in the default registry file, registry.js. The registry.js file defines views and view models. For example, Example 12-2 shows the view definition in the registry for the accountBannerVIPInfo tile.

Example 12-2 registry.js Account Banner Tile Entry Sample

accountBannerVIPInfo: {
   view: 'text!templates/home/accountBanner/vipInfoView.html'
}

The Billing Care SDK includes the default configuration file (Configurations.xml) and the default registry file (registry.js) in the SDK_home/references directory, where SDK_home is the location where you installed the SDK.

To customize the Account Banner, you create a custom version of the Billing Care configuration file named CustomConfigurations.xml, and a custom version of the registry file named customRegistry.js. The custom configuration file specifies your tiles to display and their display order. The custom registry file includes view and view model definitions for each tile you want to display.

To customize the account banner:

Copy the default Configurations.xml file from SDK_home/references to a custom configuration file named CustomConfigurations.xml in your myproject/web/WEB-INF/classes/custom/configurations directory, where myproject is your NetBeans IDE project containing your Billing Care customizations.
Copy the default registry.js file from SDK_home/references to a custom registry file named customRegistry.js in your myproject/web/custom directory, where myproject is your NetBeans IDE project containing your Billing Care customizations.
Edit the accountBannerSections key in the CustomConfigurations.xml file with your customizations as described in the following sections.
If adding new tiles, define the view and view model for your new tiles in the customRegistry.js file.
Add your customization files to your NetBeans IDE project (myproject):
- Add the CustomConfigurations.xml file in the myproject/web/WEB-INF/custom/configurations folder.
- Add the customRegistry.js file in the myproject/web/custom/ folder.
- Add any new view HTML files to support your custom tile in the myproject/web/custom folder.
- Add any new JavaScript to support your custom view model in the myproject/web/js directory.
- Add any new CSS to support your custom view in the myproject/web/css directory. Custom CSS must be properly configured in the registry to override the default CSS. See "Overriding Themes" for more information on overriding the default CSS.
Right-click your NetBeans IDE project and select Clean and Build.
Package and deploy your Account Banner customizations to your Billing Care domain.

For more information, see "Packaging and Deploying Customizations".
Verify your changes in Billing Care.

Rearranging Account Banner Tiles

The tile display order in the Account Banner is defined by the order of the listed values in the accountBannerSections key in the CustomConfigurations.xml file.

To rearrange the tile order in the Account Banner:

Open the CustomConfigurations.xml file in your myproject/web/WEB-INF/custom/configurations directory, where myproject is your NetBeans IDE project containing your Billing Care customizations in an editor.
Edit the accountBannerSections key in the CustomConfigurations.xml file listing the Account Banner tiles in the order you want displayed in Billing Care.

For example, if you want the accountBannerVIPInfo tile to be displayed first, change the following accountBannerSections key value from:
```
<value>accountBannerAccountInfo,accountBannerContact,accountBannerCollections,accountBannerBillUnits,accountBannerVIPInfo</value>
```
to:
```
<value>accountBannerVIPInfo, accountBannerAccountInfo,accountBannerContact,accountBannerCollections,accountBannerBillUnits</value>
```
Save and close your CustomConfigurations.xml file.
Right-click your NetBeans IDE project and select Clean and Build.
Package and deploy your Account Banner customizations to your Billing Care domain.

For more information, see "Packaging and Deploying Customizations".
Verify your changes in Billing Care.

Removing Account Banner Tiles

The tiles displayed in the Account Banner are defined by the included values in the accountBannerSections key in the CustomConfigurations.xml file.

To remove a tile from the Account Banner:

Open the CustomConfigurations.xml file in your myproject/web/WEB-INF/classes/custom/configurations directory, where myproject is your NetBeans IDE project containing your Billing Care customizations with an editor.
Edit the accountBannerSections key in the CustomConfigurations.xml file, removing the Account Banner tiles you do not want displayed in Billing Care.

For example, to remove the accountBannerVIPInfo tile, change the following accountBannerSections key value from:
```
<value>accountBannerAccountInfo,accountBannerContact,accountBannerCollections,accountBannerBillUnits,accountBannerVIPInfo</value>
```
to:
```
<value>accountBannerAccountInfo,accountBannerContact,accountBannerCollections,accountBannerBillUnits</value>
```
Save and close your CustomConfigurations.xml file.
Right-click your NetBeans IDE project and select Clean and Build.
Package and deploy your Account Banner customizations to your Billing Care domain.

For more information, see "Packaging and Deploying Customizations".
Verify your changes in Billing Care.

Extending the Account Navigation Banner

In addition to rearranging or removing default tiles, you can use the Navigation Banner sample SDK to extend the account banner with additional custom buttons, label-value pairs, and navigation routes. This allows you to:

Add custom buttons for launching dialogs or new views (for example, adding a Payments button that opens the All Payments dialog box).
Display additional label-value pairs specific to your organization's needs (for example, displaying a customer’s current loyalty tier or status).
Register custom navigation routes and dialog logic (for example, creating a route for a custom full-page view similar to existing installments or deposits).
Modify the display by updating view templates and view models

The SDK sample is located in SDK_home/samples/NavigationBanner, where SDK_home is the directory where you installed the Billing Care SDK, and includes:

customDialogViewModel.js, customFullPageViewModel.js, customNavigationViewModel.js, and customRouterViewModel.js (view models)
customRouterHelper.js
customButtonsView.html, customDialogView.html, customFullPageView.html, and customLabelsView.html (templates)
customRegistry.js
A README.txt with usage instructions.

Adding Custom Buttons and Fields

To add a custom button to the Account Banner:

Open the SDK_home/NavigationBanner/web/custom/js/viewmodels/navigationBanner/customNavigationViewModel.js to define the list of custom buttons to be added to the navigation banner, specifying each button's label, ID, and click handler function.
```
self.customNavigationButtonsList = [{id: "custom-page", label: "Custom Page", onOjAction: self.openFullPageView},
 {id: "custom-dialog", label: "Custom Dialog", onOjAction: self.openDialogView}];
```
You can add as many buttons as needed by repeating the <button> element with different click bindings.
In your view model which is located in SDK_home/NavigationBanner/web/custom/js/viewmodels/navigationBanner/customNavigationViewModel.js, define functions to handle the click events for each custom button you included in your template. Each handler should implement the logic for the corresponding action, such as opening a dialog or a full-page view.
```
define(['knockout'], function(ko) {
  function CustomNavigationViewModel() {
    var self = this;

    // Handler for dialog
    self.openCustomDialog = function() {
      // Insert dialog-opening logic
    };

    // Handler for full page
    self.openCustomFullPage = function() {
      // Insert navigation logic for full page view
    };
  }
  return CustomNavigationViewModel;
});
```
These functions set the behavior for your new buttons. Follow the pattern in the SDK sample for consistency.
(Optional) To open new full-page views from a custom button, extend your custom router view model and helper, as demonstrated in the SDK sample (customRouterViewModel.js, customRouterHelper.js).

Open your myproject/web/custom/customRegistry.js file and register your custom navigation banner module:

var CustomRegistry = {
    navigationBanner: {
        viewmodel: './custom/js/viewmodels/navigationBanner/CustomNavigationViewModel.js',

    },
    customNavigationBannerOptions: {
        extensionButtonsView: 'text!templates/customButtonsView.html'
    },
    router: {
        viewmodel: '../custom/js/viewmodels/router/customRouterViewModel'
    },
    customFullPage: {
        view: 'text!templates/customFullPageView.html',
        viewmodel: '../custom/js/viewmodels/customFullPage/customFullPageViewModel'
    },
    customDialogView: {
        view: 'text!templates/customDialogView.html',
        viewmodel: '../custom/js/viewmodels/customDialogView/customDialogViewModel'
    }
};

Note:

If you have other custom modules (for example, for custom router logic), include those in the same CustomRegistry object according to the SDK sample structure.

Package your customizations and deploy them according to the instructions in the "Packaging and Deploying Customizations".
Log in to Billing Care and verify that your custom account banner appears.

Adding Custom Label-Value Pairs

To add custom label-value pairs to the account banner for information such as customer segments, statuses, or other business attributes, follow these steps:

In your view model (for example, CustomNavigationViewModel.js), update the customNavigationBannerValueList array to include the custom labels and values you want to display.
```
self.customNavigationBannerValueList = [{label: "Check", value: "Value"}];
```
Open your custom navigation banner HTML template file (for example, SDK_home/samples/NavigationBanner/web/templates/customLabelsView.html in web/custom/js/templates/). Add a label and bind the value using Knockout syntax.
```
<label>Custom Value:</label>


<label>Customer Tier:</label>

```
You can define and bind as many custom pairs as required to support your organization’s requirements. Each observable in the view model corresponds to a or similar UI element in the template.

Open your myproject/web/custom/customRegistry.js file and register your custom navigation banner module:

var CustomRegistry = {
  navigationBanner: {
        viewmodel: './custom/js/viewmodels/navigationBanner/CustomNavigationViewModel.js',
    },
    customNavigationBannerOptions: {
        extensionLabelView: 'text!templates/customLabelsView.html',
    },
  // ...other custom module entries...
};

Note:

If you have other custom modules (for example, for custom router logic), include those in the same CustomRegistry object according to the SDK sample structure.

Package your customizations and deploy them according to the instructions in the "Packaging and Deploying Customizations".
Log in to Billing Care and verify that your custom label-value pairs appear as expected on the account banner.