ICFS

Annotated User Interface Design

[Accounts Set Up]

Recommendations...Internationalization:

Do not hardcode text content [Eg: Grid column labels, Form labels, Error messages].

Use MessageSource to present the text from property file.

Dojo Widgets:

Define the widgets using HTML declarative syntax instead of programmatic definition.

Grid Use dojox.grid.EnhancedGrid

Use plugins: DnD, NestedSorting, Context menus [Row Menu, Region Menu]

SelectionMode: Single/Multiple [as required by the Spec]

Text box For Text type content use dijit.form.ValidationTextBox. Handle the length

requirements of text content, using maxlen property of this widget.

For Date content use dijit.form.DateTextBox. Use the following constraints to set the Date format and max-min values [Date ranging from 1901-01-01 to 2099-12-31]

constraints="{min:(new Date(1901, 0, 1)), max:(new Date(2099, 11, 31)), datePattern:'dd MMM yyyy'}"

Select box [Dropdown list] Use dijit.form.FilteringSelect

Accounts Set Up (initial view)

Left navigation reflects that the user is on Accounts Set Up page.

When this page is initially displayed, the user is prompted to select a country/subsidiary.

Focus is initially placed on the select box.

The purpose of this page is to provide all of the functionality for Accounts Set Up.

Displays the users currently selected Geography.

Only the country/subsidiary combinations that the user is authorized to work with will be displayed in the select control. The user must select the “Go” button.

When the “Go” button is selected, additional search fields are displayed (see additional slides).

Onchange of the country , the content shown prior to selection vanishes and only on click of Go the user is shown with the fresh data for the country/subsidiary selected.

Accounts Set Up (account groups)

The Account groups table displays only the shown columns. The default order of the columns is as shown. The table is initially sorted by Number. The table permits nested sorting. None of the columns is editable. Two rowMenu/SubregionMenus -Add and Edit(same functionality as that of buttons).SelectionMode =”Single”

Clicking the “Help…” link will display a dialog window (see additional slide).

Enable Add Account group when no record is selected .OnClick open the Add dialog of Account Group

Enable Edit Account group when one and only one record is selected by the user. On click open the Edit dialog of Account Group

Accounts Set Up (account groups: Help dialog)

The Help with account groups set up window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

The “OK” button is always enabled. When selected, the dialog window is closed.

Instructions are presented here the inform the user how to set up account groups using the table, associated buttons and controls.

Accounts Set Up (account groups: add account group dialog)

The Add account group dialog window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window The Add can be invoked using the rowMenu.

The “Cancel” button is always enabled.When the “Cancel” button is selected, the dialog window will be closed.

The “OK” button is only enabled when the required fields are properly completed.

When the “OK” button is selected, the Processing changes dialog window will be displayed and the dialog window will be closed.

This inset demonstrates the date selector control.

The “Account group effective date” selector allows the user to choose a date. Date selections are limited to all current and future dates. The current date is preselected. This field is required.

The “Account group purpose” drop down list box allows the user to choose a purpose for the account group. The list box is sorted in alphabetical order. The first entry is preselected. This field is required. Check section 2.2.4.1 in the document .

The “Account group number” text entry field allows the user to enter a number for the account group. Whole numbers are accepted. This field is required.Data Type : Integer. Max length : 9

The “Account group name” text entry field allows the user to enter a name for the account group. This field is required.Data Type : Char. Max length : 60

Accounts Set Up (account groups: edit account group dialog)

The Edit account group dialog window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.. This can also be invoked using the rowMenu/SubregionMenu

The “Cancel” button is always enabled.

When the “Cancel” button is selected, the dialog window will be closed.

The “OK” button is only enabled when the required fields are properly completed.

When the “OK” button is selected, the Processing changes dialog window will be displayed and the dialog window will be closed.

The “Account group effective date” is displayed for reference only.

The “Account group purpose” is displayed for reference only.

The “Account group number” is displayed for reference only.

The “Account group name” text entry field allows the user to edit the name of the account group. This field is required. Data Type= CHAR . Max length = 60.

Accounts Set Up (accounts)

