11 Customizing the Billing Care Account Banner

This chapter provides an overview of customizing the Oracle Communications Billing Care Account Banner.

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 11-1.

Table 11-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 11-1.

Example 11-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 11-2 shows the view definition in the registry for the accountBannerVIPInfo tile.

Example 11-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/BillingCare_SDK/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:

  1. Copy the default Configurations.xml file from SDK_HOME/BillingCare_SDK/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.

  2. Copy the default registry.js file from SDK_HOME/BillingCare_SDK/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.

  3. Edit the accountBannerSections key in the CustomConfigurations.xml file with your customizations as described in the following sections.

  4. If adding new tiles, define the view and view model for your new tiles in the customRegistry.js file.

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

  6. Right-click your NetBeans IDE project and select Clean and Build.

  7. Package and deploy your Account Banner customizations to your Billing Care domain.

    For more information, see "Packaging and Deploying Customizations".

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

  1. 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 with an editor.

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

  3. Save and close your CustomConfigurations.xml file.

  4. Right-click your NetBeans IDE project and select Clean and Build.

  5. Package and deploy your Account Banner customizations to your Billing Care domain.

    For more information, see "Packaging and Deploying Customizations".

  6. 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:

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

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

  3. Save and close your CustomConfigurations.xml file.

  4. Right-click your NetBeans IDE project and select Clean and Build.

  5. Package and deploy your Account Banner customizations to your Billing Care domain.

    For more information, see "Packaging and Deploying Customizations".

  6. Verify your changes in Billing Care.