building user interface with kofax totalagility

7/28/2019 Building User Interface With Kofax TotalAgility

1/80

Building User Interface with Kofax TotalAgility

Phong Chu

Principal Enablement Manager

[email protected]


2/80

Forms Designer

The Forms Designer module is a

standalone module that is used to

create forms and build forms based on

business processes.

You can view existing forms, create a

form, open and modify an existingform, delete an existing form, create

forms navigation, define themes,

create site and so on.

You can also import and export forms,and view the list of recently created or

opened items.

2


3/80

Sites

3


4/80

What is a Site?

A site is a set of forms containing content such as text, images

that provide a business solution. The forms that are used in one

site can be reused in other site but the look and feel differs on the

theme associated with the site.

4


5/80

Site and Forms Overview

HeaderHorizontal Navigation

VerticalNavigation

Theme

Language

Default form

Site 1

Logon

Createnewjob

TakeActivity

WorkspaceHeader

Link via Navigation

Workspace Forms

To Do J obs

Navigation Menus

CaseDetailsMenuJ obDetailsMenu

WorkspaceMenu

Process Forms

LogonCreatenewjob

TakeActivityWorkqueue

To Do J obsSite 2

Workqueue

Overview

5


6/80

Configuring Site

In the Default Form box, configure the form that you want to set

as a default form.

Select the language to display the site in, from the Base

Language list.

6


7/80

Format a Sites Components

Header form (standard form set as Header in Site settings)

Customize Logon form

Create or apply a theme

CSS or Windows Preset

7


8/80

Themes

8


9/80

What is a Theme?

A theme defines the visual layout with a consistent look and feel

across all the forms in a site. For example, Microsoft has a similar

look and feel across all of its products.

You can configure a theme with font style, font colorand page

color. Additionally, you can also create a theme by associating a

CSS (cascading style sheet) and choosing a style for your formcontrols such as button, check box, table, tab and so on.

Once a theme is associated with a site it is automatically

applied to all the forms within your site. However, if you want to

have a typical form irrespective of the theme, you can change thestyle of the controls by setting up their extended properties.

9


10/80

Configuring Theme

You can use a style sheet for configuring form controls

10


11/80

Forms

11


12/80

Forms (Web pages)

Front end for end users

Site

Collection of forms and optionally processes

Out of box Site

TotalAgility Workspace

Create a blank Site and use forms from the TotalAgility

Workspace

Blank Site

Create a site and forms from scratch

12


13/80

Out of Box Workspace Forms

13


14/80

Generating Forms

Build Forms

Logon (Windows or Manual)

CreateNewJ ob

Work Queue

Take Activity

Create Blank Forms

Forms

Use Cells to position controls (textbox, calendar, buttons) on

the form

14


15/80

Saving, Releasing and Reverting Forms

Forms have Versioning

You can Save (minor version) or Release (major version)

Forms are stored in the TotalAgility Database as XML and

rendered at runtime to .html pages

Like Processes, Forms can be reverted from older versions All sites use the latest Released version of the form

Only the latest Released version of a form is accessible via a

Browser.

15


16/80

Customize Forms

Modify the auto generated forms

Add new controls

Textboxes, dropdown lists

Event Types

Redirect, DB Query, Web Service, .NET, Display Rule,Calculation Rule, Close, Begin/End Condition, SamePage etc.

Customize or Add Events (using Actions)

OnLoad, OnClick. OnChange, OnSelectRow etc.

16


17/80

Import/Export

Exporting a Forms

.zip file

Small file size

Process and forms are exported separately

Export a specific form (.zip)

17


18/80

Variables

18


19/80

Global Variables

You can define frequently used variables as global variables.

These variables can be used across several forms.

For example, if you need to frequently interact with a

database, then you can create a global variable with

"DSN=MyDB;" as its value.

The same variable can be used in different forms to interact

with the database.

Whenever the value of the variable is changed, the change is

applied across all forms using the variable.

