Migrating Customizations to Billing Care 15.2

3 Migrating Customizations to Billing Care 15.2

Learn how to migrate your custom Oracle Communications Billing Care implementation from earlier versions to Billing Care 15.2. This chapter provides clear procedures, guidelines, and references for updating customizations, user interface components, and framework integrations to align with the latest Oracle JavaScript Extension Toolkit (JET) standards and extensibility patterns.

Topics in this document:

About Key UI and Component Updates

Billing Care 15.2 introduces comprehensive updates across the application, implementing new UI standards, extensive Oracle JET adoption, and streamlined configuration flows to modernize the user experience. Billing Care changed in the following ways:

Updated Images: Custom images have been replaced, where possible, with images from the Oracle JET Image Reference.
Validation Framework: All input validation has been migrated to Oracle JET validators exclusively.
Redesigned Views: Purchase flows, registry configurations, and interface patterns have been refactored to utilize OJET components, improving accessibility and maintainability across the application. Purchase flows have been redesigned into an action menu with four options: New Service, Add to Service, Bundle Transition, and Package Transition.
Customer Assets, Collections, and Payments: Collections, payments, and Customer Assets views have been refactored to replace legacy pop-ups and tables with drawer-based layouts and in-card banners. Partial allocations are now grouped by account number or bill unit.
Financial Setup: Financial setup screens have been changed from dialog boxes to full-page layouts. Hierarchy, payment method, and balance group flows have been redesigned, and separate read-only and edit modes are now provided for tax setup.
Code and Framework: Legacy windows, layouts, and rendering mechanisms have been deprecated.
Events Framework: Event and Newsfeed tables have been changed to use Oracle JET table components. Customization is implemented using JavaScript instead of custom XML configurations, providing greater flexibility.
Enhanced CSS Classes and Themes: CSS classes and theming have been updated to align with Redwood standards and Oracle JET styling conventions.

Tasks for Migrating Your Customizations to Billing Care 15.2

To migrate your Billing Care customizations:

Update Images: Replace all project-specific images with Oracle JET library images where possible. See the icons and images from the OJET Image Reference.
Refactor Validation Logic: Remove all jQuery validators and replace them with Oracle JET validators in all forms and data inputs. See "Migrating jQuery Validators to OJET Validators".

Caution:
All jQuery validators must be discontinued in customizations.
Update Dialog Boxes and Overlays: Refactor all dialog boxes to use the Oracle JET dialog pattern with header, body, and footer slots. See "Migrating Overlay Dialog Box Customizations".
Convert Event and Newsfeed Layouts: Refactor custom event and newsfeed tables to use Oracle JET table components by moving old XML layout logic to JavaScript-driven templates. Add or change columns only through these templates, following SDK guidance for extensibility. See "Migrating Your Newsfeed and Events Framework Customizations".
Apply Theming Standards: Remove all Alta theme references and adopt standardized theming by leveraging Oracle JET utility classes whenever possible. See "Migrating Your Custom CSS Classes and Themes".
Update Views and Flow Configurations: Realign registry entries to support modular train-stop configurations for independent purchase and package flows, and update banners, charts, and financial setups to Oracle JET-based implementations. Convert dialog boxes previously rendered in pop-ups (such as Installment, Notification, Deposit, and AR Actions) to use drawer or card layouts accessed via row menus. See "Migrating Your Custom Views".
Test and Validate: Render and test all migrated components for correct behavior and accessibility, confirming that customized flows operate as intended in the new framework and validating against supported browsers. See Compatibility Matrix for information about the supported browsers.

Migrating jQuery Validators to OJET Validators

When refactoring your validation logic, you must migrate from legacy jQuery implementations to equivalent Oracle JET validators. All custom jQuery validation code must be replaced with the corresponding Oracle JET validator syntax.

An example of a legacy jQuery validator implementation is shown below:

var validateResult = $("#emailServiceConfigForm").validate({
    debug: true,
    rules: {
        maxMailboxSize: { number: true },
        maxMessageSize: { number: true },
        maxNumberOfMessages: { digits: true }
    },
    messages: {
        maxMailboxSize: { number: common.INVALID_VALUE },
        maxMessageSize: { number: common.INVALID_VALUE },
        maxNumberOfMessages: { digits: common.INVALID_VALUE }
    },
    errorClass: 'validation-error'
});

The equivalent OJET validation implementation is shown below:

self.decimal1Converter = new ojconverter_nativenumber_1.NumberConverter({
    style: "decimal",
    minimumFractionDigits: 2,
    maximumFractionDigits: 3,
    useGrouping: false
});

Migrating Overlay Dialog Box Customizations

