Customizing the Newsfeed Area

35 Customizing the Newsfeed Area

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

Topics in this document:

About Customizing the Newsfeed Area

The Newsfeed area of the Billing Care account home page shows a timeline of account events, such as recurring charges, bills issued, and overdue notifications. Each entry displays details such as the date, event type, and amount, along with additional descriptive fields. The Newsfeed area supports filtering and sorting by bill unit, category, or event name.

You can customize the Newsfeed area in the following ways:

Add columns to display custom information.
Introduce new custom Newsfeed filters based on Newsfeed type.
Configure handling for existing or custom Newsfeed events.

The Billing Care SDK includes sample Newsfeed area customizations. Use these samples when developing your own customizations.

About the Sample Files

The SDK sample for customizing the Newsfeed is located in SDK_home/samples/Newsfeed, where SDK_home is the SDK installation directory.

The customization files provided in this sample are:

Newsfeed/web/custom/customRegistry.js: Adds an entry to override the default view model JavaScript files.
Newsfeed/web/js/viewmodels/CustomNewsfeedViewModel.js: Contains the logic for the UI customizations, including adding a new Bill column and handling the custom newsfeed type 127.
Newsfeed/src/java/custom/CustomModule.properties: Contains the new mapping for the Newsfeed module.
Newsfeed/src/java/custom/configurations/CustomConfigurations.xml: Defines the extra newsfeed type Custom Bucket and maps it to the corresponding view model key.
Custom modules, all located in the Newsfeed/src/java/com/oracle/communications/brm/cc directory:
- modules/CustomNewsfeedModule.java: Modifies the API response to include the data required for the new Bill column.
- modules/pcm/workers/CustomNewsfeedWorker.java: Carries out the custom data retrieval logic for the additional field.

Customizing the Newsfeed Area

To extend the Newsfeed area with additional columns (such as a Bill column) or new filter categories, you must customize the underlying view models, HTML templates, configuration files, and back-end logic.

To customize the Newsfeed area:

Create a custom web project in your NetBeans IDE.
(Optional) Create the custom back-end files to define the logic for the additional fields. See "Creating Custom Newsfeed Back-End Files (Optional)".
(Optional) Create a custom view model to render the new data and handle custom UI logic. See "Creating a Custom Newsfeed View Model".
Configure custom newsfeed types and filters in the configuration file. See "Introducing Custom Newsfeed Types and Filters".
Create a customRegistry.js file to configure Billing Care to use your custom view model. See "Configuring the Custom Newsfeed View Model in the Registry".
Create a MANIFEST.MF file in the src/conf folder using the instructions in "Creating a Manifest for your Shared Library".
Use the instructions in "Packaging and Deploying Customizations" to create a production deployment plan and a .war file containing your customizations.

Creating Custom Newsfeed Back-End Files (Optional)

Billing Care uses Java back-end files to define logic for API responses. Perform this step only if you want to add a link or field that calls a custom API. The sample SDK files create an additional Bill field and add a custom newsfeed type (ID 127) in the API responses, but you can customize the files to meet your business needs.

To create custom newsfeed back-end files:

Copy CustomNewsfeedModule.java and CustomNewsfeedWorker.java from the SDK_home/samples/Newsfeed/src directory to your custom project's back-end src directory. The CustomNewsfeedModule.java file is located in the Newsfeed/src/java/com/oracle/communications/brm/cc/modules directory and the worker file is in the Newsfeed/src/java/com/oracle/communications/brm/cc/modules/pcm/workers directory.
Configure the custom logic in these files to define the additional Bill field and handle the custom newsfeed type (ID 127) logic.
Save the files in your NetBeans IDE project.

Creating a Custom Newsfeed View Model

Billing Care uses a view model to define how to display the table and fields in the Newsfeed area. The fields defined in the view model are bound in the default HTML file used to render the table. To add custom columns, such as a Bill column, or to handle custom newsfeed types, create a custom newsfeed view model.

A sample CustomNewsfeedViewModel.js file is provided in the SDK_home/samples/Newsfeed/web/custom/viewmodels directory. Use this sample to extend the default view model for defining your custom columns or calling the logic required by your service. In this sample, the data for the new column is populated by the populateEventSpecificDetails function, which is also responsible for handling custom newsfeed events with type 127.

To create a custom newsfeed view model:

Copy the CustomNewsfeedViewModel.js file from the sample directory to the myproject/web/custom/js/viewmodels/NewsfeedCustomization directory in your NetBeans IDE project.
Configure the view model to add the Bill column and ensure the populateEventSpecificDetails function processes the bill field and handles type 127 events.
Save the file in your NetBeans IDE project.

Introducing Custom Newsfeed Types and Filters

You can define custom Newsfeed types and filter categories to support new event types and allow advanced filtering in the Newsfeed area. When a new type is added to the configuration, a corresponding filter category is automatically created in the Newsfeed filter.

To introduce new Newsfeed types and filters:

To enable users to filter by custom Newsfeed events in the UI, you must define the new filter category in the configuration file.

Copy or edit the CustomConfigurations.xml file in your custom project.

Configure your custom Newsfeed type by adding it to the newsfeed.categories key. For example, add the Custom Bucket entry to the JSON string value:

<keyvals>
    <key>newsfeed.categories</key>
    <value>[{"key":"DENY","newsfeedTypes": ""},
        {"key":"Custom Bucket", "newsfeedTypes": "CUSTOM_NEWSFEED"}, 
        {"key":"AR", "newsfeedTypes": "ADJUSTMENT, NCR_ADJUSTMENT, OPEN_DISPUTE, CLOSED_DISPUTE, WRITEOFF, WRITEOFF_REVERSAL, REFUND, COLLECTIONS, LIMIT_CHANGE"},
        {"key":"PAYMENTS","newsfeedTypes": "PAYMENT, PAYMENT_REVERSAL, PAYMENT_METHOD_ASSIGNMENT_CHANGE, PAYINFO"},
        {"key":"CHARGES","newsfeedTypes": "PURCHASE, CANCEL, OFFER_STATUS , CORRECTIVE_BILL, RECURRING_CHARGE, BILL_ISSUED, BILL_ISSUED_MID_CYCLE, ONE_TIME_CHARGE, TRANSITION"},
        {"key":"ACCOUNT","newsfeedTypes": "NAMEINFO, ACCT_STATUS, DEFERRED, SRVC_STATUS,  SRV_TO_DEV, BILLINFO, BILLINFO_CREATED, BILLINFO_DELETED, BALANCE_GROUP_TRANSFER, SHARING_GROUPS"}]</value>
    <desc>Within the newsfeed, sub-categories for various newsfeed categories</desc>
</keyvals>

To link the new type to your UI logic, you must define it in the view model.
1. Open your CustomNewsfeedViewModel.js file.
2. Configure the self.NEWSFEED_TYPES object by adding your custom type key. For example:
```
self.NEWSFEED_TYPES = {
    // ... existing types ...
    CUSTOM_NEWSFEED: 127
};
```
Save your configuration and view model files in your NetBeans IDE project.

Configuring the Custom Newsfeed View Model in the Registry

After creating your custom HTML view and view model, you must register them in the Billing Care registry to ensure your changes are applied to the Newsfeed area.

To configure the custom Newsfeed area in the registry:

Create or edit the customRegistry.js file in the myproject/web/custom directory.

Configure the mapping for your custom Newsfeed area view and view model. For example:

var CustomRegistry = {
    newsfeed: {
        view: 'text!../custom/templates/customNewsfeedView.html',
        viewmodel: 'custom/viewmodels/customNewsfeedViewModel.js'
    }
};

Save the file in your NetBeans IDE project.