If you provide a value to a global variable, that value is used as

the default value.

You can change the default value at run time.

19


20/80

Configuring Global Variables

To allow the variable to be included in the RESX file that is used for

translation, click the check box for Localizable.

Kofax TotalAgility provides the following default global variables:

20


21/80

Form Variables

Form variables helps you to hold data at the form level and use it

wherever required within the form. This eliminates the need to

create hidden fields specifically on the form to hold data.

Once created, form variables can be used in the same way as

you would use fields and global variables.

21


22/80

Configuring Form Variables

For a variable of type Array, specify the number of columns. This

variable can then be populated using a DB Query, .NET, or a

Web Service action.

22


23/80

Creating Forms

23


24/80

Automatically Generating Forms

The ability to automatically generate forms is the key to quick

and successful delivery of product screens.

In Kofax TotalAgility Form Designer, you can generate forms for

Kofax TotalAgility functionality without any programming

experience.

The standard forms that can be generated for Kofax TotalAgility

include Logon, Create New J ob, Take Activity, Multi-View, Multi-

View Activity, Work Queue and Entity.


25/80

Logon Form

You can generate a Logon form automatically without the need to

create an external web page in Visual Studio and then redirect it

to your site.

25


26/80

Building Logon Form

You can select to use either windows authentication or manual

logon.

26


27/80

Work Queue Form

The work queue page displays the list of work queue tasks that

are assigned to you and total tasks of the group (team) in which

you are a member, for example, Product Development.

It helps you to focus on the tasks or projects that requires your

attention, especially when you are working on multiple areas at a

time.

27


28/80


29/80

Take Activity Form

Using the Take Activity form, you can generate forms for

manual user activ ities of a map. This form can be associated

with the activity and at run time, you can then take and complete

activities.

When a Take Activity form is generated for a process map that is

using variables as inputs or outputs to an activity, controls are

automatically generated for those variables; the controls depend

on the variable type. For example, for Boolean type of variable, a

check box is added. Input variables are displayed as read only, and output

variables are created as editable controls.

The Cancel, Complete and Save buttons are added by default.

29


30/80

Building Take Activity Form

Configure the process map that you want to use to generate

forms for its ordinary manual activities.

To exclude an activity from the generated form, clear the check

box for that activity.

30


31/80

Form Controls

31


32/80

Controls

Users can enter information into a form

by typing into text boxes, selecting items

from a list, selecting check box options

and performing other actions. The

objects that users interact with are

called controls. Specific controls, such as buttons allow

you to execute an event to perform an

action. For example, by clicking a button

at the bottom of your form, the input

information can be saved to a database.

32


33/80

Configuring Textbox Control

Field Type

Field length

Format

Error message

Value When Empty

State property

Mandatory

Optional

Hidden

33


34/80

Configure Button Controls

Causes validation

Confirmation messages

Default button

34


35/80

Image Control

You can enhance the look and feel of your forms by adding icons

and images to them.

You can add

Images to a form

Images to buttons placed on the form The following Image types are supported:

*.bmp

*.gif

*.ico

*.jpg

*.png

35


36/80

Configuring Image Control

Note: The image needs to reside in images folder at C:\Program

Files\Kofax\TotalAgility\Agility.Server.Web\Forms\

36


37/80

Table Control

Use a Table control to organize and arrange your form content

into rows and columns.

37


38/80

Configuring Table Control

Configure Columns

38


39/80

Hyperlink Control

A Hyperlink control can be used to link to a URL. For example, a

form displaying information about a list of products can include

hyperlinks to other web pages displaying more information on

those products.

Hyperlink controls can point to any web server on either intranet

or Internet.

39


40/80

Configuring Hyperlink Control

Redirect Action: Configure the required redirect action that will

provide the redirect location and target for the hyperlink

40


41/80

Embedded Page Control

Using the Embedded Page control, you can embed an external

web page or an existing site page in your form. At run time, when

