Building User Interface with Kofax TotalAgility

Phong Chu Principal Enablement Manager Phong.chu@kofax.com

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 existing form, 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.

Sites

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.

Site and Forms Overview

Site 1
Vertical Navigation Language Theme
To Do Jobs

Header Horizontal Navigation Default form Link via Navigation

Site 2

To Do

Jobs

Workspace Forms

Navigation Menus

Process Forms

CaseDetailsMenu JobDetailsMenu WorkspaceMenu WorkspaceHeader TakeActivity Createnewjob Overview Workqueue Logon

5

Logon Createnewjob TakeActivity Workqueue

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.

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

Themes

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 color and page

color. Additionally, you can also create a theme by associating a CSS (cascading style sheet) and choosing a style for your form controls 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 the style of the controls by setting up their extended properties.

Configuring Theme
You can use a style sheet for configuring form controls

10

Forms

11

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

Out of Box Workspace Forms

13

Generating Forms
Build Forms Logon (Windows or Manual) CreateNewJob Work Queue Take Activity Create Blank Forms Forms Use Cells to position controls (textbox, calendar, buttons) on

the form

14

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

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

Import/Export
Exporting a Forms .zip file Small file size Process and forms are exported separately Export a specific form (.zip)

17

Variables

18

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

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

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

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

Creating Forms

23

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 Job, Take Activity, Multi-View, MultiView Activity, Work Queue and Entity.

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

Building Logon Form

You can select to use either windows authentication or manual

logon.

26

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

Building Work Queue Form

A generic work queue form is provided within the TotalAgility

Workspace
You can build a custom work queue form for a particular work

type and/or displaying particular information.

28

Take Activity Form

Using the Take Activity form, you can generate forms for

manual user activities 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

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

Form Controls

31

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

Configuring Textbox Control

Field Type Field length Format Error message Value When Empty State property Mandatory Optional Hidden

33

Configure Button Controls

Causes validation Confirmation messages Default button

34

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

Configuring Image Control

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

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

36

Table Control
Use a Table control to organize and arrange your form content

into rows and columns.

37

Configuring Table Control

Configure Columns

38

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

Configuring Hyperlink Control

Redirect Action: Configure the required redirect action that will

provide the redirect location and target for the hyperlink

40

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

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 form field 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

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

Configuring Process Viewer Control

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

44

Form Actions

45

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 form control, such as on form load, on button click, on select row in a table.

.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

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

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

Configuring DB Query Action

No SQL coding required

50

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 run

time, 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

Configuring Redirect Action

You can configure a unique action for each language separately

52

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

Configuring Condition
Create Begin Condition

Create End Condition

Use Begin/End Condition in Event

54

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

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

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

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

Design Time Create Display Rule Run Time

Call Display Rule

59

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 performing

calculations
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

Using a Calculation Rule, you can dynamically control how the

content of a form field, form variable or global variable is calculated 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

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

Configure the required business rule in the Business Rule box. Map the inputs and outputs of the rule with form fields or variables

63

Navigation

64

Navigations (Menus)
WorkspaceMenu CaseDetailsMenu JobDetailsMenu

65

Menus
WorkspaceMenu

GeneralWorkqueue.form

Reassign.form

66

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
You can redirect a menu item either to an internal form or to an

external form.

68

Associating Menu with Site

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

Site, configure the required Horizontal Navigation and Vertical Navigation

69

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

Restrict access to menus/menu items

Restrict access to form by setting Form Security

71

Translation

72

Sample Custom form with languages support

Russian

73

Managing Translation
Kofax TotalAgility adheres to the Internationalization (i18n) and

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

74

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

The translation package is created as a compressed (.zip) file and

contains the selected forms and navigations stored in .resx files:

76

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

translation into TotalAgility.

77

Language Selector Control

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

Thank you

79

For further information, please contact: Phong Chu Principal Enablement Manager Phone: 949 783 1296 Email: phong.chu@Kofax.com