Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

57
Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg, Qutab Institutional Area, New Delhi - 110067, INDIA. Tel: 91-11-40770100, 26964733, 26963571 || Fax: +91-11-26856936 || E-mail: [email protected]

Transcript of Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Page 1: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg, Qutab Institutional Area, New Delhi - 110067,

INDIA. Tel: 91-11-40770100, 26964733, 26963571 || Fax: +91-11-26856936 || E-mail: [email protected]

Page 2: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Disclaimer

This document contains information proprietary to Newgen Software Technologies Limited. You may

not disclose or use any proprietary information or use any part of this document without written

permission from Newgen Software Technologies Limited.

Newgen Software Technologies Limited makes no representations or warranties regarding any

software or to the contents or use of this manual. It also specifically disclaims any express or implied

warranties of merchantability, title, or fitness for any particular purpose. Even though Newgen

Software Technologies Limited has tested the hardware and software and reviewed the documentation,

it does not guarantee or imply that this document is error free or accurate regarding any specification.

As a result, this product is sold as it is and you, the purchaser, are assuming the entire risk as to its

quality and performance.

Further, Newgen Software Technologies Limited reserves the right to revise this publication and make

changes in contents without any obligation to notify any person of such revisions or changes. Newgen

Software Technologies Limited authorizes no Newgen agent, dealer or employee to make any

modification, extension, or addition to the above statements.

Newgen Software Technologies Limited has attempted to supply trademark information about

company names, products, and services mentioned in this document. Trademarks indicated below were

derived from various sources.

No part of this publication may be reproduced and distributed without the prior permission of:

Newgen Software Technologies Limited,

A-6, Satsang Vihar Marg, Qutab Institutional Area,

New Delhi - 110 067

India

Printed in INDIA

Copyright © 2015 by Newgen Software Technologies Ltd.

All Rights Reserved.

Page 3: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Contents

Introduction .................................................................................................................................................. 6

Application use cases ................................................................................................................................. 6

Understanding application and its components ......................................................................................... 6

Form ...................................................................................................................................................... 6

Fields ..................................................................................................................................................... 6

Form and field actions ............................................................................................................................ 6

Built in functions .................................................................................................................................... 6

Interface, navigation and widget ............................................................................................................ 7

Guide to build a sample application ............................................................................................................... 8

Application requirement ............................................................................................................................ 8

Basics of interface, navigation and widget in context to an application ...................................................... 9

Interface ................................................................................................................................................ 9

Navigation ............................................................................................................................................. 9

Widgets ................................................................................................................................................. 9

Step-by-step application designing........................................................................................................... 11

Step1: Create application ..................................................................................................................... 13

Step2: Create interface ........................................................................................................................ 14

Step3: Create widgets .......................................................................................................................... 16

Step4: Attach widgets on the navigation form ...................................................................................... 16

Step5: Define route criteria for linking different interfaces ................................................................... 17

Step6: Define tables in MDM (Master Data Management) ................................................................... 17

Step7: Map the tables and fields on the forms ..................................................................................... 18

Step8: Publish application with deployment manager or manually ....................................................... 19

Step9: Configuring new controls (Document list, Slider, Tile, Toggle) .................................................... 22

Steps to store values/data in the database, which is entered in a table/listview control using MDM ........ 25

Step1: Add listview/table control on the form ...................................................................................... 25

Step2: Add columns to listview/table control on the form. ................................................................... 25

Step3: Create a table in MDM. ............................................................................................................. 26

Step4: Add the child table from MDM configuration on the form. ........................................................ 26

Step5: Map the child table with the listview/table control on the form. ............................................... 27

Step6: Map the fields with the columns of listview/table control ......................................................... 27

Steps to store values/data in the database, which is entered in advance listview control using MDM ...... 28

Step1: Add listview control on the form. Go to properties and enable check box of advance listview. .. 28

Step2: Add columns in the child listview and parent listview. ............................................................... 29

Step3: Create a tables in MDM ............................................................................................................. 29

Page 4: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Add the child table from MDM configuration on the form. ........................................................ 30

Step5: Map the advance listview parent table with the parent listview control on the form. ................ 31

Step6: Open the properties of parent listview. Go to column settings and map the child listview. ........ 31

Step7: Map the fields with the columns of listview control ................................................................... 32

Steps to populate data from MDM on listview and tile control................................................................. 33

Step1: Add the control listview/tile on the form ................................................................................... 33

