Displaying Success Toast Messages in Billing Care

15 Displaying Success Toast Messages in Billing Care

Learn how to customize Oracle Communications Billing Care to display a toast message when a user submits a payment or adjustment successfully.

Topics in this document:

About Displaying Success Toast Messages

Billing Care displays error messages when an adjustment or payment transaction fails. If there is no message and control moves to the next screen, it implicitly means that the transaction was successful.

To have Billing Care explicitly display success messages for these transactions, customize Billing Care to display a Success toast message after each successful adjustment or payment. Success toast messages appear at the top of the page and then disappear after a few seconds.

Figure 15-1 shows a sample toast message for a successful adjustment.

Figure 15-1 Sample Success Toast Message

Description of "Figure 15-1 Sample Success Toast Message"

Adding Success Toast Messages to Billing Care Screens

To add Success toast messages to your Billing Care payment and adjustment screens:

Create a custom view HTML file for rendering the Success toast message. See "Creating a Success Toast Message View".
Create a custom view model for each payment and adjustment screen in which to display the Success toast message. See "Creating a Custom View Model for Your Payment and Adjustment Screens".
Create a custom view model for the Success toast message. See "Creating a Custom View Model for Success Toast Messages".
Override the registry values for your custom view and view models. See "Configuring the Registry for Success Toast Messages".
Update the path to the green check mark graphic in the overrides.css file. See "Specifying the Path to Check Mark Graphic".
Package and deploy your Billing Care SDK. See "Packaging and Deploying Customizations".

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

Creating a Success Toast Message View

Create an HTML view file for rendering the Success toast message on Billing Care screens. For more information about views, see "About Views".

A sample toastMessagesView.html file is provided in the SDK_home/samples/CustomToastMessages/web/custom/templates/toastMessages directory. Use this sample to create your own custom HTML file.

To create a view for rendering the Success toast message:

Create a toastMessagesView.html file in your myproject/web/custom/templates/toastMessages/ directory.

In the file, specify the type of message to display on the Billing Care screen. To do so, use the oj-messages component and set its display attribute to notification. For example:

<divid="successMsg" style="display:none;">
   <oj-messages id="oj-messages-id" messages="[[messagesDataprovider]]" display="notification"
       position='{"my":{"vertical" :"top", "horizontal": "center"},                  
       "at": {"vertical": "top", "horizontal": "center"}}'>    

   </oj-messages>
</div>

For more information about the oj-messages component, see "Messages" in OJET Cookbook Forms.

Save the file in your NetBeans IDE project.

Creating a Custom View Model for Success Toast Messages

Create a view model that specifies the text to display in the Success toast message as well as how long Billing Care waits before closing the message.

A sample toastMessagesViewModel.js file is provided in the SDK_home/samples/CustomToastMessages/web/custom/js/viewmodels/toastMessages directory. The sample view model file specifies to do the following:

Display the text "message Successful" in the Success toast message, where message is the Billing Care screen-dependent text defined in the payment or adjustment view model (see "Creating a Custom View Model for Your Payment and Adjustment Screens").
Automatically close the Success toast message after 6000 milliseconds (6 seconds).

To create a custom view model for the Success toast message:

Create the toastMessagesViewModel.js file in your myproject/web/custom/js/viewmodels/toastMessages directory, where myproject is the folder containing your NetBeans IDE project.

In the file's successMessageData function, specify the text to display and how long to wait before closing the message:

this.successMessageData=function(){
   return [{
      summary: message + " Successful",
      autoTimeout: parseInt(6000)                        
   }]; 
}.bind(this);

Save the file in your NetBeans IDE project.

Creating a Custom View Model for Your Payment and Adjustment Screens

To customize a Billing Care adjustment or payment screen to display a Success toast message, create a custom view model that contains overrides for the default display.

The Billing Care SDK includes sample custom view models for the payment and adjustment screens listed in Table 15-1. The sample files are located in SDK_home/samples/CustomToastMessages/web/custom/js/viewmodels/path, where path is the view model directory and file name in Table 15-1. The sample files specify the screen-specific text to include in the toast message, such as Adjustment, Payment, or Suspense Payment.

Table 15-1 Payment and Adjustment Screens that Support Success Toast Messages

Billing Care Screen	View Model Directory and File Name
Account Adjustment screen See "Making Currency Adjustment" in Billing Care Online Help.	accountAdjustment/CustomAccountAdjustmentViewModel.js
Allocate Adjustment screen with Advanced View See "Allocating Currency Adjustments" in Billing Care Online Help.	allocateAdjustment/CustomAllocateAdjustmentAdvancedViewModel.js
Allocate Adjustment screen with Simple View See "Allocating Currency Adjustments" in Billing Care Online Help.	allocateAdjustment/CustomAllocateAdjustmentViewModel.js
Bill Adjustment screen See "Adjusting a Bill" in Billing Care Online Help.	allocateBillAdjustment/CustomAllocateBillAdjustmentViewModel.js
Allocate Payment screen with Advanced View See "Allocating a Payment" in Billing Care Online Help.	allocatePayment/CustomAllocatePaymentAdvancedViewModel.js
Allocate Payment screen with Simple View See "Allocating a Payment" in Billing Care Online Help.	allocatePayment/CustomAllocatePaymentViewModel.js
Make a Payment screen See "Making a Payment" in Billing Care Online Help.	allocatePayment/CustomMakePaymentViewModel.js
Bill Adjustment screen See "Adjusting a Bill" in Billing Care Online Help.	billAdjustment/CustomBillAdjustmentViewModel.js
Event Adjustment screen See "Adjusting an Event" in Billing Care Online Help.	eventAdjustment/CustomEventAdjustmentViewModel.js
Item Adjustment screen See "Adjusting an Item" in Billing Care Online Help.	itemAdjustment/CustomItemAdjustmentViewModel.js
Make a Payment screen See "Making a Payment" in Billing Care Online Help.	makePayment/CustomMakePaymentViewModel.js
Make a Suspense Payment screen See "Working with Suspended Payments" in Billing Care Online Help.	makePaymentSuspense/CustomMakePaymentSuspenseOverlayViewModel.js
Noncurrency Adjustment screen See "Making a Noncurrency Adjustment" in Billing Care Online Help.	nonCurrencyAdjustment/CustomNonCurrencyAdjustmentViewModel.js

