Solutions from SAP SAP Business One 2005 SP01 User Interface Standards and Guidelines January 2006
Table of Contents Icons... 5 Typographic Conventions... 5 1. Overview... 6 2. General Issues... 6 2.1 About SAP Business One... 6 2.2 About This Document... 6 3. SAP Business One Structure... 7 3.1 The Main Window... 8 3.2 SAP Business One Main Menu... 10 4. GUI Controls... 14 4.1 Control Overview... 14 4.2 Basic Data Controls... 16 4.2.1 Text Field... 16 4.3 Basic Selection Controls... 19 4.3.1 Check Box... 19 4.3.2 Checkbox with Three States... 21 4.3.3 Radio Button... 23 4.3.4 List Box... 25 4.3.5 Choose from List (List of <list type>)...28 4.3.6 Choose From Tree... 31 4.4 Buttons... 34 4.4.1 Command Button... 34 4.4.2 Back Arrow Icon... 37 4.4.3 Graph Icon... 40 4.4.4 Image Browse Icon... 43 4.4.5 Link Arrow Icon... 45 4.5 Complex Data Controls... 48 4.5.1 Table... 48 4.5.2 Hierarchical Table... 58 4.5.3 Row Types... 61 4.5.4 Tree Control... 64 4.5.5 Tree-Table Control... 66 4.6 Advanced Selection Controls... 69 4.6.1 Account Selector... 69 4.6.2 Business Partners Selector... 72 4.6.3 Date Range Selector... 73 4.6.4 Extended Checkbox... 74 4.6.5 Item Selector... 77 January 2006 2
4.6.6 Properties Selection Field... 78 4.7 View Controls... 80 4.7.1 Tabstrip... 80 4.7.2 Nested Tabstrip... 82 4.7.3 Drawers... 83 4.7.4 View Selector... 85 4.8 Window Controls... 87 4.8.1 Window Title Bar... 87 4.8.2 Menu Bar and Drop-Down Menus... 90 4.8.3 Context Menu (Right-Click Menu)... 97 4.8.4 Toolbar... 99 4.8.5 Window Scroll Bar... 101 4.8.6 Tool Tip... 102 4.8.7 Status Bar... 104 5. Graphic Design Guidelines... 106 5.1 Screen Resolution... 106 5.2 Fonts... 106 5.3 Colors... 107 5.4 Window Layout... 113 5.5 Terminology... 119 5.6 Labeling Conventions... 120 5.7 Command Buttons... 122 5.8 Arranging the Information in a Window... 123 6. Typical Screens... 126 6.1 Add/Find Window... 126 6.2 Choose from List Window (List of <List Type>)... 129 6.3 Choose from Tree Window... 132 6.4 Filter Table Window... 134 6.5 Sort Table Window... 137 6.6 Setup Window (NOE = New Object Entry)... 139 6.7 Form Settings... 141 6.8 Row Details... 144 6.9 Message Window... 146 6.10 Print Options Messages... 150 6.11 Property Selection Window... 151 6.12 Report Window... 153 6.12.1 Hierarchical Reports... 155 6.13 Selection Criteria Window... 157 6.14 Wizard... 161 7. General Considerations... 166 January 2006 3
7.1 Adding a New Feature... 166 7.2 System Messages... 168 January 2006 4
Icons Icon Meaning Caution Example Note Recommendation Syntax Typographic Conventions Type Style Example text Example text EXAMPLE TEXT Example text EXAMPLE TEXT Example text <Example text> Description Words or characters that appear on the screen. These include field names, screen titles, pushbuttons as well as menu names, paths and options. Cross-references to other documentation. Emphasized words or phrases in body text, titles of graphics and tables. Names of elements in the system. These include report names, program names, transaction codes, table names, and individual key words of a programming language, when surrounded by body text, for example, SELECT and INCLUDE. Screen output. This includes file and directory names and their paths, messages, source code, names of variables and parameters as well as names of installation, upgrade and database tools. Keys on the keyboard, for example, function keys (such as F2) or the ENTER key. Exact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation. Variable user entry. Pointed brackets indicate that you replace these words and characters with appropriate entries. January 2006 5
1. Overview The User Interface Standards and Guidelines provide best practices for designing the SAP Business One interface. This document describes the structure and look of the interface and the rules used to execute the actions that affect the system. By following these guidelines, developers, partners and product managers can improve the quality and consistency of the application. The document includes the most updated and advanced GUI design rules and recommendations. It also includes a host of relevant GUI information, including a glossary, case studies, re-usable components, and international support standards. To achieve the desired level of consistency, usability, and functionality, it is necessary that all the relevant aspects described in this document are taken into account to maintain a high level of quality in the product. 2. General Issues 2.1 About SAP Business One SAP Business One application has a default font. The user may select another font size and style. All text, including text controls, will change automatically to the new font selected by the user. If the font selected by the user is larger than the default font, the control s size may change accordingly. Many controls can be accessed via a mnemonic. The mnemonic is implemented by underlying one of the letters in the control s label. Clicking Alt+<mnemonic> is equal to clicking the control. The mnemonic should be unique within the window. There are more functions which need mnemonics than there are keys on the keyboard. Therefore, some of the functions are not implemented in the application. Each control should be assigned with two information types: Description Text displayed in the status bar when the mouse cursor is placed over the control. The Description Text should be informative and describe the meaning of the control shortly. System Information (formerly known as Debug Information) additional internal information that is also displayed in the status bar, if the View System Information option is turned on. 2.2 About This Document This document represents the desirable guidelines. Some of the recommendations are still not fully implemented in the application. All fonts mentioned in this document are the SAP Business One default fonts. The user may change font style and size. All sizes mentioned in this document refer to the default font size. If the user chooses a different font size, all controls will be resized accordingly. Position and direction guidelines in this document refer to left-to-right languages. If a right-to-left language is used, directions are inverted. January 2006 6
3. SAP Business One Structure SAP Business One is structured with three basic types of windows: The main window Primary and subordinate windows (forms) Message Boxes The SAP Business One Main Window contains all main functions of the application. It is the central place from where the user initiates activity for working with SAP Business One. In other primary windows (forms), the user may enter additional data, make choices or perform actions. The user is also informed of errors or consequences of actions. The control elements are placed into the work area of the various windows to perform specific tasks or functions. Some elements serve basic window handling properties, and some of them are specific to SAP Business One. Subordinate windows appear as a result of the user's actions or to supplement a primary window. There may be simultaneous subordinate windows open, but actions can only be performed in one window at any given time. January 2006 7
3.1 The Main Window The Main window opens automatically upon opening SAP Business One. The following components appear exclusively on the SAP Business One Main Window upon opening the application: Main menu Menu bar Toolbar Pull-down menus Status bars The following components appear in the SAP Business One Main Window when working with the application: Main Menu Menu options Submenus Sub windows (Forms) January 2006 8
January 2006 9
3.2 SAP Business One Main Menu The Main Menu, previously referred to as the command center, offers three principal modes to work with the application. Each of these modes is located on its own tab: Modules Drag & Relate User Menu Visual Specifications Main Menu The Main Menu can also be accessed by clicking the window pull-down menu and choosing Main Menu, or by using the shortcut CTRL + O. January 2006 10
Main Module The module items are left aligned. Each module is framed by a gray line (RGB = 173, 173, 140). The frame size is: 326 x 20 pixels. Background color of the module is off-white (RGB = 239, 239, 222). Each module has a related icon. Icons are centered one above the other. The maximum icon s height is 18 pixels. The look of each module depends on its state: State Specification Example Regular Font color black Font & size Arial Bold 10 Rollover Font color black Font & size Arial Bold 10 The strip is colored in dark gray (RGB = 173, 173, 140) January 2006 11
Selected Module Font color black Font & size Arial Bold 10 The frame is colored in dark yellow (RGB = 255, 204, 0) The look of each sub-menu depends on its state: State Specification Example Regular Font color black Font & size Arial Bold 7 Opened Rollover Font color black Font & size Arial Bold 7 Icon is changed to Font color black Font & size Arial Bold 7 The frame is colored in dark yellow (RGB = 173, 173, 140) The look of each menu item depends on its state: State Specification Example Regular Font color black Font & size Arial Bold 7 Rollover Selected Item Font color black Font & size Arial Bold 7 The strip is colored in dark yellow (RGB = 173, 173, 140) Font color black Font & size Arial Bold 7 The strip is colored in dark yellow (RGB = 173, 173, 140) Guidelines for Adding Menu Items Place items according to the hierarchic structure within a respective module. Position the menu item considering its usage: How frequently is it used? Where is it used in the work flow? January 2006 12
Frequently used items should be placed before less frequent items. Items that are logically successive to other items should be placed directly below them. Setup windows are located in the Administration module, in the Setup subfolder of each relevant module. Every module contains its respective reports. In addition, all reports are also located in the Reports module. Note that the Main Menu appears in a closely related form, in the Modules pull-down menu, Authorizations window, Drag and Relate menu and the Manage User Fields window. For details regarding the main window components, see: Toolbar Status Bar Menu Bar and Drop-down menus January 2006 13
4. GUI Controls 4.1 Control Overview The controls in this chapter are organized according to their function: Basic Data Controls Basic Selection Controls Buttons Complex Data Controls Advanced Selection Controls View Controls Window Controls Text Field Check Box Check Box with 3 States Radio Button List Box Choose from List (List of <type>) Choose From Tree Command Button Back Arrow Button Graph Button Image Browse Button Link Arrow Button Table Table Hierarchical Table Row Types Tree Control Tree-Table control Account Selector Business Partners Selector Date Range Selector Extended Checkbox Item Selector Properties Selection Field Tabstrip Nested Tabstrip Drawers View Selector Window Title Bar Window Scroll Bar Menu Bar and Drop-Down Menu Context Menu (Right-Click Menu) Toolbar Tool Tip Status Bar January 2006 14
January 2006 15
4.2 Basic Data Controls 4.2.1 Text Field General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Business Partners > Business Partners Master Data When to use? Text fields are used when a single value is to be displayed or entered by the user. General Description A text field is used for data entry of a single value. The format of the data value may be textual, numeric, currency, and so on. A text field may be in one of two modes: Enabled: Allows the user to type in a value. Disabled: Used to display a value, but with no user entry. When the user moves to the next field, validity checks are performed. The entered value is checked against the required format of the field, in addition to any other specific constraints that may exist for this field. Text field labels are part of the control. Text field must have a label, which helps identify the purpose of the text field and provides a means of indicating when the field is disabled. If the field contains text that is longer than the field s length, a Tool Tip is dynamically added to the field, displaying the full text. Visual Specifications Field Shape: Rectangular box, with a single-row (1-pixel wide) frame. Field size: Height = 14 pixels. Width depends on the field s content and the size of an adjacent field (see more on field sizes in Window Layout). A white row connects the label to the field (see more on labels, in Labeling Conventions). Color Specifications: Mode Normal (Write enabled) Read only Specification Box color: off-white (RGB = 253,253,243), Frame color white. Box color: gray (RGB = 239,235,222), Frame color - white. January 2006 16
Field in focus Box color and frame: yellow (RGB = 255,247,156) The text color is black. When selected, the text color is white, with windows selection color as background. The description text of every field should contain a short description of the field, and any additional information, such as format or constraints. Examples: Discount (Numeric 19.6): Specifies the number of digits, and number of decimal points. Customer Code (15 characters) Document Number (Number between 1 and 1000) Document Date (Date) Text alignment within the field should be adjusted to the field type. Textual data should be left-aligned, while numerical fields should be right-aligned. Note: Numerical fields may contain non-numeric characters (for example, price field contains the currency, such as USD 100.00), but they are still considered as numbers and should be right-aligned. GUI Attributes The following attributes should be considered when creating a Text Field: Label Data format (text, numeric, date, currency, so on) Alignment: left or right Functionality: read or read + write Constraints (optional, for example: numeric, alpha-numeric) Maximal input length Default value (optional) Description text System information ToolTip (added dynamically) Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the field) Click in field System Response The field s Description Text is displayed in the status bar. If the field is shorter than the text it contains, a ToolTip is displayed to show the full text. The field color changes to yellow. The Description Text is displayed in the Status Bar. If the field is empty, the text cursor is placed at the beginning of the field. If the field already contains text, the text is selected (displayed as white text over dark-blue background). January 2006 17
User Action Double-click in a field Type in field Exit field System Response Selects the word at the mouse position. If the text is selected, typing replaces the selected text. If no text is selected, typed characters are inserted at the cursor position. If the typed-in text is longer than the visual field, the field s text is scrolled to the left, so that the current entry point is visible. In case of a long text, a Tool Tip is dynamically added to the field, displaying the full text of the field. If the text length reaches the maximal input length, no typing is allowed (no response to typed-in keys). In this case, an error message is displayed in the status bar. A validity check is performed, comparing the field data with the required format and constraints. If errors are found, a message is displayed in the Status Bar. The cursor remains in the field. If no errors are found, the field color goes back to normal. Keyboard Shortcuts The field conforms to standard Windows text entry conventions: Backspace and Delete erase one character to the left or to the right of the cursor position. Left/Right Arrow keys move the cursor one position to the left/right. If the text length is longer than the visual field, clicking the left/right arrow at the left/right edge of the field scrolls the text to the required direction. Shift + Left/Right arrow selects the text along the cursor movement. Home/End moves the cursor to the beginning or to the end of the text respectively. January 2006 18
4.3 Basic Selection Controls 4.3.1 Check Box General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Business Partners > Activity When to use? Checkboxes support options that are either ON or OFF. Checkboxes are used only when both states of the choice are clearly opposite and unambiguous. More than one checkbox is used when multiple selections are required. General Description Checkboxes support options that are either ON or OFF. A checkbox may be in one of two modes: Selected (ON): Allows the user to select a value or operation. Deselected (OFF): Used to display a value or operation, but with no user selection. When the checkbox is selected, a check mark appears in the box. When it is not selected, the checkbox is empty. A checkbox appears as a square box with an accompanying label. A group of checkboxes enables the user to select several options. Unlike a radio button, more than one checkbox can be selected at the same time, permitting multiple selections. Visual Specifications Use this shape: - Selected - Deselected Size: 14x14 pixels The label is placed 4 pixels to the right of the box. (For more information about labels, see Labeling Conventions). One of the letters in the label is underlined. This letter is used as a mnemonic for this checkbox. Typing Alt+<mnemonic> is equal to clinking on the checkbox. The mnemonic should be unique within the window. For more information about labels, see Labeling Conventions. Colors: State Specification January 2006 19
State Specification Enabled Text color dark gray (RGB = 74, 77, 74) Disabled GUI Attributes The following attributes should be considered when creating a checkbox: Label Mnemonic Functionality: read or read + write Default value (optional) Description text System information Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the checkbox) Click the checkbox Click the checkbox s label System Response The checkbox s Description Text is displayed in the status bar. The checkbox toggles its state. The checkbox toggles its state. Keyboard Shortcuts Alt + <underlined letter> toggles the checkbox state, just like clicking the checkbox. January 2006 20
4.3.2 Checkbox with Three States General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: In the Print Layout Designer, when you select multiple fields, the Properties window will show the 3 rd (ambiguous) state, in case not all selected fields have the same value for a specific checkbox. Note: This control is not available in the User Interface API, Version 2005. When to use? Check boxes with 3-state support options that are either ON, OFF, or Ambiguous. Use this control instead of a regular checkbox, when you need to support a third, Ambiguous state. An Ambiguous state results when the checkbox represents a collection of objects, some of which are ON, others are OFF. The mutual checkbox is therefore ambiguous. General Description In case a checkbox represents the state of several objects, where some of them are ON and some are OFF, the third state of the checkbox is Ambiguous. This situation defines a third state Ambiguous. When a checkbox in the ambiguous state is clicked, it toggles between two states: ON and OFF. In this situation, we recommend that the checkbox will toggle between the three states: ON, OFF and then back to Ambiguous. Visual Specifications Use this shape: - Selected - Deselected - Ambiguous For all other visual specifications, see Checkbox (pg. 19) GUI Attributes Label Mnemonic Functionality: read or read + write Default value (optional) Description text System information January 2006 21
Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the checkbox) Click the checkbox in the ON or OFF state Click the checkbox in the Ambiguous state Click the checkbox s label System Response The checkbox s Description Text is displayed in the status bar. The checkbox toggles its state from ON to OFF and vice versa. The checkbox toggles its state from ON to OFF and vice versa. (The checkbox should toggle between the three states: ON, OFF and then back to Ambiguous). Same as clicking the checkbox image Keyboard Shortcuts Alt + <underlined letter> toggles the checkbox state, just like clicking the checkbox. January 2006 22
4.3.3 Radio Button General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Sales A/R > Sales Reports > Sales Analysis When to use? When representing a set of choices for a particular property, only one of these choices may be selected at any time. Note: To allow selection of multiple options, use a Checkbox instead. General Description A radio button represents a single choice within a group of radio buttons (at least 2 radio buttons). Only one option in the group can be set. Radio buttons appear as a set of small circles. When a radio button is selected, a dot appears in the middle of the circle. When the choice is not the current setting, the circle is empty. The user clicks one of the radio buttons to select it and deselect other radio buttons in the group. A radio button may be in one of two modes: Selected: Shows the selected value or operation. Deselected: Used only to display the deselected value or operation. Note: A List Box may be used as an alternative to Radio Buttons, especially when the space is limited. Visual Specifications Use this shape: Selected Deselected Button size: 14x14 pixels The label is placed 4 pixels to the right of the box. (For more information about labels, see Labeling Conventions). One of the letters in the label is underlined. This letter is used as a mnemonic for this radio button. Typing Alt+<mnemonic> is equal to clinking the radio button. The mnemonic should be unique within the window. Group Label: A group label may be added to the radio buttons to add a general explanation of the purpose of the radio buttons. The group label should be placed to the left of the uppermost radio button: January 2006 23
The radio buttons can be arranged vertically (one below the other) or horizontally (one next to the other). The vertical arrangement is preferred. Use a horizontal arrangement only when there is no room for vertical arrangement, and when only two radio buttons are in the group. GUI Attributes The following attributes should be considered when creating a radio button: Label for each button Mnemonic for each button Group label Default value. Note that one of the buttons in the group should be selected by default. Description text for each button System information for each button Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the radio button) Click the radio button Click the radio button s label System Response The radio button's description text is displayed in the status bar. The radio button is selected. All other radio buttons in the group are deselected. A dot appears in the circle. The label is displayed in the status bar (see Status Bar). The radio button is selected. All other radio buttons in the group are deselected. A dot appears in the circle. The label is displayed in the status bar (see Status Bar). Keyboard Shortcuts Alt + <underlined letter> selects the radio button and deselects all other radio buttons in its group. January 2006 24
4.3.4 List Box General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Inventory > Item Master Data When to use? When the user needs to select one value from the list. When the potential value list is short, usually up to 20 items. When the user selection can be based on the item s name alone. See also: Choose from List. General Description A List Box displays large numbers of choices that vary in number or content. It allows the user to select one value from a list of values. When the field is enabled, the user clicks the field to display a drop-down list of values, and then selects one of these values to enter it into the field. Some lists may be defined or extended by the user, to permit the user to add items to the list. Such a list will have a Define New item, allowing the user to define additional items. Entering data is not allowed in this field. If the field contains text that is longer than the field s length, a Tool Tip is dynamically added to the field, displaying the full text. Visual Specifications Field Shape: Same as Text Field, plus a symbol to the right of the field. Field Size: Height = 14 pixels. Width depends on the field s content and the size of adjacent field (see more on field sizes in Window Layout). A white row connects the label to the field. For more information about labels, see Labeling Conventions). Field Color: Mode Normal (enabled) Specification Box color: Off-white (RGB = 253,253,243) Frame color: white. Read Only Box color: gray (RGB = 239,235,222), Frame color: white. The list symbol does not appear when the field is disabled. January 2006 25
Mode Specification Field in focus Box and frame color: Yellow (RGB = 255,247,156) When text is selected, the text color is white over MS Window s selection color. List is open The value list is displayed under the field. The list background color is Off-white (RGB=253,253,243) The list border is black, 1-pixel wide. Each item in the list occupies a strip of 16 pixels high. The strip of a highlighted item is dark yellow (RGB=255, 207, 49). If the list is longer than 10 items, a scrollbar is added at the right side of the list. Text color is black. When selected, the text color is white, with the Windows selection color in the background. If the field does not have a default value, the first item in the list will be an empty row. If the list can be defined by the user, an additional item is added at the end of the list: Define New. Selecting this item opens a window to define the list items. GUI Attributes The following attributes should be considered when creating a list box: Label List of values Alignment (left/right) Functionality: read or read + write Can the list be defined by the user: Yes/No Default value (optional) Description text System information ToolTip text (added dynamically) January 2006 26
Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the field) Click the field Click the the field when the list is displayed Click an item in the list Click an empty row in the list. Type a letter when the list is open Click Define New in the list Exit field System Response The list box s description text is displayed in the status bar. If the list box is shorter than the text it contains, a ToolTip is displayed to show the full text. The field color changes to yellow. The list is displayed. If the field already contains a value, this value is highlighted; otherwise, the first item is highlighted in the list. The field is closed. The list is closed. The clicked item is entered in the field. The list is closed. The field is cleared. The list is scrolled to the first item starting with this letter. The list is closed. A Setup window is displayed. After adding the new item, the newly added item is written in the field. The field color goes back to normal. Keyboard Shortcuts Down arrow opens the list. Up/Down arrows: When the list is open, highlights the next/previous item in the list. Enter closes the list and copies the highlighted item to the field. January 2006 27
4.3.5 Choose from List (List of <list type>) General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Sales A/R > Sales Quotation This control is built from multiple controls. When to use? When the user must select one value from a list. When the potential value list is long, more than 20 items. When the user selection requires additional information (other than the item s name). When the potential value list is short, it is recommended to use a List Box. Note: In certain situations it may be preferable to create a combination of a List Box and a Choose from List: Use this combination when the potential number of items in the list may change. For example, a list defined by the user may be small at first, but it grows significantly over time. General Description The control allows the user to select a value from a list of values that appears in a different window. This control is a combination of a text field and the Choose from List icon. The user may also type a value in the field, or click the icon to display the Choose from List window. The caption of the window is List of <list type>, according to the chosen list type (Business Partners, Item, so on). In case you want to avoid free text input by the user, make the field disabled and provide the Choose from List icon to allow only selection from a list of values. Some lists can be defined or extended by the user and the user may add items to the list. For such a list, the user is allowed to add additional items to the list from the Choose from List window. Visual Specifications Field Shape: Same as Text field, plus an icon attached to the right side of the field. Field size: Height = 14 pixels. Width varies, depending on the field s content and the size of adjacent field (see more on field sizes in Window Layout). A white line connects the label to the field (see more on labels, in Labeling Conventions). Colors: Mode Normal (enabled) Specification Box color - Off-white (RGB = 253,253,243), Frame color white. January 2006 28
Select Only Box color gray (RGB = 239,235,222), Frame color - white. Field in focus Box and frame color Yellow (RGB = 255,247,156) List button is selected The button graphics changes to look selected Text color is black. When selected, the text color is white, with Windows selection color in the background. A Tool Tip is attached to the icon (see more on Tool Tip content in Tool Tip). The Tool Tip should display: Row 1 Static Tool Tip: Choose from List Row 2 Target Tool Tip: Name of A list form that will be opened by this button (Dynamic Name) Example: GUI Attributes The following attributes should be considered when creating a Choose from List Control: Label List of values Alignment (left/right) Functionality: read or read + write Is the field editable: Yes/No Can the list be defined by the user: Yes/No Default value (optional) Description text System information Static ToolTip text Target ToolTip text Functional Specifications Operation Procedure User Action System Response January 2006 29
User Action Rollover (mouse cursor is over the field) Icon Rollover (mouse cursor is over the icon) Click the field Click the List icon Move to the next field when the field is empty Move to the next field when the field is being typed in System Response The description text is displayed in the status bar. A ToolTip is displayed. The field color changes to yellow. The icon changes to the chosen display. The Choose from List window is displayed. After the user selects a value in the window, the window closes and the selected value is displayed in the field. The Choose from List window is displayed. After the user selects a value in the window, the window closes and the selected value is displayed in the field. A validity check is performed to check that the value in the field is one of the values in the list. Yes: the field changes back to normal and the focus moves to another field. No: An error message is displayed in the Status Bar, and the Select from List window is displayed. Note: The Tab key is interpreted as an attempt to move to another field. A quick way to display the list is to place the cursor in the field, then press Tab to display the list. Keyboard Shortcuts All keys used to edit a Text Field are valid here too. When Tab is pressed in an empty field, it displays the Choose from List window. January 2006 30
4.3.6 Choose From Tree General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Business Partners > Business Partners Master Data > Payment System tab. 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? When a group of fields is related to each other in a hierarchical relation. When the user is allowed to fill each field individually, but a shortcut for selecting the whole group at once is required. General Description This control is implemented by a group of fields. Each field is either a Text Field or a List Box control. The fields are organized from top - down, indicating the hierarchical relations between them (An example of hierarchical fields: Country > Bank > Branch > Account No). Choosing a value for a field narrows down the available options for the field below it, as only values that match the hierarchy may be chosen (For example: after choosing a bank, the branch list box will contain only branches that belong to this bank). The Choose from Tree icon is used to display the Choose from Tree window, in which the user can see the whole hierarchical structure and pick a node. After selecting a node from the tree, the relevant field is filled with the chosen value, and all its ancestors are filled in accordingly (for example, after selecting a branch, the bank and country fields are also filled automatically to match the bank and country to which the branch belongs). Visual Specifications Each field, depending on its type, has the attributes of a Text Field or a List Box control. In addition, the Choose from Tree icon is located to the right of the uppermost field: A Tool Tip appears together with the icon (for more information on Tool Tip, see Tool Tip). The Tool Tip should dispaly: Row 1 Static Tool Tip: Choose From Tree Row 2 Target Tool Tip: Name of form that will be opened by clicking the icon (dynamic name) January 2006 31
GUI Attributes Depending on the field type, it has the attributes of a Text Field or a List Box control. Text Field attributes include: Label Data format (text, numeric, date, currency, and so on) Alignment: left/right Functionality: read or read + write Constraints (optional, for example: numeric, alpha-numeric) Maximal input length Default value (optional) Description text System information ToolTip (added dynamically) List Box attributes include: Label List of values Alignment (left/right) Functionality: read or read + write Can the list be defined by the user: Yes/No Default value (optional) Description text System information Tool Tip text (added dynamically) Additional Attributes: Tool Tip text on the Choose from Tree icon Functional Specifications Operation Procedure In addition to the operational procedure of each individual field (see Text Field or List Box): User Action System Response Selection of a value in a field The list of potential values in lower fields is narrowed down to conform the hierarchical relations. Rollover (mouse cursor is over the Choose from Tree icon) A Tool Tip is displayed January 2006 32
Click the Choose from Tree icon While the left mouse button is pressed, the button changes shape to a selected look. Then the Choose from Tree window is displayed. When a value is chosen in the window, this value defines a path of values, starting from the root of the tree down to the leaf. These values are displayed in the corresponding fields. Keyboard Shortcuts None January 2006 33
4.4 Buttons 4.4.1 Command Button General Description Visual Specifications GUI Attributes Functional Specifications When to use? To perform user actions, such as opening a window, closing a window, save data, display additional information, perform a calculation, and so on. General Description A command button is a rectangular control with a label that represents the action the button triggers. The user clicks the button to perform the action. When the user presses the mouse button, the input focus moves to the command button, the button display changes to its selected appearance. If the user moves the mouse pointer off the command button while the mouse button remains pressed, the command button returns to its original display. A command button may be in one of two modes: Enabled: Allows the user to click the button. Disabled: Used to display a non-selected action, with no option to perform it. A command button is disabled when an action in the same screen should activate it (for example: the Next button in a wizard will be disabled until all the actions in the screen are completed). For more information about command buttons usage and placement, see Graphic Design Guidelines Command Buttons. Visual Specifications Shape The button shape is rectangular. The inside of the rectangle is in a shape of a three-dimensional raised cylinder. Button Height: 19 pixels. Button Width: Depends on the length of its label. See more on button widths in Graphic Design Guidelines Command Buttons. One of the buttons in the window may be defined as the default button. This button is activated by choosing Enter. The default button is surrounded by a 1-pixel black frame: When clicked, the button looks selected Label The button should have a short and meaningful label, preferably one word. The label is written in black and its alignment is centered. One of the letters in the label is underlined. This letter is used as a mnemonic for this button. Typing Alt+<mnemonic> is equal to clicking the button. The mnemonic should be unique within the window. January 2006 34
Note: not all buttons have mnemonics. The main buttons of the window, such as OK and Cancel, do not have mnemonics. Tool Tip Usually, a button should not have a Tool Tip. A button may have, however, one or both of the following Tool Tips: Static Tool Tip (optional) - Full button name: If the button label is very long (potentially after translation), the button label is cut and appended with ellipsis. The full button label is dynamically added as Tool Tip. For example: Description (optional): A button may have, in addition to the label, a Description attribute: If the button operation is very complex and cannot be easily explained in a short label, the planner can decide to create a shorter label and add a description which will better explain what the button does. Example: Instead of these long buttons: Use shorter labels, and add the full text as Tool Tip: It is possible that a button s Tool Tip will contain both the button s full name and a description. In this case, the Tool Tip will span 2 lines. GUI Attributes The following attributes should be considered when creating a command button: Label Mnemonic Is it a default button (yes/no) Tool Tip text (optional) Tool Tip Description text (optional) System Information Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the checkbox) Click the button System Response The button s label/description is displayed in the status bar. The button changes its look momentarily to selected while the mouse is pressed. Then it goes back to its normal state. The button's designated action is performed. January 2006 35
Keyboard Shortcuts Alt + <underlined letter> activates the appropriate button. Enter activates the default button, if one is present. January 2006 36
4.4.2 Back Arrow Icon General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Reports > Inventory > Items List When to use? When a window opens a subordinate window, the back arrow allows the user to return to the parent window. For example, in a selection criteria window, the parent is the selection criteria window from which the user defines the filters that open a report window. The back arrow is located in the results window and is used to return to the selection criteria window to redefine the selection criteria filters. January 2006 37
General Description A button located on a subordinate window is used to navigate back to the primary parent window. Usage Example: Inventory > Inventory Reports > Items List Visual Specifications Use this icon: Icon Size: 22x20 pixels Locate the icon on the lower-left corner of the subordinate window: January 2006 38
The Back Arrow icon is accompanied by additional OK button. The OK button closes the report and the selection criteria windows and saves any changes to the report. The Back Arrow and OK could be accompanied by additional Cancel button only on editable forms. The Cancel button cancels any changes in the results window, closes the window and puts the selection criteria window in focus. A Tool Tip is attached to the button, saying: Back to Selection Criteria (see more on Tool Tip content in Tool Tip). GUI Attributes The following attributes should be considered when creating the Back Arrow icon: Tool Tip text System information Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the icon) Click the Back Arrow icon Click OK Click Cancel System Response A Tool Tip is displayed: Back to Selection Criteria" The back arrow moves down. Closes the window. Puts the parent Selection Criteria window in focus. Closes the report and the Selections Criteria window as well. If any changes were made to the report, they are saved. Closes the window. Puts the parent Selection Criteria window in focus. If any changes were made to the form, they are discarded. Keyboard Shortcuts None January 2006 39
4.4.3 Graph Icon General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Business Partners > Business Partner Master Data. When to use? To display additional data in a graph format. The graph may be related to a field (or field group), or to the whole window. General Description If the graph icon is related to a specific field (or field group), it is placed next to that field. If it is related to the whole window, it is located at the lower-right corner of the window. Clicking the graph icon opens a separate window containing additional information and a graph related to the specific field or to the whole window. January 2006 40
Visual Specifications Use this icon: Icon Size: 12x12 pixels Icon position: o If the graph relates to a field (or field group) it is positioned to the right of the field or field group: o If the graph relates to the whole window, it is located at the bottom-right corner of the window, 8 pixels from the window s edges: January 2006 41
A Tool Tip is attached to the icon (see more on Tool Tip content in Tool Tip). The Tool Tip should say: Row 1 Static Tool Tip: Show Graph Row 2 Target Tool Tip: Name of Graph (Dynamic Name) GUI Attributes Static Tool Tip text Target Tool Tip Text System Information Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the graph icon) Click the icon System Response A Tool Tip is displayed. When the mouse button is pressed, the graph color changes to. A graph window is displayed. Keyboard Shortcuts None January 2006 42
4.4.4 Image Browse Icon General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Human Resources > Employee Master Data window. When to use? To let the user load an image into a window, use the Image Browse icon to browse for the image. General Description The Image Browse icon is used to load an image into a designated area in a form. The icon opens a Browse File Open window. The images to be loaded must be placed under a pre-defined folder (this folder is defined by the Picture Folder in the General Settings). After an image is selected, it is loaded and displayed in the designated area. A Clear Image icon is added, to let the user delete the image. Visual Specifications To load an image, use this icon: After image is loaded, a Clear Image icon is added:. This icon does not appear until an image is loaded. Icon Size: 16x16 pixels Icon position: A Tool Tip is attached to each icon (see more on Tool Tip content in Tool Tip). The Tool Tip of the Image Browse icon should say Browse for Image. The Tool Tip of the Clear Image icon should say Clear Image. GUI Attributes Tool Tip text January 2006 43
System information Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over an icon) Click Image Browse icon Image selected in the Browse window Click Clear Image icon System Response A Tool Tip is displayed. A Browse window is displayed, located at the folder defined for pictures in general settings. If no picture folder was defined, an error message is issued. The image is displayed in the designated area. A Clear Image icon is displayed above the Image Browse icon. Image is removed from the window. Keyboard Shortcuts None January 2006 44
4.4.5 Link Arrow Icon General Description Visual Specifications GUI Attributes Functional Specifications Usage Example: Sales A/R > Sales Quotation When to use? When a field contains a reference to an object. Permits drilling down for more information about this object. General Description The Link Arrow icon accompanies a field containing an object reference. The field can be text field, list box, a cell within a table and so on. The link refers to the text displayed in the corresponding field. Upon clicking the dark yellow Link Arrow icon, a subordinate window opens with additional information relevant to the text. In the examples below, after clicking the Link Arrow icon, additional information appears in a new, subordinate window: January 2006 45
Visual Specifications Use this icon: Link Arrow icon size: 12x9 pixels. When the Link Arrow icon is attached to a field: A Tool Tip is attached to the Link Arrow icon (see more on Tool Tip content in Tool Tip).The Tool Tip should say: Row 1 Static Tool Tip: Link to Row 2 Target Tool Tip: Name of Object to be displayed (Dynamic Name) Example: When the Link Arrow icon is attached to a cell in a table: When the Link Arrow icon is pressed, its shape changes to selected arrow: January 2006 46
GUI Attributes Static Tool Tip text Target Tool Tip text System information Functional Specifications Operation Procedure User Action Rollover (mouse cursor is over the Link Arrow icon Click the Link Arrow icon System Response A Tool Tip should be displayed While mouse button is pressed, the Link Arrow icon shape looks selected. An additional window is displayed, showing more information about the object referenced in the field. Keyboard Shortcuts None January 2006 47
4.5 Complex Data Controls 4.5.1 Table Table Hierarchical Table Row Types General Description Visual Specifications GUI Attributes Functional Specifications When to use? When there is a limited number of records to be displayed simultaneously. To be able to see the details of the records, or to select one of them for further investigation or operation. When item names and other details of an item are to be displayed. To display a large amount of data in an organized manner in a relatively small space. General Description Tables are used to enter large amounts of data. A table has a layout similar to a spreadsheet table like Excel. A table is made of columns and rows. All cells in a column contain data of the same type, and each row is a data structure of the same type. For example, a row may represent a business partner, and the columns represent fields of the business partners. Each table has the following elements: The Header contains a name of the table (not necessarily header of the form) The column headers define the content of each column and are used for sorting as well. A selection button column selects a whole row. The selection column, if exists, is always the first one to the left. This column can also be used as a row numbering column. Row numbers usually correspond to one of the following: IDs in the database, OR: Sequential row number in the table (1 N) January 2006 48
The actual "table" or data area. Scroll bars vertical or horizontal (if necessary) Note: We highly recommend that the initial width of the table will be such that all columns will be visible without a horizontal scroll bar. For this purpose, you may ignore the requirement to leave extra 30% for each column title. Sorting A table can be sorted by one of its columns. An arrow sign ( or ) appears on the corner of the sorting column, to indicate an ascending or descending sort order. The user can sort the table by double-clicking any of the column headers. When the table is initially displayed, it should have a default sorting. Row numbers are necessary for any table where the sort order can be changed so that if a user sorts by Name, or some other column, then the user can restore the original sort order by sorting a row number. Table Cells Cells in a table may be editable or read-only. Rows can be added, deleted or duplicated. The commands to perform these actions are located in the Data menu, and in the Context menu. Typically, table cells contain numeric or alphanumeric text. However, there are more cell types available: Text: Text cell in an input table - the text can be edited. In an output table or lists the text is in a read-only mode and the user can only sort or filter it. Image: The cell displays an icon or image Link: The cell contains a link Button: The cell contains a button Input: The cell can be edited Dropdown list box: The cell contains a dropdown list box Checkbox: cell contains a checkbox. A table can be associated with the Row Details window, which contains detailed information on a row in a table and allows editing of row fields in a form. The user can customize the structure of each table, using the Form Settings associated with the window containing the table. There are several menu commands which are related to table handling: The Data menu contains row manipulation commands (add, delete, duplicate). The Data>Advanced sub-menu contains commands for specific windows (not all windows have commands in this sub-menu). The Goto menu contains the Row Details command. Cursor Position The cursor position always reflects the place which the user activated. January 2006 49