Step2: Click on event configuration ...................................................................................................... 33

Step3: Click on ‘load’ event and DB linking ........................................................................................... 33

Step4: Click on Add link and write the DB query and mention the target control .................................. 34

Steps to apply a new navigation theme .................................................................................................... 35

Step1: click on theme settings on the navigation page ......................................................................... 35

Step2: click on navigation style............................................................................................................. 35

Step3: New navigation style ................................................................................................................. 36

Steps to configure Tile group ................................................................................................................... 37

Step1: select the tiles together, click on the control group icon and create tile group........................... 37

Step2: The below screen appears after clicking on tile group................................................................ 38

Step3: Click on save.............................................................................................................................. 38

Steps to configure a custom control ......................................................................................................... 39

Step1: Click on add custom control ...................................................................................................... 39

Step2: Give a name to the custom control and select the icon for the custom control .......................... 39

Step3: Define the custom property and add ......................................................................................... 40

Step4: Click on save.............................................................................................................................. 40

Step5: The defined custom control is visible in the control panel ......................................................... 40

Steps to configure route journey on tile control ....................................................................................... 41

Step1: Design the forms in interface .................................................................................................... 41

Step2: Configuration on Log in form ..................................................................................................... 41

Step3: Configuration on the Product selection page ............................................................................. 41

Step3: Add the parent table on all the navigation forms. ...................................................................... 42

Theme Settings ........................................................................................................................................ 43

1) Theme import/export ................................................................................................................... 43

2) Form Setting (Define the form width, set background image and gradient) .................................. 43

3) Tile theme configuration .............................................................................................................. 44

Steps to save data entered in List box control .......................................................................................... 44

Step1: Add list box control on the form ................................................................................................ 44

Step2: Add values to the list box control manually or fetch from DB option ......................................... 45

Step3: Create a table in MDM and add the below fields. ...................................................................... 45

Page 5: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Make the field ‘ID’ foreign key with the child table. ................................................................... 46

Step5: Add the child table on the widget and map the list box. ............................................................ 46

Progressive Web Application (PWA) Configuration ................................................................................... 47

Step1: After creating an application, PWA configuration will be available............................................. 47

Step2: Click on PWA configuration and add the details, upload icon ..................................................... 47

Step3: Notification Configuration ......................................................................................................... 48

Step4: Publish the application as PWA using deployment manager ...................................................... 48

Step5: Use the URL on your mobile ...................................................................................................... 49

BPM Transition (Application to Process data mapping) ............................................................................ 50

Step1: Right click on the application, click on process mapping ............................................................ 50

Step2: Right click on the application, click on process mapping ............................................................ 50

Step3: Click on the arrow with the process. The below application mapping window will be opened ... 50

Step4: Once the user clicks on the finish button of the application. The workitem will be created and

workitem no. will be displayed. ............................................................................................................ 52

Events on Form load ................................................................................................................................ 52

Show Transaction list on listview (open existing transaction or create new one) ...................................... 53

Step1: Create an Interface with a listview and two buttons (open and create transaction) ................... 53

Step2: Add columns reference key and stage to the listview ................................................................ 53

Step3: Configure event on the form load (DB linking) ........................................................................... 53

Step4: Configure event on open transaction button ............................................................................. 53

Step5: Configure event on create transaction button ........................................................................... 53

Configure a login free application ............................................................................................................ 54

Case 1: Validate OTP configuration through custom code ........................................................................ 55

Case 2: Get OTP configuration .............................................................................................................. 56

Page 6: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Introduction

iBPS is evolving into a unified application development platform which enables rapid application development

- for web and mobile based applications while also providing a great developer experience. These applications

can be hosted and targeted for specific end users of the organization.

The new functionality added to iBPS product suite is based on ‘Low Code Platform’ development. This

platform enables rapid delivery of business applications with a minimum of hand-coding and minimal upfront

investment in setup, training, and deployment. It empowers citizen developers and business analysts to carry

out quick prototyping of applications. The model driven platform enables quickly designing, testing and

deploying applications. Thereby, enabling users to quickly design and launch application which in turn reduces

the development effort, time and cost involved in the exercise.

Application use cases

The application may be used for several use cases that include

a) Customer onboarding for bank account opening process

b) Customer applying for loan – car, home, personal, travel, education and so on

c) Customer applying for insurance – health, travel, life and so on

d) User enrolment

Understanding application and its components

An application is built to collect data from users or display data of existing user. The first step in creating an