the site is loaded, the embedded web page is automatically

opened enabling you to view multiple pages at the same time.

41


42/80

Configuring Embedded Page Control

To embed an internal site form as a web page, click Form and configure

the required form. Map the initialization variable to the relevant formfield or variable (form or global).

To embed external web page (URL), enter the required URL, and map

a form field or variable (form or global) to the relevant initialization

variable.

To specify the web page to load dynamically at run time, map a form

field or variable (form or global) to the relevant initialization variable; the

URL is specified at run time when it is read from a field on a form or a

global variable.

42


43/80

Process Viewer Control

View the progress of a job (a live instance of a process) by

providing a visual indication of what has been completed so far

and the path taken, and also what is remaining.

Key information is available on each activity, and each activity is

outlined in a specific color representing its current status.

With appropriate permissions a number of live properties can be

changed on this job.

43


44/80

Configuring Process Viewer Control

View Id: Enter the ID of the job or process.

44


45/80

Form Actions

45


46/80

What is Action

Action describes the different ways an event

can be initiated. For example, a customer

credit score check could be based on two

different actions:

a DB query action that reads the

customers' details from a database and

a .NET Method action that calculates the

appropriate score.

You can configure multiple actions to be

executed on an event firing on a form or formcontrol, such as on form load, on button click,

on select row in a table.


47/80

.NET Action

Enables interaction with software components developed for the

Microsoft .NET Framework

Calls an API for performing actions, such as creating a new job.

47


48/80

Configuring .NET Action

Configure the required assembly in the Assembly box

On the Class list, select the required class

On the Method list, select the required method. A list of

associated parameters appears

Map form fields (controls) or variables to the parameters

48


49/80

DB Query Action

You can add a DB query action for a form, and form control, such

as drop-down lists or text boxes, to add, display, update, or delete

database records.

You can use the DB Query action to add multiple records at a

time, search for records with similar values, and use stored

procedures.

Kofax TotalAgility is integrated with Data Access Service (DAS)

that allows you to easily connect and interact with a selected

relational database.

49

fi i i


50/80

Configuring DB Query Action

No SQL coding required

50

R di A i


51/80

Redirect Action

Redirect the user:

to another page

back to the original page

to a pop-up window

Redirect dynamically, that is, specify the URL to redirect to at runtime, using a form field or a variable

Can pass data from the original page to the destination page by

mapping the fields on the source page to the required fields on

the destination page.

51

C fi i R di t A ti


52/80

Configuring Redirect Action

You can configure a unique action for each language separately

52

C diti A ti


53/80

Condition Action

Using a Condition action, you can define conditions around an

event firing and run a series of events in response to a condition

being met.

Example: If the loan amount is greater then 1000:

Display a message to the user (Display Rule)

Run a DB Query to get interest rates for this loan amount and

display in a table in a panel (DB Query)

Show the cell on the form (Display Rule)

A condition action must include:

A Begin condition

A regular action, such as Redirect

An End condition

53

C fi i C diti


54/80

Configuring Condition

Create Begin Condition

Create End Condition

Use Begin/End Condition in Event

54

S P A ti


55/80

Same Page Action

Using the Same Page action, you can initialize value to a field or

give a default value at run time.

You can specify the source and target fields; the value from a

source field or variable is populated at the target field as default

value.

55

C fi i S P A ti


56/80

Configuring Same Page Action

Configure the required target item (form field, form variable or

global variable) in the Target box.

Configure the required form fields, form variable or global

variables in the Source/Value box.

56

Displa Rules


57/80

Display Rules

Hide/Show, Disable/Enable, Optional/Mandatory controls based

on a condition being met on the form

Define the rule at the form level (Defined as an Action Type)

Run the rule via an event

Can specify what happens if the condition is true/false Example

If the logged on user belongs to a particular group show a

panel on the form

If the user enters a value in a field enable the OK button

57

Display Rule Action


58/80

Display Rule Action

A display rule consists of