To create a custom view model for a Billing Care payment or adjustment screen:

Create a custom view model file (myproject/web/custom/js/viewmodels/path directory, where path is the view model directory and file name in Table 15-1).

Set message to the screen-specific text you want displayed in the Success toast message. For example:

functionCustomEventAdjustmentViewModel() {                
   EventAdjustmentViewModel.apply(this, arguments);
   var self = this;
   self.msg = null;
   
   // This is to enable rendering a toast message on successful 'event adjustment' action
   self.showToastMessages = function (data) {  
      var message = "Adjustment";    
      // example for calling custom methods to render the success toast message
      self.msg = new ToastMessageVM(message);                    
      self.msg.loadMessage();
   };
}

Save the file in your NetBeans IDE project.

Configuring the Registry for Success Toast Messages

To configure Billing Care to use your custom view and view models when rendering the payment and adjustment screens:

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

Note:

A sample customRegistry.js file is provided in the SDK_home/samples/CustomToastMessages/web/custom directory.

Specify to use your custom view and view models for the payment and adjustment screens.

The following shows sample entries in the customRegistry.js file for overriding the toast message view, the toast message view model, all adjustment view models, and all payment view models:

varCustomRegistry = { 
   
   toastMessages: {        
      view: '../custom/templates/toastMessages/toastMessagesView.html',        
      viewmodel: '../custom/js/viewmodels/toastMessages/ToastMessagesViewModel'    
   },    
   makePayment: {        
      viewmodel: '../custom/js/viewmodels/makePayment/CustomMakePaymentViewModel'    
   },    
   allocatePayment: {        
      simpleviewmodel: '../custom/js/viewmodels/allocatePayment/CustomAllocatePaymentViewModel',        
      advancedviewmodel: '../custom/js/viewmodels/allocatePayment/CustomAllocatePaymentAdvancedViewModel'    
   },         
   makePaymentSuspense: {        
      overlayviewmodel: '../custom/js/viewmodels/makePaymentSuspense/CustomMakePaymentSuspenseOverlayViewModel'    
   },        
   itemAdjustment: {        
      viewmodel: '../custom/js/viewmodels/itemAdjustment/CustomItemAdjustmentViewModel'    
   },        
   eventAdjustment: {        
      viewmodel: '../custom/js/viewmodels/eventAdjustment/CustomEventAdjustmentViewModel'    
   },        
   accountAdjustment: {        
      viewmodel: '../custom/js/viewmodels/accountAdjustment/CustomAccountAdjustmentViewModel'    
   },        
   billAdjustment: {        
      viewmodel: '../custom/js/viewmodels/billAdjustment/CustomBillAdjustmentViewModel'    
   },        
   allocateBillAdjustment: {        
      viewmodel: '../custom/js/viewmodels/allocateBillAdjustment/CustomAllocateBillAdjustmentViewModel'    
   },        
   allocateAdjustment: {        
      simpleviewmodel: '../custom/js/viewmodels/allocateAdjustment/CustomAllocateAdjustmentViewModel',        
      advancedviewmodel :'../custom/js/viewmodels/allocateAdjustment/CustomAllocateAdjustmentAdvancedViewModel'    
   },        
   nonCurrencyAdjustment: {        
      viewmodel: '../custom/js/viewmodels/nonCurrencyAdjustment/CustomNonCurrencyAdjustmentViewModel'    
   }
};

Save the customRegistry.js file in your NetBeans IDE project.

Specifying the Path to Check Mark Graphic

The Billing Care SDK includes a sample green check mark graphic that you can include in your toast messages. The sample graphic is located in the SDK_home/samples/CustomToastMessages/web/custom/resources/images directory.

You can include this graphic in your toast messages or create your own graphic. You can also change the colors, font size, and border used in the toast message.

To specify the path to the check mark graphic:

Copy the contents from the sample overrides.css file to your myproject/web/custom/css/overrides.css file.

In the file, update the background-image URL to the relative path of your graphic:

.oj-messages-notification .oj-message-header {
    background-image: url(../resources/images/green-check.png);
    background-color: #d7efdf;
    font-size: large;
    height: 40px;
    background-repeat: no-repeat;
    background-position: left;

(Optional) Make any other customizations to the toast message.
Save and close the file.