Opening Custom Views From Landing Page

26 Opening Custom Views From Landing Page

Learn how to customize Oracle Communications Billing Care to open custom views in full screen mode or dialog boxes from the landing page.

Topics in this document:

About Customizing the Landing Page

Billing Care displays default views and pages in full screen mode. You can customize Billing Care to open custom views and pages from the landing page in full screen mode by using the Billing Care SDK and routers. You can also open a custom dialog box from the landing page by using the Billing Care SDK.

Customizing the Landing Page

To add custom buttons to the landing page for opening a custom view or dialog box, you must customize the landing page.

To customize the landing page:

Create a custom landing page view model for extending the default landing page. See "Creating a Custom Landing Page View Model".
Create a custom landing page view model HTML template for displaying custom buttons on the landing page. See "Creating a Custom Landing Page View Model HTML Template".

Creating a Custom Landing Page View Model

Billing Care uses a landing page view model to define the buttons displayed in the landing page. The buttons are bound in the HTML file used to render the landing page. To add custom buttons to the landing page, create a custom landing page view model.

A sample LandingPageExtensionViewModel.js file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom/js/viewmodels/home directory. This sample defines the custom buttons and methods to open custom views or pages (in full screen mode) and dialog boxes from the landing page. Use this sample to extend the landing page view model for defining the custom views, pages, or dialog boxes required by your service.

To create a custom landing page view model:

Create a LandingPageExtensionViewModel.js file in the myproject/web/custom/js/viewmodels/home directory, where myproject is the folder containing your NetBeans IDE project.
Define the custom buttons, as required.
Save the file in your NetBeans IDE project.

Creating a Custom Landing Page View Model HTML Template

Billing Care uses an HTML view file to render the landing page. To display your custom buttons for opening custom views, pages, or dialog boxes, you create a custom landing page view model HTML template.

A sample LandingPageExtensionView.html file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom/templates/home directory. This sample defines how to render the custom buttons in the landing page. Use this sample to create a custom landing page HTML template for opening the custom views or dialog boxes from the landing page.

To create a custom landing page view model HTML template:

Create a LandingPageExtensionView.html file in the myproject/web/custom/js/templates/home directory.
Define the custom buttons in HTML required for rendering in this file.
Save the file in your NetBeans IDE project.

Opening Custom Views in Full Screen Mode

You can add custom views or pages and directly open them from the landing page in full screen mode.

To open custom views in full screen mode:

Customize the landing page, if you have not done so already. See "Customizing the Landing Page".
Create a custom view model to define your custom view or page. See "Creating a Custom Full Page View Model".
Create a custom view model HTML template to render your custom view or page in the full screen mode. See "Creating a Custom Full Page View Model HTML Template".
Create a custom router view model to call the custom router helper when users click the custom button that you created. See "Creating a Custom Router View Model".
Create a custom router helper to add a router-specific functions that display the custom view in full screen mode when users click the custom button. See "Creating a Custom Router Helper".
Create a customRegistry.js file to configure Billing Care to use the custom view models that you created. See "Configuring the Custom Full Page 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".

Creating a Custom Full Page View Model

Billing Care uses the view model to define the fields to capture in your custom view or page. The fields defined in the view model are bound in the HTML file used to render the custom view or page. You must create a custom view model to define your custom view or page.

A sample customFullPageViewModel.js file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom/js/viewmodels/customFullPage directory. Use this sample to extend the default view model for defining the custom view or page required by your service.

To create a custom full page view model:

Create a customFullPageViewModel.js file in the myproject/web/custom/js/viewmodels/customFullPage directory.
Define the custom fields in this file as required.
Save the file in your NetBeans IDE project.

Creating a Custom Full Page View Model HTML Template

Billing Care uses an HTML view file to render your custom view or page. You must create a custom full page view model HTML template to display the custom view or page in the full screen mode. The template file contains the custom fields as defined in the custom full page view model created in "Creating a Custom Full Page View Model".

A sample customFullPageView.html file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom/templates/customFullPage directory. Use this sample to create a custom full page HTML template for rendering the custom views or pages you want to view in the full screen mode.

To create a custom full page view model HTML template:

Create a customFullPageView.html file in the myproject/web/custom/js/templates/customFullPage directory.
Define the custom fields in HTML required for rendering in this file.
Save the file in your NetBeans IDE project.

Creating a Custom Router View Model

Billing Care uses a router view model to call the route helper, a set of router-specific functions, to complete the routing request. You can define these functions to open the custom view or page in the full screen mode.