application is to set up an interface, a navigation and widgets to collect/display data.

Form A form is the component of your application that enables the system to collect and store data. Therefore, forms

are one of the main points of interaction between the users and the Application. A form is an analogy to the

table in a database. Therefore, the information captured may be used for storing user details, reports and business

insights, user profiling etc.

Fields

A form is made of fields. It is the fields in your form that enable you to collect data from your users and store

them in an organized manner. There are different field types in iBPS application builder, each designed to enable

your users to submit a specific kind of data. For example: name, email address, phone number, address,

documents, images, and so on. The fields may also have validation. For example, phone number should be a

numeric value and date selection based for date fields.

Form and field actions

Perform an action after form data has been submitted. Form navigation can be defined based on the field

selection. For example, the landing page of the form may ask the user for type of loan – House loan, car loan,

personal loan and so on. Based on the selection, the next screen will have the details based on the type of loan

selected.

Built in functions

An application interface can be extended through events-based functions, calling up requisite web services and

utilize the defined control sets and control groups which considerably reduces the coding effort. Developers can

utilize the structured coding framework which has been provided along with published APIs.

Page 7: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Interface, navigation and widget

These are integral part of application that integrate the forms and define the user experience. We shall go through

the details of interface, navigation and widget in details in section Guide to build a sample application.

Multiple contemporary themes have been provided for various controls, which enables designing user friendly

applications. Designers can choose the navigation types like wizards and menus, design the application journey,

associate sub-forms and sections at various steps of the navigation and then preview this designed application.

Data Model hierarchy can be defined in ‘Master Data Management’ and then used in application, which can be

created independently of process flows. This functionality embodies the philosophy of “Design once, user

anywhere”, with capability to design responsive applications. iForm UI framework enables the quick and easy

development of applications.

The code for each application can be isolated into a separate deployable artefact. The finalized application can

be deployed through application pipeline maintained in Jenkins and its web URLs published for the end users.

Page 8: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg, Qutab Institutional Area, New Delhi - 110067,

INDIA. Tel: 91-11-40770100, 26964733, 26963571 || Fax: +91-11-26856936 || E-mail: [email protected]

Guide to build a sample application

Let us consider a use case of a bank approaching Newgen to develop an application for their customer

onboarding process for opening of savings bank account. The data submitted by the customers can be used by

the banks back end operations team. We shall go through the process to develop the application for the above

use case. Based on our understanding of the application as described in section Understanding application and

its components we need to have an overview of the form, fields, filed action and form action along with the

product requirement.

Application requirement

The applicant must login. Post login the applicant must go through the 4 main steps of select accounts, approve,

account funding and final step of finish. The main steps can further have sub steps as described below

The final application as described in the above use case is shown in Figure 1 where the user must navigate

through the 4 steps and the sub steps of each step. An example of the sub step in shown in Figure 2

Figure 1: Interface sample - Navigation

Select accounts Approve Account funding Finish

Selection of account type

Collection of personal details from customer

Collection of identification

details

Review the information entered

Provide Identification Authentication

Fund the account

Provide financial information

Message is displayed for account creation

The customer can order checks or Enrol

Page 9: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Figure 2: Widget (sub form) sample

Basics of interface, navigation and widget in context to an application

Interface

Interfaces are the forms which part of the application. Interface may also be defined as the page layout template.

For example, an interface page could be the login page template or a navigation-based template. In the above

example, we shall be discussing in depth about the navigation-based interface template. All the forms which are

not a part of navigation panel will be a part of interface. For example, login page and navigation form will

always be a part of interface. Another interface can be a transaction form which has all the customer data.

Navigation

Navigation is a form that defines navigation panel with the main steps and sub steps. In the above example, we

have defined 4 main steps and under some main steps there are sub steps as shown in Figure 3. The widgets are

linked to the sub steps in the navigation form.

Widgets

Widgets are also form that are attached to the interface (navigation). In the above use case, linked to the sub

steps in the navigation form.

Page 10: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Figure 3: Interface - navigation template

Page 11: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step-by-step application designing

Pre-requisite

1. The iBPS user should be included in the below mentioned groups to create an application.

1 MDM Users

2 Process Designer

3 Supervisor

2. The user should be included in the deployment manager profile.

Page 12: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

3. The user should have the below mentioned object rights in case of publishing application through

Deployment manager.

1 Deployment manager management

Page 13: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step1: Create application

