12 Customizing the Balances Area

Learn how to use the Oracle Communications Billing Care SDK to customize the Balances area in the Billing Care account home page.

Topics in this document:

• About Customizing the Balances Area

• Replacing the Balances Area with Custom Account Information

• Customizing the Data Displayed in the Balances Area

About Customizing the Balances Area

The Balances area of the Billing Care account home page shows what the customer owes and what credit limits the customer has. It shows the customer's currency balance, which is shown in green and has a currency symbol, and noncurrency balance, which is shown in blue.

Figure 12-1 shows the Balances area for a sample customer.

Figure 12-1 Balances Area in Account Home Page

Description of "Figure 12-1 Balances Area in Account Home Page"

You can customize the Balances area in the following ways:

• Remove it completely and replace it with custom account information. See "Replacing the Balances Area with Custom Account Information".

• Customize the data that is displayed in it. See "Customizing the Data Displayed in the Balances Area".

Replacing the Balances Area with Custom Account Information

You can remove the Balances area from the Billing Care account home page and display custom account information instead. This requires you to create the resources used by the Balances area. For example, you need to create a view and view model for displaying your custom account information correctly. See "Customizing Billing Care" for more information about customizing Billing Care resources.

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

Customizing the Balances Area

To remove the Balances area from the Billing Care account home page and display custom account information instead:

1. Create a view for displaying your custom account information . See "Creating a View for the Balances Area".

2. Create a custom view model for your custom account information. See "Creating a Custom Balances Area View Model".

3. Override the registry values for the Billing Care Balances tab. See "Configuring the Custom Balances Area in the Registry".

Creating a View for the Balances Area

Billing Care uses an HTML view file to render the Balances area of the account home page. You can create a custom view that displays custom account information rather than balance information.

A sample balances.html file is provided in the SDK_home/samples/BalancesCustomization/web/custom/templates directory. Use this sample to create a view for displaying your custom account information.

To create a view for the Balances area:

1. Create a balances.html file in the myproject/web/custom/js/viewmodels/templates/area/configure directory, where area is the customization type.

2. Define the fields to display in your view.

3. Save the file in your NetBeans IDE project.

Creating a Custom Balances Area View Model

Billing Care uses the balances.js file to define what fields to display in the Billing Care Balances area. The fields defined in the view model are bound in the HTML file used to render the custom view or page. See "About View Models" for more information about Billing Care view models.

A sample balances.js file is provided in the SDK_home/samples/BalancesCustomization/web/custom/viewmodels directory. Use this sample create a custom view model.

To create a custom view model for the Billing Care Home tab:

1. Create a balances.js file in the myproject/web/custom/js/viewmodels/BalancesCustomization directory, where myproject is the folder containing your NetBeans IDE project.

2. Define the custom fields in this file, as required.

3. Save the file in your NetBeans IDE project.

Configuring the Custom Balances Area in the Registry

After creating your custom view and view model, create a custom module entry in the customRegistry.js file to use when displaying the Balances area on the Billing Care account home page. Billing Care uses the custom view and view model instead of the default entries when rendering the Balances area.

A sample customRegistry.js file is provided in the SDK_home/samples/BalancesCustomization/web/custom directory, where SDK_home is the Billing Care SDK installation directory. Use this sample to create the customRegistry.js file with your custom views.

To add an entry in the customRegistry.js file:

1. Create a customRegistry.js file in myproject/web/custom by copying the reference registry file.

2. Define the custom view and view model in the file. For example:

   var CustomRegistry = {
      balances: {
         view: 'text!../custom/templates/customView.html',
         viewmodel: 'custom/viewmodels/CustomViewModel.js'
      },
   };

3. Save the file in your NetBeans IDE project.

Customizing the Data Displayed in the Balances Area

To customize the data that is displayed in the Balances area:

1. Create a custom view model to define the override for the Balances area based on your requirement, such as CustomBalancesViewModel.js, in the myproject/web/custom/viewmodels directory. See "About View Models" for information on creating the view models.

2. Create a custom Balances view model HTML Template. See "Creating Custom View Model HTML Template for the Balances Area".

3. Create a customRegistry.js file configuring Billing Care to use your custom view model. See "Adding customBalancesView and CustomBalancesViewModel to the Registry".

4. Package and deploy your customization to your Billing Care domain using one of the methods described in "Using an Exploded Archive during Customization" or "Packaging and Deploying Customizations".

Creating Custom View Model HTML Template for the Balances Area

Billing Care uses an HTML view file to customize the Balances area in the Home tab. The template file contains the override for the Balances area as defined in the custom view model.

To create a custom view model HTML template for customizing Balances area:

1. Create the customBalancesView.html file in the myproject/web/custom/templates directory.

2. Define the override for the Balances area in the customBalancesView.html file in HTML required for rendering in this file.

3. Save the file in your NetBeans IDE project.

Adding customBalancesView and CustomBalancesViewModel to the Registry

Create a custom entry in your customRegistry.js file. Billing Care uses the custom view model instead of the default entry and renders the Balances section in the Home tab. See "About the Registry File" for more information.

To configure custom view model to customize the Balances area in the registry:

1. Create a customRegistry.js file in myproject/web/custom/ directory.

2. Define the custom view model in this file:

   var CustomRegistry = { 
     balances: { 
      view: 'text!../custom/templates/customBalancesView.html', // This is the custom 
   view which would replace the OOTB balances section 
      viewmodel: 'custom/viewmodels/CustomBalancesViewModel.js' // This is the custom 
   view model which handles rendering of custom view replacing the OOTB balances 
   section 
     }, 
   };

3. Save the file in your NetBeans IDE project.