You can use the sample customRouterViewModel.js file in the SDK_home/samples/LandingPageCustomizations/web/custom/js/viewmodels/router directory to create your router view model.

To create a custom router view model:

Create a customRouterViewModel.js file in the myproject/web/custom/js/viewmodels/router directory.
Define the functions for opening the custom view or page in the full screen mode as required.
Save the file in your NetBeans IDE project.

Creating a Custom Router Helper

You must create a custom router helper to view your custom views or pages in the full screen mode. You can use the sample customRouterHelper.js file in the SDK_home/samples/LandingPageCustomizations/web/custom/js/viewmodels/router directory to create your router helper.

To create a custom router helper:

Create a customRouterHelper.js file in the myproject/web/custom/js/viewmodels/router directory.
Define the functions for opening the custom view or page in the full screen mode as required.
Save the file in your NetBeans IDE project.

Configuring the Custom Full Page View Model in the Registry

After creating the required custom view model, create a custom module entry in the customRegistry.js file to use when opening the custom views or pages. Billing Care uses the custom view model instead of the default entry when rendering the specific screen.

A sample customRegistry.js file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom directory. Use this sample to create the customRegistry.js file containing your custom view model.

To create a custom view model entry in the registry:

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

Define the custom view models in the file. For example:

var CustomRegistry = {
   landingPageView: {
      viewExtension: 'text!custom/../../custom/templates/home/landingPageExtensionView.html',
      viewmodel: '../custom/js/viewmodels/home/LandingPageExtensionViewModel'
   },
   router: {
      viewmodel: '../custom/js/viewmodels/router/customRouterViewModel'
   },
   customFullPage: {
      view: 'text!../custom/templates/customFullPage/customFullPageView.html',
      viewmodel: '../custom/js/viewmodels/customFullPage/customFullPageViewModel'
   }
};

Save the file in your NetBeans IDE project.

Opening a Dialog Box From Landing Page

You can open a custom dialog box by clicking the custom button on the landing page.

To open a custom dialog box from the landing page:

Create a custom landing page view model and custom landing page view model HTML template for displaying custom button on the landing page. See "Customizing the Landing Page".
Create a custom dialog view model to define your custom dialog box. See "Creating a Custom Dialog View Model".
Create a custom dialog view model HTML template for rendering your custom dialog box. See "Creating a Custom Dialog View Model HTML Template".
Create a customRegistry.js file to configure Billing Care to use the custom view model that you created. See "Configuring the Custom Dialog 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".

Creating a Custom Dialog View Model

Billing Care uses the view model to define the fields to capture in your custom dialog box. The fields defined in the view model are bound in the HTML file used to render the custom dialog box. You must create a custom view model to define your custom dialog box.

A sample customDialogViewModel.js file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom/js/viewmodels/customDialogView directory. Use this sample to extend the default view model for defining the custom dialog box required by your service.

To create a custom dialog view model:

Create a customDialogViewModel.js file in the myproject/web/custom/js/viewmodels/customDialogView directory.
Define the custom fields in this file as required.
Save the file in your NetBeans IDE project.

Creating a Custom Dialog View Model HTML Template

Billing Care uses an HTML view file to render your custom dialog box. You must create a custom dialog view model HTML template to display the custom dialog box in full screen mode. The template file contains the custom fields as defined in the custom dialog view model created in "Creating a Custom Dialog View Model".

A sample customDialogView.html file is provided in the SDK_home/samples/LandingPageCustomizations/web/custom/templates/customDialogView directory. Use this sample to create a custom dialog HTML template for rendering the custom dialog box you want to view from the landing page.

To create a custom dialog view model HTML template:

Create a customDialogView.html file in the myproject/web/custom/js/templates/customDialogView directory.
Define the custom fields in HTML required for rendering in this file.
Save the file in your NetBeans IDE project.

Configuring the Custom Dialog View Model in the Registry

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

To create a custom dialog view model entry in the registry:

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

Define the custom view models in the file. For example:

var CustomRegistry = {
   landingPageView: {
      viewExtension: 'text!custom/../../custom/templates/home/landingPageExtensionView.html',
      viewmodel: '../custom/js/viewmodels/home/LandingPageExtensionViewModel'
   },
   customDialogView: {
      view: 'text!../custom/templates/customDialogView/customDialogView.html',
      viewmodel: '../custom/js/viewmodels/customDialogView/customDialogViewModel'
   }
};

Save the file in your NetBeans IDE project.