The Accounts table displays only the shown columns. The default order of the columns is as shown. The table is initially sorted by Number. The table permits nested sorting. None of the columns is editable. Two rowMenu/SubregionMenus -Add and Edit (same functionality as that of buttons) .SelctionMode =”Single”

Clicking the “Help…” link will display a dialog window (see additional slide).

Enable Edit Account when one and only one record is selected by the user.Onclick open the Edit dialog of Account

Enable Add Account when no record is selected .OnClick open the Add dialog of Account

Accounts Set Up (accounts: Help dialog)

The Help with accounts set up window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

The “OK” button is always enabled. When selected, the dialog window is closed.

Instructions are presented here the inform the user how to set up accounts using the table, associated buttons and controls.

Accounts Set Up (accounts: add account dialog) The Add account dialog window is a modal

window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

The “Cancel” button is always enabled.

When the “Cancel” button is selected, the dialog window will be closed.

The “OK” button is only enabled when the required fields are properly completed.

When the “OK” button is selected, the Processing changes dialog window will be displayed and the dialog window will be closed.This inset demonstrates the date selector

control.

The “Account effective date” selector allows the user to choose a date. Date selections are limited to all current and future dates. The current date is preselected. This field is required.

The “Account number” text entry field allows the user to enter a number for the account. Whole numbers are accepted. This field is required. DataType =Char Maxlength = 3

The “Account group name” text entry field allows the user to enter a name for the account. This field is required. Datatype=Char Maxlength = 60

Accounts Set Up (accounts: edit account dialog) The Edit account dialog window is a modal

window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.This can be invoked using the rowMenu/SubregionMenu

The “Cancel” button is always enabled.

When the “Cancel” button is selected, the dialog window will be closed.

The “OK” button is only enabled when the required fields are properly completed.

When the “OK” button is selected, the Processing changes dialog window will be displayed and the dialog window will be closed.

The “Account effective date” is displayed for reference only.

The “Account number” is displayed for reference only.

The “Account name” text entry field allows the user to edit the name of the account. This field is required.Datatype =Char Maxlenth =60

Accounts Set Up (account group – role – account combinations)

The Account group – role – account combinations table displays only the shown columns. The default order of the columns is as shown. The table is initially sorted by Account group, then by Role, and then by Account. The table permits nested sorting. None of the columns is editable.Two rowMenu/Subregion Menus -Add and Remove combination (same fucntionality as that of buttons).SelectionMode =”Multiple”

Clicking the “Help…” link will display a dialog window (see additional slide).

Enable when one or more than one record is selected .Onclick open the confirmation dialog

Enable Add Combination when no record is selected .OnClick open the Add dialog of Add combination

Account Group column is having concatenated ACCT_GROUP_NUM, PART_PURPOSE & ACCT_GROUP_NAME

Account column is having concatenated Account_Num and Acct_Name

Accounts Set Up (account group – role – account combinations: Help dialog)

The Help with account group – role – account combinations set up window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

The “OK” button is always enabled. When selected, the dialog window is closed.

Instructions are presented here the inform the user how to set up account group – role – account combinations using the table, associated buttons and controls.

In order to Add the record click this button which will invoke the RESTful service

to fetch eligible Account Groups [Section 2.2.8.1(a)]

Accounts Set Up (account group – role – account combinations: Onclick of Add)

If there are no eligible Account Groups fetched by

the RESTful service [Section 1.1.1], then throw

the error message as shown

If eligible Groups are found show the add dialog

Accounts Set Up (account group – role – account combinations: Add)

• Account Group drop-down is enabled

• No values are preselected

•Account Group column is having concatenated ACCT_GROUP_NUM, PART_PURPOSE & ACCT_GROUP_NAME

• Roles dropdown list is disabled until a valid Account Group is selected by the User

• Accounts dropdown list is disabled until a valid Account Group and Role values are selected by the User

• OK button is disabled until all mandatory fields are provided by the User.

• Cancel button is preselected by default.

Accounts Set Up (account group – role – account combinations: Add)

The “Cancel” button is always enabled.When the “Cancel” button is selected, the dialog window will be closed.

• Account Group dropdown list provides the eligible Group values that can be added