• Once you have logged in into iBPS, open process designer. On the left side, a new option of Application

is available with Local and registered. Right click on application, option for ‘Create Application’ will

appear. Click on create Application.

• Click on create application and enter the application name. The default application table will be created

with the application name.

• On creating your application, two options Interfaces and Widgets will appear.

1. Interfaces Interface includes the forms which are not part of navigation panel. The

navigation form will always be in Interfaces. A login form can also be a

part of interfaces. The form from where the Application is launching will

be made as the default form for example the application can start from a

login page or directly from navigation form.

2. Widgets Widgets are sub-forms which needs to be created and attached in the

navigation form.

Page 14: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step2: Create interface

• Right click on Interface, option to ‘Create Interface’ will appear. Interface can also be imported from

an already created application. Create a navigation form. Multiple Interfaces can be created. For

Example, a login page can be created.

• After creating the main form, the form designer will be opened on the left side. For navigation panel,

select the checkbox for enabling navigation panel. The below screen will appear. You can choose to

show number or icons in navigation.

• Click on plus (+) icon for navigation. By clicking on it, the navigation main steps will be added. Multiple

main steps can be created.

Page 15: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

• In case of Icons, with each main step, select the svg image to be displayed on that step.

Path for keeping the images -

• Sub steps can be added. Click on the plus (+) icon of any step. Multiple sub steps can be added under

one step.

Note – Icons can only be used for main steps.

Page 16: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step3: Create widgets

• Multiple widgets / sub-forms can be created. These forms will be attached in the navigation form. Right

click on Widgets, option to ‘Create Widget’ will appear. Widgets can also be imported from an already

created application.

Step4: Attach widgets on the navigation form

• Once all the widgets are created. These widgets are attached on the navigation form. All the widgets

will appear in the dropdown. Attach widgets in the navigation form as per the navigation of your

application.

Page 17: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step5: Define route criteria for linking different interfaces

• If Interfaces are created other than the navigation form. On the event of button, define the route criteria.

For example, we have two interfaces login and navigation. The user will log in first then move to

navigation form. Therefore, the two interfaces need to be linked with each other. This linking can be

done by defining the route criteria on the click of a button. Define event (route criteria) on the click of

button. Select route criteria from command. Define the below parameters.

Step6: Define tables in MDM (Master Data Management)

The tables which are being used for application will be marked as portal table in MDM.

• The parent table will automatically be created with the application. It will have the below mentioned

fields. The ReferencKey is the primary key.

UserName String

Stage String

ApplicationName String

ReferenceKey String (Primary Key)

• Create child tables in MDM with one primary key (String type) which will act as a foreign key with the

parent table. Link the primary key of your child table with the primary key of your parent table with the

help of Foreign key association. Refer to the below screenshot.

Page 18: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step7: Map the tables and fields on the forms

• Map the parent table on the navigation form. The below icon is available for table list.

Click on table list and select your parent table from the list of tables.

• Map the fields for widgets. Open a widget form, click on the table list. Select your table. This is like

the previous steps. Once the table is added. All the variables will be visible for mapping. Double click

on the variable and the mapping will be done. The variable already mapped will be highlighted with

green. Click on cross to remove a mapping.

Page 19: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step8: Publish application with deployment manager or manually

Manual publishing the application:

Please refer to the document on publishing an application manually.

Using Deployment Manager.

Pre-requisite: Deployment manager should be installed.

Create an environment and pipeline with the help of deployment manager guide.

• Right click on your application and click on Ready to publish.

• Select the pipeline and click on ok.

Note: The pipeline is created in deployment manager.

Page 20: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Once you click on ok. A message will be displayed that your pipeline is ready for execution.

• Log onto deployment manager.

• Click on Execute

• Once you click on execute pipeline. A message for successful execution of pipeline will be displayed.

Click on ok.

Page 21: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

• The below screen will be displayed once your application is published.

• Click on the link and your application is ready.

Page 22: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step9: Configuring new controls (Document list, Slider, Tile, Toggle)

• Tile

1. Add the Tile control from the control list.

2. Click on the properties of Tile

TileHeader To add a header to the tile.

TileButtonLabel To add a select button.

TilePoint To add bullet points.

Tile Image To add an Image.

TileAlignLabel Align it to left or center

3. Path for keeping image files- jboss-eap-7.0\bin\IFormDirectory\Images

• Document list

1. Add the Document list control

