Presentation is loading. Please wait.

Presentation is loading. Please wait.

ICFS Annotated User Interface Design [Accounts Set Up]

Similar presentations


Presentation on theme: "ICFS Annotated User Interface Design [Accounts Set Up]"— Presentation transcript:

1 ICFS Annotated User Interface Design [Accounts Set Up]

2 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 to ] 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

3 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.

4 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

5 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 users 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.

6 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 users 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 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

7 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 users 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.

8 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

9 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 users 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.

10 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 users 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

11 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 users 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

12 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

13 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 users 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.

14 In order to Add the record click this button which will invoke the RESTful service to fetch eligible Account Groups [Section (a)] Accounts Set Up ( account group – role – account combinations: Onclick of Add )

15 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 )

16 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.

17 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 (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 )

18 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 )

19 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 (d)] Accounts Set Up ( account group – role – account combinations: Add )

20 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 )

21 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.

22 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.

23 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.

24 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 users attention on the dialog window. Can be invoked using rowMenu/SubregionMenu. Focus is initially placed on the No button.

25 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 users 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.

26 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 users 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.

27 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 users 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.

28 Accounts Set Up (errors displayed) Any errors returned from the server when changes were submitted to the database are shown here.


Download ppt "ICFS Annotated User Interface Design [Accounts Set Up]"

Similar presentations


Ads by Google