34 Customizing the Events Dialog Box

Learn how to customize the Events dialog box in Oracle Communications Billing Care. The Events dialog box displays event information for an account or bill. Use this sample to extend the Events dialog box with additional fields and custom APIs according to your business requirements.

Topics in this document:

About Customizing the Events Dialog Box

Billing Care displays event information for an account or bill in the Events dialog box. You can use the Billing Care SDK to customize Billing Care to include additional fields in the response payload for the Get Events REST request. You can also add a custom REST endpoint to fetch an event's flist, introduce concealable columns like Account Number or Event Details, and apply different styling options to generic columns like Start date and End date.

You can use the SDK to:
  • Add new columns (for example, Account Number or Event Details) to the Events table
  • Add a View link to display event flist details in a dialog box
  • Add a Copy button in the dialog box to allow users to copy the entire flist
  • Add a new template (installmentDebit) to configure views specifically for events of type /event/billing/installment/debit
  • Apply different styling options for the generic events template's Start date and End date columns by overriding the template
  • Implement concealable or conditionally visible columns
  • Apply custom styling to event columns
  • Extend or override business logic using view models
  • Fetch event-specific data using custom REST endpoints

The Billing Care SDK includes a sample that demonstrates how to add custom columns, provide extended event information, and display event details using a custom dialog box.

For more information about viewing the Events dialog box, see "Working with Events" in Billing Care Online Help.

About the Sample Files

The SDK sample for customizing the Events dialog box is located in SDK_home/samples/EventsDialog, where SDK_home is the SDK installation directory.

The customization files provided in this sample are:

  • EventsDialog/web/custom/customRegistry.js: Adds an entry to override the default view model JavaScript files.
  • EventsDialog/web/js/viewmodels/CustomEventsViewModel.js: Contains the logic for the different UI customizations.
  • EventsDialog/src/java/custom/CustomModule.properties: Contains the new mapping for the EventModule.
  • Custom modules, all located in the EventsDialog/src/java/com/oracle/communications/brm/cc directory:
    • CustomEventResource.java: A new REST service for getting event object details.
    • modules/CustomEventModule.java: Implements the custom event module mapping.
    • modules/pcm/workers/CustomEventWorker.java: Carries out the custom logic for the APIs.

Customizing the Events Dialog Box

To extend the Events dialog box with additional fields or links that call a custom endpoint, you must customize the underlying view models, templates, and back-end logic.

To customize the Events dialog box:
  1. Create a custom web project in your NetBeans IDE (for example, EventsDialogCustomizations).
  2. (Optional) Create the custom back-end files for extending the API payload. See "Creating Custom Event Back-End Files".
  3. (Optional) Create a custom events view model for rendering the new data. See "Creating a Custom Event View Model".
  4. Create a custom events HTML template for displaying custom columns. See "Creating Custom Event View Model HTML Templates".
  5. Create a customRegistry.js file to configure Billing Care to use the custom view models you created. See "Configuring the Custom Event View Model in the Registry".
  6. Create a MANIFEST.MF file in the src/conf folder using the instructions in "Creating a Manifest for your Shared Library".
  7. Use the instructions in "Packaging and Deploying Customizations" to create a production deployment plan and a .war file containing your customizations.

Creating Custom Event Back-End Files

Billing Care uses the REST API to retrieve event details to display in the Events dialog box. To fetch an extended event flist, you must create custom back-end resource and worker files to process the custom logic.

Sample back-end files are provided in the SDK_home/samples/EventsDialog/src directory. This sample defines the new mappings for the event module and the custom logic required to fetch the raw payload. Use this sample to extend the API for the custom data required by your service.

To create custom event back-end files:

  1. To customize the Events dialog box to fetch an event's flist and populate a custom Account Number field, copy CustomModule.properties, CustomEventModule.java, CustomEventResource.java, and CustomEventWorker.java from the sample directory to your custom project's src directory according to the standard directory structure.

  2. Define the custom logic in CustomEventWorker.java and CustomEventResource.java to fetch and return the event flist data as a JSON response. For example: 

    public class CustomEventResource {
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public Response getCustomEventDetails(...) {
        // Add custom logic to fetch the raw event Flist from the database 
        // and return it as a JSON response to the Billing Care UI.
    }
}

  3. Save the files in your NetBeans IDE project.

Creating a Custom Event View Model

Billing Care uses a view model to define the fields and logic captured in the Events dialog box. The fields defined in the view model are bound in the HTML file used to render the dialog box. To add custom columns or a Copy button, create a custom events view model.

A sample CustomEventsViewModel.js file is provided in the SDK_home/samples/EventsDialog/web/custom/js/viewmodels directory. Use this sample to extend the default view model for defining the custom columns or invoking the custom API required by your service.

To create a custom events view model:

  1. Copy the CustomEventsViewModel.js file from the sample directory to the myproject/web/custom/js/viewmodels directory, where myproject is the folder containing your NetBeans IDE project.

  2. Define the logic for your custom columns and API invocations as required.

  3. Save the file in your NetBeans IDE project.

Creating Custom Event View Model HTML Templates

Billing Care uses an HTML view file to render the Events dialog box. To display your custom columns or apply different styling to the Start Date and End Date fields, you create custom HTML templates.

To create a custom view model HTML template for customizing the Events dialog box:

  1. Create your custom HTML file (for example, installmentDebit.html) in the myproject/web/custom/templates directory.

  2. Define the custom columns, such as Account Number and Event Details, in HTML as required for rendering in this file.

  3. Save the file in your NetBeans IDE project.

Configuring the Custom Event View Model in the Registry

After creating the required custom view model and templates, create a custom module entry in the customRegistry.js file to use when opening the Events dialog box. Billing Care uses the custom view model instead of the default entry when rendering the dialog box.

A sample customRegistry.js file is provided in the SDK_home/samples/EventsDialog/web/custom directory. Use this sample to create the registry file containing your custom overrides.

To create a custom view model entry in the registry:

  1. Create or copy the customRegistry.js file from the sample directory to myproject/web/custom.

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

    var CustomRegistry = {
    events: {
        viewmodel: 'custom/js/viewmodels/events/CustomEventsViewModel.js'
    }
    // Add additional template registration as required for your custom HTML files
};

  3. Save the file in your NetBeans IDE project.