Note – To add a doclist control on your widget. Map the parent table of the widget first(Child table).

The doclist will be mapped automatically.

Page 23: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

2. Add the documents name in #separated value. Choose to upload documents using

camera, browse or both. Also make the doclist control mandatory and display error

message if the document is not uploaded,

3. Camera Settings

• If the server is Https enabled, then no settings for camera are required.

• If the server is not https enabled, then please configure the below settings on chrome.

Open the link - chrome://flags/#unsafely-treat-insecure-origin-as-secure

Enable the insecure origins treated as secure and write the server IP.

Page 24: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

• Slider

1. Add slider Control

2. Click on the properties

Max Enter the maximum value

Min Enter the minimum value

Value Default value

Unit

• Toggle

1. Add Toggle control

Page 25: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to store values/data in the database, which is entered in a table/listview control using MDM

Step1: Add listview/table control on the form

Step2: Add columns to listview/table control on the form.

For example: The listview has two columns employee name and employee id. The data for these two columns

needs to be stored in database.

Note:

Add a column insertionorderid in listview. Make the visibility as false.

Page 26: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step3: Create a table in MDM.

• For example: create table ‘DemoTable’ with the following fields.

Insertionorderid Integer Identity Mandatory Primary Key

Employee_name(column name) Any data type

Employee_ID(column name) Any data type

TableID(can be any name) Any data type Mandatory Foreign Key

• Make TableID foreign key with the primary key of child table of your application. Refer to the below

screenshot.

Step4: Add the child table from MDM configuration on the form.

Page 27: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step5: Map the child table with the listview/table control on the form.

For example: map the demolistview child table with the listview control. Refer to the screenshot below.

Step6: Map the fields with the columns of listview/table control

Step7: Select insertion order id as yes for insertionorderid column.

Page 28: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to store values/data in the database, which is entered in advance listview control using MDM

Step1: Add listview control on the form. Go to properties and enable check box of advance listview.

Click on column settings and add the child listview.

Page 29: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step2: Add columns in the child listview and parent listview.

Step3: Create a tables in MDM

• Create table for parent listview. For example: create table ‘AdvanceListviewParent’ with the

following fields.

Insertionorderid Integer Identity Mandatory Primary Key

Employee (column name) Any data type

Country(column name) Any data type

TableIDParent(can be any name)

String Mandatory Foreign Key

• Make TableID foreign key with the primary key of child table of your application. Refer to the below

screenshot.

Page 30: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

• Create table for child listview. For example: create table ‘AdvanceListviewchild’ with the following

fields.

Insertionorderid Integer Identity Mandatory Primary Key

Employee (column name) Any data type

Country(column name) Any data type

TableIDChild(can be any name) Integer Mandatory Foreign Key

• Make TableIDChild foreign key with the primary key of the advance parent listview table. Refer to the

below screenshot.

Step4: Add the child table from MDM configuration on the form.

Page 31: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step5: Map the advance listview parent table with the parent listview control on the form.

For example: Refer to the screenshot below.

Step6: Open the properties of parent listview. Go to column settings and map the child listview.

For example: Refer to the below screenshot

Page 32: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step7: Map the fields with the columns of listview control

Step8: Select insertion order id as yes for insertionorderid column.

Page 33: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to populate data from MDM on listview and tile control

Step1: Add the control listview/tile on the form

Step2: Click on event configuration

Refer to the below screen

Step3: Click on ‘load’ event and DB linking

Refer to the below screen

Page 34: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Click on Add link and write the DB query and mention the target control

For example: populating username on listview/tile. Write the query and mention the target control. Refer to

the below screenshots.

Page 35: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to apply a new navigation theme

Step1: click on theme settings on the navigation page

Step2: click on navigation style

Choose from the two styles of navigation. The option to display navigation or not is also configurable. Also,

the active/completed step icon color and inactive step icon color can also be set. A header image can also be

set for the application.

Path for image: jboss/bin/iformsdirectory/images

Page 36: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step3: New navigation style

Page 37: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to configure Tile group

Tile group is a feature given on form builder where different actions can be performed on a tile control. Tile

can be made default, or you can choose the type of tile selection single/multiple.

Step1: select the tiles together, click on the control group icon and create tile group.

Page 38: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step2: The below screen appears after clicking on tile group.

From the below screen, a tile can be made default. The number of tiles to be selected single or multiple can

be selected.

Tile selection can be mandatory and an error message can be displayed.

