38 Opening Custom Views From Landing Page

This chapter provides an overview of how to open custom views (in the full screen mode) or dialog boxes from the landing page.

About Customizing Landing Page

Billing Care displays the default views or pages, such as Account Details and Payment Suspense Details in full screen mode. You can customize Billing Care to open custom views or 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.

For more information, see the following:

Opening Custom Views in Full Screen Mode
Opening a Dialog Box From Landing Page

Customizing the Landing Page

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

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" for more information.
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" for more information.

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 defined in the landing page view model are bound in the HTML file used to render the landing page. You must create a custom landing page view model to capture custom buttons.

A sample landingPageExtensionViewModel.js file is provided in the SDK_home/BillingCare_SDK/samples/LandingPageCustomizations/web/custom/js/viewmodels/home directory where SDK_home is the Billing Care SDK installation 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. You must create a custom landing page view model HTML template to display the custom buttons for opening custom views, pages, or dialog boxes. The template file contains the custom buttons as defined in the custom landing page view model created in "Creating a Custom Landing Page View Model".

A sample landingPageExtensionView.html file is provided in the SDK_home/BillingCare_SDK/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 the full screen mode.

To open custom views in full screen mode:

Create a custom landing page view model and custom landing page view model HTML template for displaying custom buttons on the landing page. See "Customizing the Landing Page" for more information.
Create a custom view model to define your custom view or page. See "Creating a Custom Full Page View Model" for more information.
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" for more information.
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" for more information.
Create a custom router helper to add router-specific functions that display the custom view in full screen mode when users click the custom button. See "Creating a Custom Router Helper" for more information.
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" for more information.
Package and deploy your customizations 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/BillingCare_SDK/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/BillingCare_SDK/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/BillingCare_SDK/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/BillingCare_SDK/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/BillingCare_SDK/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" for more information.
Create a custom dialog view model to define your custom dialog box. See "Creating a Custom Dialog View Model" for more information.
Create a custom dialog view model HTML template for rendering your custom dialog box. See "Creating a Custom Dialog View Model HTML Template" for more information.
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" for more information.
Package and deploy your customizations 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/BillingCare_SDK/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 the 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/BillingCare_SDK/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.