This chapter describes how to customize the Bills Graph and Balances sections in the Oracle Communications Billing Care Home tab.
The Bills Graph and Balance sections in the Home tab display the graphic overview of the account or the bill unit information and balances respectively.
You can customize the Bills Graph and Balances sections based on your requirements by using the Billing Care SDK. For example, you can override the complete Bills Graph and Balances sections with your custom Bills Graph and Balances sections.
For more information, see the following:
This section provides a high-level overview of the process on how to customize the Bills Graph section in the Home tab.
To customize the Bills Graph section:
Create a custom view model to define the override for the default Home tab. See "Creating Custom Home Tab View Model" for more information.
Create a custom view model to define the override for the Bills Graph section based on your requirement; for example, CenterViewModel.js, in the myproject/web/custom/viewmodels directory, where myproject is the folder containing your NetBeans IDE project. See "About View Models" for more information on creating the view models.
Create a custom view model HTML template for overriding the Bills Graph section. See "Creating Custom View Model HTML Template for Customizing Bills Graph".
Create a customRegistry.js file configuring Billing Care to use the custom view models created in step 1 and 2. See "Configuring Custom View Models for Customizing Bills Graph in the Registry" for more information.
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".
Billing Care uses the view model to define the display of the Home tab. You must create the custom view model, CustomHomeTabBillUnitsViewModel, containing overrides for the default Home tab. See "About View Models" for more information about Billing Care view models.
To create a custom home tab view model:
Create the CustomHomeTabBillUnitsViewModel.js file in the myproject/web/custom/viewmodels/homeTab directory.
Open the CustomHomeTabBillUnitsViewModel.js file using a text editor and add the code as shown in Example 37-1.
Example 37-1 Sample code to create custom Home tab
define([
'jquery',
'underscore',
'knockout',
'knockout-mapping',
Registry.base.viewmodel,
'viewmodels/hometab/HomeTabBillUnitsViewModel'
],
function ($, _, ko, komapping, BaseViewModel, HomeTabBillUnitsViewModel)
{
function CustomHomeTabBillUnitsViewModel() {
HomeTabBillUnitsViewModel.apply(this, arguments);
var self = this;
/* This function overrides OOTB renderGraph function to replace the
Bills graph and balances
* section from the desired custom view.
*/
self.renderGraph = function () {
/* This is the function which renders the custom View model (
referred to CenterSectionViewModel in the CustomRegistry)
* replacing the bills graph section.
*/
self.renderCenterSection();
/* This is the function which renders the custom View ( referred
to customView in the CustomRegistry balances entry)
* replacing the OOTB balances section.
*/
self.renderBalances();
};
self.renderCenterSection = function(){
// The centerSection is the CustomRegistry entry which refers to the
Custom section replacing OOTB Bills Graph Section.
require([CustomRegistry.centerSection.viewmodel,
CustomRegistry.centerSection.view],
function (CurrentViewModel, page) {
var template = _.template(page);
// HTML id where the Bills and Graph is attach to DOM is
"chartContent"
// The custom view needs to be attached to same place for
replacing OOTb Bills Graph section
var mainDiv = document.getElementById("chartContent");
$(mainDiv).empty();
var viewElem = $(mainDiv).get(0);
ko.cleanNode(viewElem);
$(mainDiv).append(template);
var currentVM = new CurrentViewModel();
// This initialize method will contain basic steps to render
the CustomViewModel
currentVM.initialize();
ko.applyBindings(currentVM, viewElem);
});
};
}
CustomHomeTabBillUnitsViewModel.prototype = new
HomeTabBillUnitsViewModel();
return CustomHomeTabBillUnitsViewModel;
}
);
Save the file in your NetBeans IDE project.
Billing Care uses an HTML view file to customize the Bills Graph section in the Home tab. The template file contains the override for the Bills Graph section as defined in the custom view model specified in step 2 in "Customizing Bills Graph Section".
To create a custom view model HTML template for customizing the Bills Graph section:
Create the centerView.html file in myproject/web/custom/templates directory.
Define the override for the center section of the Home tab in the centerView.html file in HTML required for rendering in this file.
Save the file in your NetBeans IDE project.
Create custom entries in your customRegistry.js file. Billing Care uses the custom view models instead of the default entries and renders the custom Bills Graph section in the Home tab. See "About the Registry File" for more information.
To configure the custom view model entries to customize the Bills Graph section in the registry:
Create a customRegistry.js file in myproject/web/custom/ directory.
Define the custom view models in this file. See Example 37-2.
Example 37-2 Sample registry entries for customizing the Bills Graph section
var CustomRegistry = {
homeTabBillUnits: {
viewmodel: 'custom/viewmodels/homeTab/CustomHomeTabBillUnitsViewModel.js' //
CustomViewModel which will handle replacing of the OOTB Hometab bills graph
with custom view
},
centerSection : {
view: 'text!../custom/templates/centerView.html', // This is the custom
view which would replace the OOTB bills graph section
viewmodel: 'custom/viewmodels/CenterViewModel.js' // This is the custom
view model which handles rendering of custom view replacing the OOTB bills
graph section
}
};
Save the file in your NetBeans IDE project.
This section provides a high-level overview of the process on how to customize the Balances section in the Home tab.
To customize the Balances section:
Create a custom view model to define the override for the Balances section based on your requirement; for example, CustomBalancesViewModel.js, in the myproject/web/custom/viewmodels directory. See "About View Models" for information on creating the view models.
Create a custom Balances view model HTML Template. See "Creating Custom View Model HTML Template for Customizing Balances Section".
Create a customRegistry.js file configuring Billing Care to use the custom view model created in step 1. See "Configuring Custom View Model for Customizing Balances Section in the Registry" for more information.
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".
Billing Care uses an HTML view file to customize the Balances section in the Home tab. The template file contains the override for the Balances section as defined in the custom view model specified in step 1 in "Customizing Balances Section".
To create a custom view model HTML template for customizing Balances section:
Create the customBalancesView.html file in myproject/web/custom/templates directory.
Define the override for the Balances section in the customBalancesView.html file in HTML required for rendering in this file.
Save the file in your NetBeans IDE project.
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 section in the registry:
Create a customRegistry.js file in myproject/web/custom/ directory.
Define the custom view model in this file. See Example 37-3.
Example 37-3 Sample registry entry for customizing the Balances section
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
},
};
Save the file in your NetBeans IDE project.