Step3: Click on save.

Page 39: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to configure a custom control

Custom controls framework allows the user to integrate third party controls with form designer. The

framework is robust and easily usable throughout the form. For example, the user can integrate any kendo UI

using the available framework.

Step1: Click on add custom control

Step2: Give a name to the custom control and select the icon for the custom control

Page 40: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step3: Define the custom property and add

Step4: Click on save

Step5: The defined custom control is visible in the control panel

Page 41: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Steps to configure route journey on tile control

Let us take an example. There are three tiles namely tile A, tile B and tile C. All the three tiles can navigate to

different navigation pages. On selection of tile A, it can route to navigation N1 and on selection of tile B, it can

route to navigation N2. It means that different product journey can be configured.

Step1: Design the forms in interface

Design a login page form for your application, design a product selection form which will have three tiles and

two navigation forms. So total 4 form will be created in interface.

Step2: Configuration on Log in form

On the log in button of your page, select RouteCriteria event and define the below properties. The Product

selection form is the form where the three tiles are defined.

Step3: Configuration on the Product selection page

On the product selection form, Add a text box and a button. Please find the below screenshot of a sample

product selection form for your reference.

Page 42: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

1) Textbox- Mark the property visible of textbox field as no.

2) Button- On the event configuration of button, define routejourney. Select any one of the navigation

forms as form name and select the textbox which was added above.

3) Tile – On the event configuration of Tile, define routejourney. Select the navigation form name

which you want to route to after selection Tile 1 and select the textbox which was added above.

Similarly configure the other two tiles.

Step3: Add the parent table on all the navigation forms.

Page 43: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Theme Settings

1) Theme import/export

The user can download and upload themes. This provides flexibility to the user.

2) Form Setting (Define the form width, set background image and gradient)

The user can define the form width (full, variable, or fixed). This provides the user with

configurations to add more look and feel to the application. The user can add a background image or

color to the application. Please refer to the below screenshot.

Page 44: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

3) Tile theme configuration

User can select the tile style, font style of title, content, and button. Also, the button style.

Refer to the below screenshot.

Steps to save data entered in List box control

Step1: Add list box control on the form

Page 45: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step2: Add values to the list box control manually or fetch from DB option

Step3: Create a table in MDM and add the below fields.

For example, create a table ‘Listbox_brand’ with below mentioned fields.

insertionorderid Integer Select as identity and make it primary key

Id String Foreign key

Brand String

Page 46: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Make the field ‘ID’ foreign key with the child table.

Step5: Add the child table on the widget and map the list box.

Page 47: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Progressive Web Application (PWA) Configuration

The application created in iBPS 5.0 can be deployed as PWA. The UI is responsive on other devices like

mobile and tablet.

Pre-requisite

Licensed SSL certification on the server.

Step1: After creating an application, PWA configuration will be available

Step2: Click on PWA configuration and add the details, upload icon

Page 48: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step3: Notification Configuration

Enable notifications for PWA. Configure the settings. Refer to the sample screen below.

Step4: Publish the application as PWA using deployment manager

Page 49: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step5: Use the URL on your mobile

Page 50: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

BPM Transition (Application to Process data mapping)

On the finish button of the application, the workitem can be generated.

Step1: Right click on the application, click on process mapping

Step2: Right click on the application, click on process mapping

Add from the list of registered process. One or more processes can be mapped.

Step3: Click on the arrow with the process. The below application mapping window will be opened

Page 51: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

• Forward Mapping (Variable)

Select the process variable queue variable, external variable, or both. Select the data type for your

variable. Now select the MDM table and its columns which will be mapped with process variable and

click on add icon.

• Forward Mapping (Document)

Map the process document type to the doc table and its columns. Click on the add icon to add it.

Page 52: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Once the user clicks on the finish button of the application. The workitem will be created and

workitem no. will be displayed.

Events on Form load

Three Events are available on the form event configuration. The user can configure these events on form

load, on previous button and next button.

a. Load

On the load event, the user can do DB linking or custom action

b. Previous

On the previous button of application, the user can write any custom action.

Page 53: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

c. Next

On the next button of application, the user can write any custom action.

Show Transaction list on listview (open existing transaction or create new one)

The user can check all the transaction list on a listview table.

Step1: Create an Interface with a listview and two buttons (open and create transaction)

Step2: Add columns reference key and stage to the listview

Step3: Configure event on the form load (DB linking)

