4. GUI Controls
4.6 Advanced Selection Controls
4.6.6 Properties Selection Field
General Description Visual Specifications GUI Attributes Functional Specifications
Usage Example: Reports > Sales and Purchasing > Sales Analysis
Note: This control is built from multiple controls.
Some of these controls are not available in the User Interface API, Version 2005.
When to use ?
• This control is used in the Selection Criteria windows to select objects based on their properties. • The query selects objects that have the properties defined by this control.
General Description
• Use this control to select multiple object properties, with the AND/OR relation between them. The control is composed of the Properties button.
• The field does not enable to enter data, it merely reflects the properties selected by the Properties
button.
• The Properties button displays a window that allows the user to select multiple options by a set of checkboxes. The user can define an AND or OR relationship between the options.
The text field contains one of the following:
When Text Field shows
No properties are selected or:
Ignore Properties is checked in the Properties window.
Ignore
All properties are selected
All Properties [<relation>] For example:
All properties [OR] Options selected with the
deselected Closed Properties Range button
The text is:
<n> Properties [<relation>] For example:
4 Properties [AND] Options selected with the
Closed Properties Range
button
The text is:
<n> Properties [<relation>] For example:
4 Properties [AND]
Visual Specifications
• The field has the usual specifications of a Text Field, when disabled. • The Properties button is attached to the left corner of the text field.
GUI Attributes
• Default value (optional) • Description text
• System information
Functional Specifications
Operation Procedure
User Action System Response
Rollover (mouse cursor is over the field)
Description Text is displayed in the status bar. Click the Properties
button.
The Properties Selection window is displayed. For details, see Properties Selection window. The window is displayed as modal.
When the window is closed, the text field is updated to reflect the selections made in the window. See the details in the
General Description.
Click the field No response (the field is disabled).
Keyboard Shortcuts
4.7 View Controls
4.7.1 Tabstrip
General Description Visual Specifications GUI Attributes Functional Specifications
When to use ?
• When the window cannot accommodate all required information, or is full. • When this information can be logically divided into several views.
• When the views are to be accessed in any random order (if a specific order is required, use a Wizard).
• Do not use tabs to select between mutual-exclusive alternatives. If selecting one view disables other views, use a different control to select the view, such as a List Box.
General Description
• A tabstrip control looks like an index card. It consists of two or more tab page elements (tabs), each labeled.
• Tab pages appear as subordinate windows.
• At any time one of the tabs is active and the information contained in them is displayed in the page below the tabstrip. The user navigates between the pages by clicking a tab.
• Each tab has a unique label. It is essential that this label is short, preferably one word, and meaningful.
• Each tab label has a mnemonic, which is a unique letter used as a shortcut to navigate to this tab. The shortcut letter is underlined. For example, letter G in General is used as a shortcut to the
General tab. Typing Alt+<mnemonic> is equal to clicking the tab.
Visual Specifications
• Active tab:
• Inactive Tab:
• The tab page has a 1-pixel white border.
Note: this border is NOT created automatically when using a Tabstrip control. You should add this border manually. Make sure the border is accurately aligned to the edge of the page and the Tabstrip.
• Tabstrip height: 19 pixels.
• The tab label is centered in the tab.
• The tabs in the tabstrip are not necessarily of the same width. Each tab should be wide enough to accommodate the tab caption (including translations). However, if the tabs have similar widths, it is recommended to make them all equally wide to make them look consistent.
• Do not use scrolling functions inside a tab page.
• Note that the number of tabs is limited by the space available on the window. The number of tabs should be limited to five or six. If the information does not fit on six tabs, another screen design should be considered, such as dividing the window into several windows.
• The tabs need not take the full width of the tab page. If there are fewer tabs, do not divide the full page width into tabs. Instead, leave space at the right side of the tabstrip:
GUI Attributes
For each tab in the tabstrip: • Tab label • Mnemonic • Description text • System information
Functional Specifications
Operation Procedure
User Action System Response
Rollover (mouse cursor is over a tab)
Description text is displayed in the status bar.
Click a tab The clicked tab becomes the active one. The page content is replaced by the content of the active tab.
Keyboard Shortcuts
4.7.2 Nested Tabstrip
General Description Visual Specifications GUI Attributes Functional Specifications
Usage Example: Sales – A/R > Sales Order > Form Settings Window
Note: This control is not available in the User Interface API, Version 2005.
When to use ?
• When a page in a Tabstrip has too much information to be displayed on one page, or it contains several groups of information which are not related.
• A Nested Tabstrip is not a recommended design and should be used sparingly. No more than one nesting level should be allowed, therefore never nest a tabstrip within another Nested Tabstrip.
General Description
A Tabstrip control, that is nested within a page of another Tabstrip. A nested tabstrip is like a Tabstrip, except for some visual differences.
Visual Specifications
• All visual specifications are just like the Tabstrip, except that the shape of nested tabs is different. • Active tab:
• Inactive tab:
GUI Attributes
Same as for Tabstrip: For each tab:• Tab label • Mnemonic • Description text • System information
Functional Specifications
Same as for Tabstrip.Keyboard Shortcuts
4.7.3 Drawers
General Description Visual Specifications GUI Attributes Functional Specifications
Usage Example: Financials > Chart of Accounts.
Note: This control is not available in the User Interface API, Version 2005.
When to use ?
• When the information in a window is divided into several subjects, each subject is represented by one drawer.
• It is not recommended to use this control. To divide a window, using a Tabstrip is preferable.
General Description
• The control looks like a set of drawers. Each drawer represents a set of information. Any time one drawer is opened and the information contained in it is displayed in the window.
• The user navigates between the drawers by clicking the drawer he wants to open.
• Each drawer has a unique label. It is essential that this name is short and meaningful, ideally one word.
Visual Specifications
• At any time, one drawer is open, and all others are closed:
• Open: Closed:
• The drawers can be stacked vertically on top of each other, or placed horizontally next to each other. The vertical arrangement is recommended.
• Vertical drawers should be placed on the left side of the window. • Horizontal drawers should be placed at the top-left corner of the window. • The drawer label is centered.
• Font: Tahoma 7. Text color: Dark gray (RGB=74,77,74)
GUI Attributes
For each drawer:• Label
• System information
Functional Specifications
Operation Procedure
User Action System Response
Rollover (mouse cursor is placed over a drawer)
Drawer’s description text is displayed in the status bar. Click a drawer The drawer is opened and all other drawers are closed.
The information contained in the open drawer is displayed in the window.
Keyboard Shortcuts
4.7.4 View Selector
General Description Visual Specifications GUI Attributes Functional Specifications
Usage Example: Purchasing-A/R > Purchase Order
Note: This control is built from multiple controls. Note: Do not use this control anymore!
When to use ?
• This control is used when an area in a window displays one of two alternative views. • Do not use this control anymore. Use a Tabstrip, a List Box or a Radio Button instead.
General Description
• The view selector selects between two alternative views. The user selects the view he wants to use and the other view becomes irrelevant.
• The control is made of a field and a selector that consists of two up/down arrows. The arrows are used to switch to the next/previous view.
• Clicking the arrow switches the view name in the field and the view itself in the area under the selector.
Visual Specifications
• The control conforms to the visual specifications of a Text Field. • The up/down selector arrows may be in two modes:
Enabled: Clicking the arrow will scroll one view up/down.
Disabled: Unable to click. On the first view the UP arrow is disabled, on the last view the DOWN arrow is disabled.
GUI Attributes
• Label • List of views • Default view • Description text • System informationFunctional Specifications
Operation ProcedureUser Action System Response
Rollover (mouse cursor is over a tab)
Description text is displayed in the status bar.
Click the field A list of options is displayed, allowing the user to pick the required option.
Click an enabled up/down arrow
Change the field content to the previous/next view. Change the view below the control accordingly.
Click a disabled arrow No action.
Keyboard Shortcuts