• Upon selecting a valid value from this list will invoke the RESTful service to fetch the eligible Roles for the selected Group. [Refer section 2.2.8.1(c)]

• While fetching the eligible Roles for the selected Group, show the Progress Bar “Loading Roles”

•Progress Bar shall be hidden upon completing the request

•If there are no eligible Roles found for the selected Group, throw the error dialog “No eligible Roles found for addition”

Accounts Set Up (account group – role – account combinations: Add)

• If there are valid Roles for the selected Group, show them in the dropdown list

• Enable the Roles drop down list

• No values are preselected

• ‘Account’ dropdown list will be disabled until a valid Role value is selected by the User

Accounts Set Up (account group – role – account combinations: Add)

• While fetching the eligible Accounts for the selected Group & Role, show the Progress Bar “Loading Accounts”

•Progress Bar shall be hidden upon completing the request

•If there are no eligible Accounts found for the selected Group & Role, throw the error dialog “No eligible Accounts found for addition”

• Role dropdown list provides the eligible Role values that can be added

• Upon selecting a valid value from this list, invoke the RESTful service to fetch the eligible Accounts for the selected Group & Role. [Refer section 2.2.8.1(d)]

Accounts Set Up (account group – role – account combinations: Add)

• If there are valid Accounts for the selected Group,and Role show them in the dropdown list

• Enable the Accounts drop down list

• No values are preselected

Accounts Set Up (account group – role – account combinations: Add)

• User must select a valid value for Accounts, from the drop down list, inorder to enable the OK button for addition

•Account column is having concatenated Account_Num and Acct_Name

Accounts Set Up (account group – role – account combinations: Add)

The “Cancel” button is always enabled.When the “Cancel” button is selected, the dialog window will be closed.

• When all mandatory fields are filled in with valid values, the OK button will be enabled for submitting the ADD request

Accounts Set Up (account group – role – account combinations: Add)

The “Cancel” button is always enabled.When the “Cancel” button is selected, the dialog window will be closed.

• At any point before submission, If there are any changes made to the selected value of Account Group the workflow repeats, refreshing the “Role” values and disabling the “Account”.

•At any point before submission, if there are changes made to the selected value of Role, the workflow repeats, refreshing the ‘Account’ values.

Accounts Set Up (account group – role – account combinations: Add)

This inset demonstrates the date selector control.

Accounts Set Up (account group – role – account combinations: remove combination dialog)

The “No” button is always enabled.

The “No” button is the default “submit” button.

When the “No” button is selected, the Remove combination dialog window will be closed.

The “Yes” button is always enabled.

When the “Yes” button is selected, the changes will be saved to the database. The Remove combination dialog window will be closed and the “Processing changes” dialog window will be displayed.

The Remove combination dialog window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window. Can be invoked using rowMenu/SubregionMenu. Focus is initially placed on the “No” button.

Accounts Set Up (processing changes)

The Processing changes dialog window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

This dialog window remains visible until the changes are processed…then the “Changes processed” dialog window is displayed.

See additional versions below for use with the other dialog windows on the page.

Accounts Set Up (changes processed)

The Changes processed dialog window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

Focus is initially placed on the “OK” button.

The “OK” button is always enabled.

The “OK” button is the default “submit” button.

When the “OK” button is selected, the Changes processed dialog window will be closed.

If any other dialog windows remain open, they should also be closed when the user clicks the “OK” button (e.g., Add combination, Add account, Edit Account, Add account group, Edit account group, etc). That is, whenever the changes are processed (without error), the user is returned to the main page.

See additional versions below for use with the other dialog windows on the page.

Accounts Set Up (error processing changes)The Error processing changes dialog window is a modal window. The page is grayed out behind the modal window in order to focus the user’s attention on the dialog window.

Focus is initially placed on the “OK” button.

The “OK” button is always enabled.

The “OK” button is the default “submit” button.

When the “OK” button is selected, the dialog window will be closed and the specific error messages will be displayed (see additional slides).

See additional versions below for use with the other dialog windows on the page.

Accounts Set Up (errors displayed)

Any errors returned from the server when changes were submitted to the database are shown here.