DB Linking Query- select ReferenceKey, Stage from LMBank where ApplicationName='LMBank' and

username='#$#username#$#'

Target Control- Id of listview

Step4: Configure event on open transaction button

Step5: Configure event on create transaction button

Note: This can be configured on a widget also, just select ISWidget ‘Yes’ on the open transaction widget.

Create transaction event is not required for widget case as when the user clicks on the next button, new

transaction is created.

Page 54: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Configure a login free application

In this application, there will be no login page. The user will not login into the application. In this case, the

user will be maintained for making MDM transaction. UserName and Password (Encrypted Format ) of the

User will be kept in INI File. A URL will be provided for this purpose. Each time user hits the URL, transaction

ID of the transaction will be used as UserName in the application which is unique on each Hit of the URL.

Maintain an entry in web.xml which will be used to distinguish whether transactionID will be used as

UserName or not. Data of the Application needs to be provided through custom Hook. After that

UploadWorkItem call will be generated from Custom Hook and provided to the Application. Application then

make this call to Server and create Workitem in iBPS.

Login Free support in Application (JBoss)

Following are the settings which need to be done for login free application using username and password in

ini.

1. There are 3 new added tags in appconfig.ini

UserName – Username of already existing user for login

AuthKey – Encrypted password of the user

CallFrom – For login free application to check whether calling from Link/NewUser

The password should be encrypted using an API of OD. The API can be used by including omnishared.jar

provided in the hotfix to a project. The password can be encrypted by calling the following and passing raw

password in the function.

String enckey = Base256EncodeDecodeUtil.generateSecureToken(password);

2. The ini tag DefaultForm needs to be set to the navigation page instead of login page.

3. In the ini tag callFrom there can be three values

• Blank – in case login application is created

• Link – in case login free application, in this case only the UserName tag is required to be filled. A user is created with the UserName provided and the application will be logged in.

• NewUser -in case of login free application, in this case UserName and AuthKey should be provided. The application will use the provided credentials for internal login.

Types of Application

1) Login free application (No Authentication required)

2) Login free application (Authentication required)

• Validate OTP

• Get OTP

Page 55: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Case 1: Validate OTP configuration through custom code

Usecase – if the user forgets to upload document on the workitem, then a separate mail can be sent to the

user where he/she can upload the missing document using application link with OTP login.

Approach: From iBPS, when a workItem is in Process, there might be need of certain artifacts from the end

user, for this purpose below steps will be initiated.

• A mail will be initiated from the system to the end user with some query parameters, The URL format of mail content will be like

HttpProtocal://ServerDomain/Application?QueryString

• Another mail will be initiated from iBPS which contains the OTP for accessing above URL.

Step1: Create a table in MDM

• A Table will be maintained in MDM (UserTxnInfoTable) which will contain below Information. AES Encryption will be used, and Key will be the combination of (TransactionField+TransactionNo).

Application

Name

OTP ValidTill

QueryString TransactionField TransactionNo CreationDate

• While Sending Mail to User, Data will be inserted in above Table through custom Implementation.

• When User clicks the Link from the mail, Execution Flow will start in Application.

• Application first validates the query String and ValidTill from the UserTxnInfoTable if present or not, If It is not present or expired, it will redirect to Error Page, Otherwise OTP validation Screen will appear. Now, OTP needs to be validated from the custom code.

• After validation of OTP from the OTP validaton Screen, Application main page will be launched with a new Transaction no in MDM.

• Data of QueryString will be decrypted using the AES Decryption with the same Key Combination discussed earlier and will be made available through API.

• User will fill data in the Application and then click finish button. On Click of Finish button Data will be migrated from the Application to iBPS using the Hook provided.

Step2: Create an Interface for the application

The interface should have two controls:-

• Textbox – To enter the OTP

• Button – For checking the OTP

Step3: Configure OTP event on the button

On the button, configure the following event

• Command – ValidateOTP and provide the OTP Field and navigation page’s form name

Page 56: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Custom code changes: Make changes in CustomCodeImplementor.java

Kindly refer to the application portal custom code document for OTP implementation.

Case 2: Get OTP configuration

The user can login using OTP login.

Pre-requisite- Start the mailing Agent

Step1: Create an Interface and add a button

Step2: Define ‘GetOTP’ command event on the button

Step3: Define the below configurations on GetOTP

Page 57: Newgen Software Technologies Ltd, A-6, Satsang Vihar Marg ...

Step4: Sample Screens