In earlier releases, Billing Care dialog boxes were called using the Oracle JET OverlayContext.open() API and were often rendered in shared containers (for example, #dlgBase). Templates often combined header, body, and footer HTML in a single structure.

In Billing Care 15.2, all dialog boxes use the Oracle JET dialog component and standard pattern. They render inside a #general-ojet-dialog container, use Oracle JET slot conventions for template structure (header, body, footer), and must be opened using OverlayContext.openOJETDialog(). All custom dialog boxes must be updated to use the new Oracle JET dialog API and template structures.

An example of a legacy dialog box migration is shown below:

Before (Legacy):

var options = {
  // legacy dialog options
};
overlayContext.open(options, arActionsOverlayView, ARActionsOverlayVM);
ARActionsOverlayVM.render();
// HTML: <div class="overlayBody"></div>

After (OJET):

overlayContext.openOJETDialog(arActionsOverlayView, ARActionsOverlayVM);
ARActionsOverlayVM.render();
// HTML:
<div slot="header">
  Dialog Header Content
</div>
<div slot="body">
  Dialog Body Content
</div>
<div slot="footer">
  Dialog Footer Content (for example, buttons)
</div>

Note:

Legacy overlay and dialog support has been removed and is not supported. UI issues and lack of compatibility are likely if you do not update the customizations.

Migrating Your Newsfeed and Events Framework Customizations

You must refactor custom event and Newsfeed tables to use Oracle JET table components. Move any old XML layout logic to JavaScript-driven templates. Add or change columns by updating corresponding templates—not by constructing HTML strings or manipulating the DOM. Define layout selection logic for dynamic or extensible event rendering scenarios.

For more details, see "Customizing the Newsfeed Area".

Note:

Use the OJET extensibility model for tables and events. Manual DOM manipulation is not supported.

Migrating Your Custom CSS Classes and Themes

Billing Care 15.2 introduces an optimized CSS framework that relies on Oracle JET utility classes. All Alta theme files have been removed, which reduces the custom CSS footprint by up to 98% and makes styles more generalized and reusable.

To migrate your customizations, you must remove legacy references and adhere to the new CSS coding standards by performing the following steps:

Audit your custom HTML templates to identify inline styles, Alta theme references (for example, alta-panel), and standard Billing Care CSS classes.
Remove all Alta theme references from your custom implementations.
Replace legacy layout and spacing classes with standard Oracle JET utility classes (such as oj-flex, oj-panel, or oj-sm-margin-2x) wherever possible.
If an Oracle JET utility class cannot achieve the desired styling, create a new custom class using this .bc-classname standard.

Note:
Make sure that you do not use standard Billing Care CSS classes. These classes may change between releases and lead to UI inconsistencies.
Extract any remaining inline styles and move them to your custom stylesheet.
Do not use inline CSS. Rename your custom classes to follow the .bc-classname standard and apply them to your HTML elements.

Example: Migrating a Custom Container

In this example, a legacy container uses an Alta class, a standard Billing Care class, and inline styling. During migration, these are replaced with an Oracle JET utility class and a standardized custom .bc-classname.

Before (Legacy):

<div class="alta-panel billing-care-custom-header" style="background-color: #f0f0f0; border-radius: 4px;">
    <span>Account Details</span>
</div>

After (15.2.0.0.0):

<div class="oj-panel bc-custom-header">
    <span>Account Details</span>
</div>
CSS

/* Custom Stylesheet */
.bc-custom-header {
    background-color: #f0f0f0;
    border-radius: 4px;
}

Migrating Your Custom Views

Billing Care 15.2 redesigns key user flows, display components, and UI patterns to use modular, registry-driven Oracle JET configurations. View configurations and Customization Registry entries must be updated to align with these new standards.

To migrate your custom views, perform the following steps:

Audit your legacy custom views to identify pop-ups, non-Oracle JET display components, and consolidated purchase flows.
Refactor HTML and ViewModels to use Oracle JET components. Legacy pop-ups (Installments, Notifications, Deposits, AR Actions) must be replaced with drawer or card-based layouts, such as oj-drawer-popup or oj-dialog, accessed from a row action or menu button. Custom Account Banners, Charts, Newsfeeds, and financial setup screens must also be updated to use Oracle JET-based implementations.

Update your Customization Registry (CustomRegistry.js) to support modular, train-stop configurations. Legacy routing keys must be replaced with new OJET modular flow keys, such as purchaseSelectionFrom, purchaseSelectionTo, and purchaseConfiguration. Replace any legacy registry or routing keys with the new modular Oracle JET keys. Use the following registry entry snippets as examples for configuring a purchase flow:

purchase: {
    wizardView: 'text!templates/purchase/purchaseView.html',
    viewmodel: 'viewmodels/purchase/PurchaseViewModel',
    purchaseObject: 'viewmodels/purchase/PurchaseCatalogue'
},
purchaseSelection: {
    packageview: 'text!templates/purchase/packageSelectionView.html',
    bundleview: 'text!templates/purchase/bundleSelectionView.html',
    packageviewmodel: 'viewmodels/purchase/PackageSelectionViewModel',
    bundleviewmodel: 'viewmodels/purchase/BundleSelectionViewModel'
},
purchaseSelectionFrom: {
    bundletransitionviewmodel: 'viewmodels/purchase/BundleTransitionViewModel',
    bundletransitionview: 'text!templates/purchase/bundleTransitionView.html',
    packagetransitionviewmodel: 'viewmodels/purchase/PackageTransitionViewModel',
    packagetransitionview: 'text!templates/purchase/packageTransitionView.html'
},
purchaseSelectionTo: {
    bundletransitionview: {
        viewmodel: 'viewmodels/purchase/BundleTransitionToViewModel',
        view: 'text!templates/purchase/bundleTransitionToView.html'
    },
    packagetransitionview: {
        viewmodel: 'viewmodels/purchase/PackageTransitionToViewModel',
        view: 'text!templates/purchase/packageTransitionToView.html'
    }
},

Test the updated views to verify accessibility compliance, usability, and compatibility across supported browsers and devices.