This chapter describes how to customize Oracle Communications Billing Care Assets section in the Home tab.
In Billing Care, the Assets section in the Home tab displays the services and related charge offers and discount offers purchased for an account. Each service is displayed in an Asset card. You can view details of the assets of all bill units by clicking Bill Unit (All). You can also click an Asset card's Action menu and select Show Asset Details to view more information about the asset.
You can perform the following in the Assets section by using the Billing Care SDK:
This section provides a high-level overview of the process on how to customize the Home tab in Billing Care to hide individual Bill Unit area and Show Bill Units in case of multiple bill units.
To customize Billing Care to hide bill units in the home tab:
Create custom view model to define the display of the Home tab. See "Creating Custom Home Tab View Model to Hide Bill Units" for more information.
Create a customRegistry.js file configuring Billing Care to use the custom view model created in step 1. See "Configuring the Custom Home Tab View Model 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, CustomHomeTabViewModel, containing overrides for the default Home tab. See "About View Models" for more information about Billing Care view models.
To create custom home tab view model to hide bill units:
Create the customHomeTabViewModel.js file in the myproject/web/custom/js/viewmodels/homeTab directory, where myproject is the folder containing your NetBeans IDE project.
Open the customHomeTabViewModel.js file using a text editor and add the code as shown in Example 36-1.
Example 36-1 Sample code to hide Bill Units in the Home tab
define([
'jquery',
'underscore',
'knockout',
Registry.base.viewmodel,
'viewmodels/hometab/HomeTabViewModel'
],
function ($, _, ko, BaseViewModel, HomeTabViewModel) {
function customHomeTabViewModel() {
HomeTabViewModel.apply(this, arguments);
var self = this;
$(function() {
if(util.checkEmbeddedHtml()){
var myVar = setInterval(function() {
if($('#allBillUnits').is(":visible"))
{
$("#allBillUnits").remove();
clearInterval(myVar);
}
if($('#billUnits_all').is(":visible"))
{
$("#billUnits_all").remove();
clearInterval(myVar);
}
if($('#showHide').is(":visible"))
{
$("#showHide").remove();
clearInterval(myVar);
}
}, 20);
}
});
}
customHomeTabViewModel.prototype = new HomeTabViewModel();
return customHomeTabViewModel;
});
Save the file in your NetBeans IDE project.
Create a custom entry in your customRegistry.js file. Billing Care uses the custom model instead of the default entry and renders Home tab containing your custom fields. See "About the Registry File" for more information.
To configure the custom home tab view model in the registry:
Create a customRegistry.js file in the myproject/web/custom/ directory.
Define the custom view model in this file. See Example 36-2.
Save the file in your NetBeans IDE project.
This section provides a high-level overview of the process on how to customize Billing Care to disable the Actions menu in the Assets section.
To disable Actions menu in the Assets section:
Create custom view model to define the disabling of the Actions menu in the Assets section. See "Creating Custom View Model to Disable Actions Menu" for more information.
Create a customRegistry.js file configuring Billing Care to use the custom view model created in step 1. See "Configuring the Custom Assets Section View Model 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 disabling of the Actions menu in the Assets section. You must create the custom view model, CustomAssetViewModel, containing overrides for the default Actions menu. See "About View Models" for more information about Billing Care view models.
To create custom view model to disable Actions menu:
Create the customAssetViewModel.js file in the myproject/web/custom/js/viewmodels/customerAssets directory.
Open the customAssetViewModel.js file in a text editor and add the code as shown in Example 36-3.
Example 36-3 Sample code to disable Actions menu in the Assets section
define(['ojs/ojcore', 'ojtranslations/nls/ojtranslations',
'ojs/ojvalidation', 'ojs/ojdatetimepicker',
'jquery',
'underscore',
'knockout',
'knockout-mapping',
Registry.base.viewmodel,
'viewmodels/customerAssets/AssetViewModel',
Registry.balances.bindings
],
function (oj, delojt, delojv, delojdatepicker, $, _, ko, komapping,
BaseViewModel, AssetViewModel) {
function customAssetViewModel() {
AssetViewModel.apply(this, arguments);
var self = this;
if(util.checkEmbeddedHtml()){
self.disableActionsMenu(true);
//Override OOTB showOfferDetails method()
self.showOfferDetails = function () {
self.isOfferDetailsVisible(true);
self.disableActionsMenu(true);
var assetsCardArray = [];
if (sessionStorage.getItem("assetsCards") !== null) {
assetsCardArray =
JSON.parse(sessionStorage.getItem("assetsCards"));
}
assetsCardArray.push(self.assetCard);
sessionStorage.setItem("assetsCards",
JSON.stringify(assetsCardArray));
};
}
}
customAssetViewModel.prototype = new AssetViewModel();
return customAssetViewModel;
});
Save the file in your NetBeans IDE project.
Create a custom entry in your customRegistry.js file. Billing Care uses the custom model instead of the default entry and renders the Assets section containing your custom fields. See "About the Registry File" for more information.
To configure the custom Assets section view model in the registry:
Create a customRegistry.js file in myproject/web/custom/ directory.
Define the custom view model in this file. See Example 36-4.
Save the file in your NetBeans IDE project.
To hide the service icon in Assets card:
Copy the SDK_home/BillingCare_SDK/references/Configurations.xml file to the myproject/web/custom/configurations directory, where SDK_home is the directory in which you installed the Billing Care SDK.
Open the copied file using a text editor and remove the serviceTypes.icons key values.
For more information, see "Editing the Billing Care Configuration File".
Save and close the file.
Open the customAssetViewModel.js file using a text editor in the myproject/web/custom/js/viewmodels/customerAssets directory, and add the code as shown in Example 36-5.
Example 36-5 Sample code to hide service icons
define(['ojs/ojcore', 'ojtranslations/nls/ojtranslations',
'ojs/ojvalidation', 'ojs/ojdatetimepicker',
'jquery',
'underscore',
'knockout',
'knockout-mapping',
Registry.base.viewmodel,
'viewmodels/customerAssets/AssetViewModel',
Registry.balances.bindings
],
function (oj, delojt, delojv, delojdatepicker, $, _, ko, komapping,
BaseViewModel, AssetViewModel) {
function customAssetViewModel() {
AssetViewModel.apply(this, arguments);
var self = this;
if(util.checkEmbeddedHtml()){
$(function () {
var myVar = setInterval(function () {
if
($('.customerAssets-workspace-card-header-icon').is(":visible"))
{
$(".customerAssets-workspace-card-header-ic
on").remove();
clearInterval(myVar);
}
}, 20);
var myVar1 = setInterval(function () {
if
($('.custmerAssets-workspace-card-header-fromplan').is(":visible"))
{
$(".custmerAssets-workspace-card-header-fromplan").css({"margin-top": "20px",
"margin-left": "10px"});
clearInterval(myVar1);
}
}, 20);
});
}
}
customAssetViewModel.prototype = new AssetViewModel();
return customAssetViewModel;
});
Save the file in your NetBeans IDE project.
Create a custom entry in your customRegistry.js file. Billing Care uses the custom model instead of the default entry and renders the Assets section containing your custom fields. See "Configuring the Custom Assets Section View Model in the Registry".
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".