a set of conditions that are defined for one or more fields

display states which are enforced when these conditions are

met or not met.

Dynamically control what is displayed on a form or how the

controls on the form behave. For example, you can hide one or

more fields on the form, make a field read-only or disabled and so

on.

At run time, the Display Rule is invoked once the user clicks the

configured control that has the action defined.

58

Configuring Display Rule


59/80

Configuring Display Rule

Design Time

Create Display Rule

Call Display Rule

Run Time

59

Calculation Rules and Business Rules


60/80

Calculation Rules and Business Rules

Addition, Subtraction, Multiplication, and Division

Text concatenation (joining strings)

Define the rule at the form level (Defined as an Action Type)

Run the rule via an event

Set the field type to Numeric, decimal etc if performingcalculations

May need to redirect to the same page if working with dropdown

lists (as their type is always String)

Can call a Business Rule from a form

60

Calculation Rule Action


61/80

Calculation Rule Action

Using a Calculation Rule, you can dynamically control how the

content of a form field, form variable or global variable iscalculated and displayed on a form.

At run time, the calculation rule is invoked once the user clicks the

control where the action is defined.

61

Business Rule Action


62/80

Business Rule Action

You can add a Business Rule action to a form or form controls,

such as button, text box, check box or drop-down list.

At run time, the Business Rule action is invoked once the user

clicks the configured control or when the form is loaded.

62

Configuring Business Rule Action


63/80

Configuring Business Rule Action

Configure the required business rule in the Business Rule box.

Map the inputs and outputs of the rule with form fields or variables

63


64/80

Navigation

64

Navigations (Menus)


65/80

Navigations (Menus)

WorkspaceMenu CaseDetailsMenu JobDetailsMenu

65

Menus


66/80

Menus

WorkspaceMenu

GeneralWorkqueue.form

Reassign.form

66

Navigation


67/80

Navigation

You can add multilevel navigation capabilities to your site.

You can add vertical and/or horizontal navigation bars to your site

which are completely customizable.

The navigation menu is defined at the global level; once applied to a

site it is available to all the forms within that site.

67

Configuring Navigation


68/80

Configuring Navigation

You can redirect a menu item either to an internal form or to an

external form.

68

Associating Menu with Site


69/80

Associating Menu with Site

To use horizontal and/or vertical navigation in every form of the

Site, configure the required Horizontal Navigation and VerticalNavigation

69

Associating Menu with Form


70/80

Associating Menu with Form

By default the navigation set for the site is selected.

To use a different horizontal and/or vertical navigation in a form,

configure the required Horizontal Navigation and Vertical

Navigation

70

Site Navigation and Security


71/80

Site Navigation and Security

Restrict access to menus/menu items

Restrict access to form by setting Form Security

71


72/80

Translation

72

Sample Custom form with languages support


73/80

Sample Custom form with languages support

Russian

73

Managing Translation


74/80

Managing Translation

Kofax TotalAgility adheres to the Internationalization (i18n) and

Localization (l10n) standards, which define the parameters foradapting computer software to different languages and regions.

74

Translating into Supported Languages


75/80

Translating into Supported Languages

For every selected language, a column appears enabling you to

enter the translated text for the form element.

75

Exporting Languages


76/80

Exporting Languages

The translation package is created as a compressed (.zip) file andcontains the selected forms and navigations stored in .resx files:

76

Importing Languages


77/80

p g g g

You can import translation resource (.resx) files, that is, files after

translation into TotalAgility.

77

Language Selector Control


78/80

g g

Use the Language Selector control to select the language the

form must be displayed in.

At run time, when the page with the Language Selector control

loads, the list is automatically populated with languages

supported by the site, allowing you to manually select the

language you want the page displayed in.

78


79/80

Thank you

79


80/80

For further information, please contact:

Phong Chu

Principal Enablement Manager

Phone: 949 783 1296

Email: [email protected]

building user interface with kofax totalagility

Documents