Creating a Setup to consume an HTML5 UI Component in a Client application

This chapter explains how to create a setup to consume an HTML5 UI component in a Client application. So the scenario is, you have:

  1. The Infinity Process Platform Portal deployed to one web container.
  2. Client application is deployed to second web container.

The goal is, client application needs to embed various HTML5 UI components provided by the Infinity Process Platform. The following sections explain the setup required to achieve embedding HTML5 UI components:

Cross-Origin Resource Sharing (CORS) Setup

To embed the IPP HTML5 UI Components, CORS should be enabled on the IPP instance.

Enabling Cross-Origin Resource Sharing for Tomcat

The supported Tomcat version is 7.0.41 or later. You need to add the following to the IPP web.xml.

<filter>
	<filter-name>CorsFilter</filter-name>
	<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
	<init-param>
	<param-name>cors.allowed.headers</param-name>
	<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Accept-Language</param-value>
	</init-param>
	</filter>
	<filter-mapping>
	<filter-name>CorsFilter</filter-name>
	<url-pattern>/*</url-pattern>
	</filter-mapping>

Configuring SSO

You need to configure hosted IPP and Client Application with SSO. For more information, please refer the chapter Setting up WebSSO Authentication with the IPP SSO SAML2 Artifact.

Bootstrapping IPP Components

Prerequisite: Client Application is assumed to be written using FIS Responsive Framework (Formally HTML5 Framework).

To use the IPP components (directives, etc...) on a client landing page, it is first required to bootstrap the IPP components. Perform the following steps:

  1. Inject Dependencies
  2. Environment Configuration (sdEnvConfig)
  3. Event Interceptor Definition

Inject Dependencies

Following is the sample script/CSS imports on Client:

<!-- IPP Styles -->
<link rel="stylesheet" href="ipp/9.2/styles/html5-common-resources.css" />
<link rel="stylesheet" href="ipp/9.2/styles/html5-views-common-resources.css" />
<link rel="stylesheet" href="ipp/9.2/styles/html5-process-portal-resources.css" />

<!-- HTML5 FW -->
<script src="./shell/2.2.0/libs/sg-fmk-core-deps.js"></script>
<script src="./shell/2.2.0/libs/sg-mega-menu-deps.js"></script>
<script src="./shell/2.2.0/libs/sg-fmk-core.js"></script>
<script src="./shell/2.2.0/libs/sg-mega-menu.js"></script>

<!-- My App Scripts -->
<script src="./client/scripts/client-module.js"></script>

<!-- IPP Scripts -->
<script src="ipp/9.2/js/portalApplication.js"></script>
<script src="ipp/9.2/js/html5-common-resources.js"></script>
<script src="ipp/9.2/js/common-resources.js"></script>
<script src="ipp/9.2/js/html5-common-resources.js"></script>
<script src="ipp/9.2/js/html5-views-common-resources.js"></script>
<script src="ipp/9.2/js/html5-process-portal-resources.js"></script>
<script src="ipp/9.2/js/cross-domain-support.js"></script>

<!-- Define Config -->
<script src="./api/config"></script>
<script src="./client/envConfig"></script>

Note that in the above sample, all IPP Files (JS and CSS) are to be copied from IPP into Client Application.

Environment Configuration (sdEnvConfig)

You need to specify configurations specific to deployment:

Following is the sample angularJS sdEnvConfig snippet for the environment configuration:

/**

 * Environmental Configurations

*/
	angular.module('client-ui').constant('sdEnvConfig', {

    "baseUrl" : "http://localhost:8080/ipp92m4/",

    "eventInterceptor": "clientEventInterceptorProvider",

    "ssoServiceURL" : "https://someIdP.com/idp/tenant1001?ClientID=ipp-portal",

    "heartBeatInterval" : 60

});

Here Client-UI is angular module for client application which is included in bootstrap. This file is included in landing page as <script src="./api/config"></script>.

Event Interceptor Definition

Following is the sample client side event interceptor clientEventInterceptorProvider.

angular.module('client-ui').factory('clientEventInterceptorProvider', ['$rootScope', ClientEventInterceptorProvider]);
function ClientEventInterceptorProvider($rootScope) {
    return {
        'openView' : function (config) {

            if (config.viewId == 'activityPanel') {

                return false; // Block processing at IPP
            }
            return true; // Allow processing at IPP
        },
        'openDialog' : function (config) {
            return true; // Allow processing at IPP
        }
    }
}

Note that you can implement interceptor using Angular service, as well. Following is the sample Angular service interceptor:

angular.module('client-ui').service('clientEventInterceptorProvider', ['$rootScope', ClientEventInterceptorProvider]);

sdEnvConfig


/**

 * Environmental Configurations

 */

angular.module('client-ui').constant('sdEnvConfig', {

    "baseUrl" : "http://localhost:8080/ipp92m4/",

    "eventInterceptor": "clientEventInterceptorProvider",

    "ssoServiceURL" : "https://someIdP.com/idp/tenant1001?ClientID=ipp-portal",

    "heartBeatInterval" : 60,

    "navPaths": {

        notesPanel: "/ipp/portal/notesPanel/:oid"

    }

});

Initializing IPP from Client

IPP needs to be initialized before IPP widgets like services and directives can be used by client application.

Note: Please make sure ssoServiceUrl is present in envConfig if working in an SSO environment.

Following is the sample clientEventInterceptorProvider for initialization from client.


sdInitializerService.start();

 sgPubSubService.subscribe(sdInitializerService.event.success, function(data) {

 // Initialized successfully

 });

 sgPubSubService.subscribe(sdInitializerService.event.failure, function(data) {

 // Initialization failed. To be handled by Client App for intimating user visually about error

 });

Alternatively, the sd-initializer directive can be used in landing page as shown in the following clientEventInterceptorProvider. This also makes sure that client UI is blocked till IPP initialization is complete.

<div sd-initializer>
</div>