CRM UI Guidelines V1.7

UI Guidelines for CRM WebClient User InterfaceUI Guidelines for CRM WebClient User Interface

SAP CRM UI Concept Team:

Annett Hardt

Dietrich Mayer-Ullmann

Martin Schrepp

Patrick Fischer

Theo Held

Ingo Deck

UI Guidelines for SAP CRMWebClient User Interface

Version 1.7

13-August-2010

UI Guidelines for SAP CRM – Table of Contents

_________________________________________________________________________________________________________________________________________________________

Page 2 of 98

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changedwithout prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook,and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries,pSeries, xSeries, zSeries, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER,POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks orregistered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif areregistered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems,Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark ofSun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. MaxDB is a trademark ofMySQL AB, Sweden. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks orregistered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies.Data contained in this document serves informational purposes only. National product specifications may vary. The information in this document is proprietary to SAP. No part of this documentmay be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG. This document is a preliminary version and not subject to yourlicense agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP® product and is not intended to be bindingupon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time withoutnotice. SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other itemscontained within this material. This document is provided without a warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness fora particular purpose, or non-infringement. SAP shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result fromthe use of these materials. This limitation shall not apply in cases of intent or gross negligence. The statutory liability for personal injury and defective products is not affected. SAP has no controlover the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoeverrelating to third-party Web pages.

UI Guidelines for SAP CRM – Change Log

Change LogThis version of the guideline is primarily rounding off the previous version 1.6.

The major changes are (1) an improvement of the document structure and (2) some textual improvements where redundant or unnecessary statements have been removed. Regardingstructure, an additional chapter of forms has been inserted, but the contents of this chapter are the same as in the former section on forms within the Overview Page chapter of version 1.6. Sinceno rules have been changed in this version, the checklist for guideline-based UI checks (used for determining compliance with product standard usability) is not affected.


Table of Contents1. Introduction 8

2. Page Types 9

2.1. Home Page 92.1. Work Center Page 92.2. Search Page 92.3. Search Help Dialog Box 102.4. Overview Page 102.5. Freestyle Application Page 112.6. Edit Page 112.7. Value Help Dialog Box 122.8. Personalization Dialog Box 12

3. Header and Navigation Bar 13

3.1. Overall Design 133.2. Header Area 133.3. Navigation Bar 153.4. Navigation Scheme 17

4. Home Page, Work Center Pages, Reports Page 18

4.1. Overview 184.2. General Guidelines for Information Hub Pages 184.3. Home Page 214.4. The Work Center Page 234.5. The Reports Page 23

5. Overview Page 255.1. Overview 255.2. Changing information in an assignment block: 255.3. Basic Navigation Pattern: Save, Cancel, and Back 265.4. Work Area Title 265.5. Work Area Toolbar 275.6. Details Assignment Block 275.7. Assignment Blocks 285.8. Special Use Cases 31

6. Guidelines for Forms 32

6.1. Overview 326.2. Grid Layout 32


_________________________________________________________________________________________________________________________________________________________

Page 5 of 98

6.3. Layout in Edit and Display Mode 336.4. Grouping 336.5. Tab Order 346.6. Dynamic Screen Areas 346.7. Input Fields 346.8. Text Edit Fields 356.9. Tables in forms 366.10. Checkboxes and Checkbox Groups 366.11. Radio Button Groups 37

7. Advanced Search 397.1. Overview 397.2. Search Area 397.3. Result List 437.4. Saved Search 437.5. Central Search and Simple Search 447.6. Archive Search 457.7. Search Help 477.8. Smart Value Help 48

8. Dialog Boxes 49

8.1. Overview 498.2. Information Dialog Box 508.3. Data Loss Dialog Box 508.4. Confirmation Dialog Box 508.5. Input Helps 508.6. Personalization Dialog Boxes (Table, Simple, Complex) 518.7. Additional Input Required Dialog Box 52

9. Tables and Hierarchies 54

9.1. Overview 549.2. Editing Modes 559.3. Selection 579.4. Cross Dependencies in Appearance 589.5. Adding Empty Rows, Assignments and Other Objects 599.6. Overview of Function Buttons for Tables 619.7. Overview of Function Buttons for Hierarchies 619.8. Deleting Assignments and Objects 619.9. Sorting and Filtering 62


_________________________________________________________________________________________________________________________________________________________

Page 6 of 98

9.10. Additional Rules for Hierarchies 649.11. Table and Hierarchy Personalization 649.12. Defaults for Tables and Hierarchies 65

10. Guided Maintenance 67

10.1. Overview 6710.2. Visual Design 6710.3. Work Area Title and Work Area Toolbar 6810.4. Roadmap 6910.5. Roadmap Toolbar 7010.6. Content Area 7010.7. Guided Maintenance for object creation 7110.8. Design Recommendations 71

11. Buttons 73

11.1. Button Types 7311.2. Button Placement 7611.3. Tooltips 7711.4. Enabling and Disabling Buttons 7711.5. Order in Toolbars and in the Actions Column 78

12. Icons and Pictograms 83

12.1. Icons 8312.2. Pictograms 83

13. Scrolling 8413.1. General Behavior (Defined by Framework) 8413.2. Tables and Hierarchies 8413.3. Applets and Other Freestyle Elements 85

14. Messages 86

14.1. Message Bar Position and Behavior 8614.2. Messaging Elements 8714.3. Message Log Behavior 8714.4. Message Dialogs 8714.5. Messages in Tables 87

15. Personalization 89

15.1. What Does Personalization Mean? 89


_________________________________________________________________________________________________________________________________________________________

Page 7 of 98

15.2. Personalization Dialogs 8915.3. Launching a Dialog 9115.4. Examples 9115.5. Drag and Drop 9215.6. Usage of Application specific Personalization 93

16. Authorizations and User Interface Behavior 94

16.1. General rules 9416.2. Interface areas affected by Authorizations 94

17. UI Texts 96

17.1. Capitalization 9617.2. Message Texts 96

18. Accessibility 98

18.1. Overview 9818.2. Keyboard Support 9818.3. Support for Visually Impaired Users 9818.4. Screen Reader Mode 98

UI Guidelines for SAP CRM – Chapter 1 Introduction

_________________________________________________________________________________________________________________________________________________________

Page 8 of 98

1. IntroductionThis document provides an overview of the SAP CRM Web Client User Interface (UI).It contains the properties and principles of the SAP CRM Web Client UI that arealready committed and available.

Guideline changes that have been made are entered in a list at the beginning of thedocument; this list is maintained by the guideline editors.

The target groups of these guidelines are:

o Members of development, solution management, quality management, and userexperience teams should use this document to become familiar with the CRMWebClient user interface.

o Members of application development should use this document to learn aboutmandatory UI behavior, including UI look and feel, and use their discretionwherever degrees of freedom in UI construction are required.

o Members of quality management who have to plan or conduct acceptance testsfor SAP CRM should use this document. These guidelines serve as a definitivebasis for all the principles that have to be followed during testing.

How to read this document?

The information in the guidelines starts with general topics, followed by details.

The sections are organized with high-level topics like Page Types and NavigationSchema first, followed by the consecutive sections describing which building blocksand elements of the UI populate the various pages.

A section typically starts with one or more screenshots of a central UI element with ageneric explanation. The subsequent sections explain the detailed aspects of eachelement.

Note: While the purpose of using such a structure is to avoid redundancies as far aspossible, there are cases where different section structures were used.

Principles that are not directly associated with described UI elements or have more todo with a general UI building rule are listed in sections called General Principles.

Recommendations, with specific tips for application development, may be included.

To avoid repetitions, many of the sections include cross-references to other sections.The main section of a UI property or building block is where the comprehensiveexplanation is found. All other sections refer to the main section.

UI Guidelines for SAP CRM – Chapter 2 Page Types

_________________________________________________________________________________________________________________________________________________________

Page 9 of 98

2. Page TypesThe CRM WebClient user interface (UI) consists of various UI elements that enablethe user to easily display, search for, and maintain information.

In this section, we briefly introduce the main elements of the CRM WebClient UI.Further details about all UI elements mentioned here can be found in later sections ofthis document; this section only provides an overview.

Besides the navigation bar and header, all other UI elements are referred to aspages. Pages can generally show up in their respective places in the CRM WebClientor as dialog boxes in an additional window.

2.1. Home PageThe home page is the starting point for every user in his or her daily work. This is thepage that is displayed as starting page when the user logs on to the system. Itcontains the most important personal information and provides access to the mostfrequently used tools. In addition to links, entire reports may also be included directlyon this page.

Figure 2-1. Home Page

2.2. Work Center PageA work center is a collection of functionality (links to search screens, links to createobjects, links to reports) related to specific tasks of a user (Account Management,Sales Operations, etc.).

The work centers are thus used to group the functionality available for a user in aspecific role into a high-level structure.

Every top-level menu item has an individual work center page. This work center pagecontains a set of shortcuts and provides access to all CRM components related to thework center. In addition to links, entire reports may also be included directly on thispage.

Figure 2-2. Work Center Page

2.3. Search PageThe search page provides users with comprehensive search capabilities for everyCRM object type. It consists of an area to enter terms and start the search. Below thisarea the search result list appears. The search page contains some additionalfunctions, for example the possibility to store entered search queries for a later reuse.


_________________________________________________________________________________________________________________________________________________________

Page 10 of 98

Figure 2-3. Search Page

2.4. Search Help Dialog BoxSearch screens can also be opened in a dialog box to assist the user in selectingobjects, for example to fill form fields.

Figure 2-4. Search Help Dialog Box for Account Search

2.5. Overview PageThe overview page is a user-friendly interface for viewing and editing all object-relatedinformation.

This is the most important element in the CRM WebClient UI. Overview pages consistof a main assignment block (Details) that allows object identification based on headerdata, and a set of assignment blocks that show related information.

Figure 2-5. Overview Page of an Opportunity


_________________________________________________________________________________________________________________________________________________________

Page 11 of 98

2.6. Freestyle Application PageFreestyle application pages are used for the display or maintenance of information forapplications that do not fit into the “overview page” concept. Here the business usecase requires a slightly different concept for visualization while staying in sync withthe overall design patterns.

Figure 2-6. Freestyle Application Page (Segment Builder)

2.7. Edit PageEdit pages allow users to create or maintain CRM content. They are typically linked toan assignment block on the overview page.

Edit pages consist either of a form, a table or a mixture of both.

Figure 2-7. Edit Page to enter address informations


_________________________________________________________________________________________________________________________________________________________

Page 12 of 98

2.8. Value Help Dialog BoxValue help provides the user with capabilities to select content from a limited numberof records such as country, language, or currency. Conflict resolution or the selectionof transaction types when objects are created is also supported using value helpdialog boxes.

Figure 2-8. Value Help Dialog Box for Currency

2.9. Personalization Dialog BoxThe personalization dialog boxes allow the user to adjust the user interface to his orher personal needs.

It is, for example used to select or sort columns displayed in a table.

Another example is the dialog box in which the user can select the information blocksthat should be visible on an overview page and the order in which these blocksappear.

Figure 2-9. Personalization Dialog Box for Assignment Blocks of an Overview Page

UI Guidelines for SAP CRM – Chapter 3 Header and Navigation Bar

_________________________________________________________________________________________________________________________________________________________

Page 13 of 98

3. Header and Navigation Bar

3.1. Overall DesignThe design consists of three areas: header area, navigation bar and work area.

The header area and the navigation bar are introduced in more detail in the followingsections. The work area is discussed in other sections of this document.

Figure 3-1. Overview of Screen Area

3.2. Header Area

Figure 3-2. Overview of Header Area

3.2.1. System LinksSystem links are displayed in the top right area of the header area:

o Personalize: Takes the user to the Personalization screen.

o Help Center: Opens online help for SAP CRM (may be role-specific).

o System News: Launches a dialog box window with messages.

o Log Off: Logs the user off.

Sequence of links:

o Personalize Help Center System News Log Off

3.2.2. Saved Searches, Central Search, and Simple SearchThe saved searches area provides direct access to a list of predefined searchqueries. The central search provides direct access to searches using one singlesearch field (for example, search for an account by entering the ID). Simple searches


_________________________________________________________________________________________________________________________________________________________

Page 14 of 98

provide capabilities of the Enterprise Search. For a detailed description of this area,see sections 7.4, 7.5, and 7.6.

3.2.3. Work Area TitleTable -1. Guidelines for Work Area Title

Navigation/Page Type Work Area Title Example

Work Center <Work Center label> Marketing

Search Page Search: <Object type [inplural]>

Search: Campaigns

Overview Page <Object type>: <Attribute>,<Attribute>*

Account: Test Company,London

Edit Page <Object type>: <Attribute>,<Attribute> - <assignmentblock Title>

Service Order: Car Repair,12345 - Notes

Create Page (Objects andSubobjects)

<Object type>: New Account: New

Item Overview Page <Item type>: <Attribute>,<Attribute>*

Accessory: Notebook Lock,HT-1111

Saved Searches, Title forAdvanced Search Value HelpDialog Box

Search: <Query name> Search: My Accounts

* At most three attributes, but we recommend only using two. With a screen resolution of1024x768, line breaks must not appear. The application decides which attributes are used.

In each case where an <object type> is referenced, a <transaction type> may be usedinstead. The only exception is the search page title, where the <object type> is alwaysused. In some cases, such as Activity Management, category names may also beused instead of object types or transaction types. For a more detailed discussion ofwork area titles for overview pages, see section 5.4.

3.2.4. Page HistoryThere is a plan to integrate history navigation in the browser history. Since thisfunction is not yet completely available, the history navigation is available within theheader area.

Figure 3-3. History Navigation

The history dropdown list displays work area titles of recently visited pages (alsoknown as “breadcrumbs”). By clicking on one of these list entries, the user is taken tothe corresponding page. The controls for history navigation are right-aligned withinthe work area title area.

A breadcrumb, accessible via the Back button, is written for every set SyncPoint.SyncPoints are explicitly set in the CRM application. For every SyncPoint, abreadcrumb is written that appears in the history list and can be accessed via theBack button. Exceptions are external applications like ICSS or Web Channel Shops,where no SyncPoint is set.

A SyncPoint is set for the following pages:

o All pages accessible via the navigation bar

o For every object/application, a SyncPoint is set for the search page as well as forthe overview page (or overview-like main pages of applications that do not havean overview page).

Sync Points can also be divided into two types:

o To be set by framework

o To be set by application development

For dialog box windows, no SyncPoint is set.


_________________________________________________________________________________________________________________________________________________________

Page 15 of 98

After using the Back or Forward button, the context is kept – this means that whenusers navigate back or forward using the breadcrumbs, they find the pages in thesame context/state as they left them (for example, same search criteria and result listis shown). This includes updated information if data were changed in the meantime.The update of information is important if a page that a user accesses via back/forwardnavigation contains analytical information, since users generally expect such data todisplay the current state (in Pipeline Performance Management, for example). Anexception to this rule is the search result list behavior, where no refresh of a result listtakes place when the user navigates back to it.

The number of entries displayed in the Back/Forward dropdown list boxes can becustomized for each client. The text displayed in the Back/Forward dropdown listboxes is the corresponding work area title.

The clean up of the Back/Forward dropdown list boxes is performed automatically bythe framework.

Each entry appears in the dropdown list boxes only once. If a user navigates withinthe CRM system and comes across the reports page twice, it is displayed only oncein the dropdown list box.

The page history can be provided in two modes:

o In “simple stack mode” the history entries are stored in order of occurrence. Onlya single navigation path is stored. After going back to a prior state, the nextforward navigation will delete the old path.

o In “advanced logic mode” history entries are stored until the history is reset. Eachstate appears only once. When reaching a state a second time, the previousentry is deleted.

The advanced logic mode is set as the default behavior.

Special cases:

o Creation of a new object. A breadcrumb is written for the object only after theobject is saved for the first time. It is then available in the Back/Forwarddropdown list boxes.

o Selection of a list entry. If the user uses hyperlinks to navigate across pages 1to 10, the Back dropdown list box shows (in reverted order) page 10 at the topand page 1 at the bottom. If the user chooses page 3 manually in the list, page 3is shown and pages 4-10 are moved to the Forward dropdown list box.

o Deletion of an object. If an object for which a breadcrumb entry exists isdeleted, then the corresponding breadcrumb is also deleted from the navigationhistory (performed by the framework).

3.2.5. Work Area ToolbarThe work area toolbar contains all function buttons that are required for the functionsrelated to the whole page displayed in the work area. (This is in contrast to functionsthat are only related to a group within the work area or just to single fields). The workarea toolbar can contain a Help icon on the right side. Home pages and overviewpages are additionally equipped with a Personalize icon. Each overview page alsoprovides a Print icon in the upper right corner. There is a complete set of rules aboutwhich function buttons are displayed in the toolbar and in which order. For details, seesection 11.5.

3.2.6. Message BarThe appearance and functions of the message bar are described in detail in sectionMessag.

3.2.7. Working ContextThe working context is an additional feature that is mainly required for marketingroles. According to a selected working context, a subset of fields will be automaticallyfilled with pre-determined values.

3.3. Navigation BarThe navigation bar may consist of four areas: first-level navigation, second-levelnavigation, a Create area, and a Recent Objects area (Figure 3-4). In addition, thenavigation bar may be collapsed or expanded by a dedicated button(Collapse/Expand Navigation button). In a collapsed state, only the ExpandNavigation button is visible to the left of the work area title bar and the work areatoolbar.


_________________________________________________________________________________________________________________________________________________________

Page 16 of 98

Figure 3-4. Overview of Navigation Bar

3.3.1. First-Level NavigationFirst-level navigation should not have more than 10 entries. Selecting a first-levelnavigation entry leads directly to a work center page (section 4.4).

The navigation entry Home is mandatory. The entries Worklist, Calendar, E-MailInbox, and Reports should also be included.

Accordingly, the sequence of the top menu area should be as follows:

o Home

o Worklist

o Calendar

o E-Mail Inbox

o <All role-specific work centers>

o Reports

Rules that should be applied:

o Navigation bar entries below Calendar and above Reports correspond to workcenters.

o A work center page is loaded to the work area when the user clicks thecorresponding navigation bar entry.

o If the texts in the navigation bar entries exceed the width of the navigation bar,the entry texts are truncated and three dots are appended to indicate the ellipsis.The tooltip shows full title of the entry. In order to avoid this behavior, you shoulduse short entries (approximately < 18-20 characters).

3.3.2. Second-Level NavigationSecond-level navigation is opened by clicking the triangle symbol at the end of a firstlevel navigation entry. The second-level navigation menu contains a list of links tosearch pages associated with the work center. A second click on the triangle (or aclick in the work area) closes the popup menu.

The links in the second-level navigation are a subset of the links provided in thesearch area of a work center.

In principle, other targets, such as search pages, may be reached via the navigationlinks in the second-level navigation (for example, BW reports or other applications).For consistency reasons, it is recommended to provide links to search pages only.

3.3.3. Create AreaThe entries in the Create area are links that navigate the user to the correspondingcreate pages. The occurrence and sequence of these links can be personalized.

No context is transferred to the created page.

Create links can be transaction types that directly open the application in new modeor object types that bring up a dialog box with a choice of transaction type (if there is


_________________________________________________________________________________________________________________________________________________________

Page 17 of 98

more than one transaction type available). If only one transaction type is available,then it is chosen automatically and the application is opened in new mode.

In the standard delivery, the Create area should only contain the most importantCreate links (Appointment, E-Mail, Task, and Contact) and four role-specific Createlinks at the most.

Available vertical space in the navigation bar (depending on the number of workcenters) should not be exceeded. In other words, no vertical scrolling should becaused by the number of create area links in the Create area.

3.3.4. Recent Objects AreaThe recent objects area shows by default the last five objects the user has visited (inedit or display mode). The content is stored across sessions, thus if the user logs offand logs later on again, the content of the recent objects area is still available.

Users can personalize the number of displayed objects in the range between 0 (thecontrol is not displayed at all) and 10 entries.

The area only contains links to overview or object edit pages (for objects which haveno overview page). Home, work centers, or search pages are not contained in therecent objects area.

The title of the object (without the object type) is used as a link. For example, anaccount with work area title

Corporate Account: Test Computer, Seattle WA

is displayed as

Test Computer, Seattle WA

If the link is too long, it is truncated. The tooltip shows full title of the object.

Basic Principles:

o Each object appears in the list only once.

o Objects are listed in the order in which they were visited last. In other words,objects can move up in the list if they are visited again.

o Deleted objects are removed from the list. If only the assignment to an object isdeleted, the object stays in the list.

o If the user has personalized n list items and the n+1 object is visited, then the lastobject disappears from the list. But if an object in the list with n entries is deleted,the n+1, n+2 ... n+5 comes back to the list again. Thus, it is technically necessaryto hold more than the n objects which are displayed.

3.4. Navigation SchemeThis is a general overview of the navigation scheme of the SAP CRM WebClient.

UI Guidelines for SAP CRM – Chapter 4 Home Page, Work Center Pages, Reports Page

_________________________________________________________________________________________________________________________________________________________

Page 18 of 98

4. Home Page, Work Center Pages, Reports Page

4.1. OverviewIn the CRM WebClient user interface, several different page types are used to presentinformation to the user. Examples of these page types are search pages, overviewpages, and edit pages.

The home pages, work center pages, and reports pages are based on an additionalpage type, the information hub type. The information hub type uses a pattern that isoptimized to display different information in a summarized way while providing an in-page structure to differentiate the information areas from each other. The informationhub pages are easy to read, easy to enhance, and easy to personalize. The contentdisplayed on these pages depends on the context from which the page is called.

Figure 4-1. Example: Structure of an Information Hub Page

In SAP CRM, the following pages using the information hub type are normallyavailable in a standard CRM role:

o Home page. The home page is the starting point for every user in his or her dailybusiness. It contains the most important personal information and access to themost frequently used tools. It is always the first entry in the navigation bar of anyrole. A CRM standard role must contain exactly one home page.

o Work center page(s). Every first-level menu item that does not correspond to aspecific page but represents a business grouping of various applications, such asHome, Reports, or Calendar, has an individual work center page. This workcenter page contains a set of hyperlinks and access to all CRM componentsrelated to the work center. Hyperlinks to components outside the CRM systemcan also be made available here.

o Reports page. In the navigation bar, you can find the entry Reports. The reportspage contains hyperlinks to all analytical content (reports) that are available for arole.

4.2. General Guidelines for Information Hub Pages

4.2.1. The Information Hub TypeInformation hubs are called using a first-level navigation entry in the navigation bar ofthe navigation frame (Figure 4-2). A first-level navigation entry that calls such a pagecan still have second-level navigation entries below it. A click on the main part of thefirst-level entry opens the information hub (if available), while a click on the triangleopens the second-level navigation menu.

Information hubs use the entire work area space and provide a vertical scrollbar forthe entire page if the content exceeds the work area size. Horizontal scrollbars mustnot appear under any circumstances.

The page consists of one to n content blocks that are normally arranged in a two-column layout. The content blocks in the left column are sized independently fromthose in the right column, that is, headers of the left and right columns do not have tobe on the same level; the height of the previous content blocks determines where thenext one in the same column starts.

Content blocks can also span the complete work area width (for example to displayanalytical graphics), but then they have to be placed above or below the other two-column content blocks to avoid white space on the page.


_________________________________________________________________________________________________________________________________________________________

Page 19 of 98

Figure 4-2. Role Example That Shows Availability of This Page Type in the NavigationBar

4.2.2. Content BlocksContent blocks can display different types of information. But several elements ofcontent blocks are constant, regardless of the information that is displayed.

A content block consists of:

o A content block header visualized as a tray containing:

• Content block title that provides a short description of the content of thisblock

• Skin dependent: A pictogram is available as a visual indicator for the contentblock (see example below).Pictograms are large icons that are intended to represent the content of therespective block. New pictograms have to be approved by the UI Concept

Team to ensure a steadily-growing number of pictograms as well as to avoidthe use of the same pictogram for different types of content.

• Possibility to open or collapse the complete content block leaving only thetray visible (via right aligned icon – see screenshot below)

• Possibility to directly remove a content block from a page without the need tonavigate to the personalization (via right aligned icon – see screenshotbelow)

• Content block dependent: possibility to personalize content details (via rightaligned icon – see screenshot below)

o A content area that is used to display the required information

o Optionally: An Expand link at the bottom to expand any listed content and showall entries if the defined maximum height has been exceeded

Figure 4-3. Example of possible content block header elements (from HomePage)

Every content block has a fixed width and a dynamic height. The width is either halfthe work area width or the full work area width. The height is generally dynamic,based on the amount of information in the content block, even though a defaultmaximum height can be used in connection with an expand mechanism. Contentblocks must never have a vertical or a horizontal scrollbar inside the content block.

If the content block contains listed information, a maximum height can be defined. Ifthis is reached, the remaining content is hidden and an Expand link is provided that


_________________________________________________________________________________________________________________________________________________________

Page 20 of 98

increases the height of the content block to display all information. If the content blockis expanded, the link switches to Collapse to collapse the block again.

The content inside a content block can be visualized in different ways. All visualizationoptions have to be optimized for easy reading and graphically clear visualization. Thismeans, for example, no explicit visualization of table grids, and so on.

Possible visualization options for content in a content block:

o List. The visualization of information in a list allows the presentation of severalconsecutive rows, one below the other. Each of the rows can contain one orseveral CRM fields or free text. Normally, at least one field or text displayed in arow contains a hyperlink to navigate to detailed information. This navigationtarget can also be outside the CRM solution.

• Examples: My Appointments Today, My Tasks Today, all Report Pagecontent blocks, Saved Searches, Create, Search, and so on (Figure 4-4).

o Textual descriptions. Free text can be used to provide information about orexplain a function that is also offered in this content block. Such free text isnormally accompanied by some hyperlinks or buttons to trigger an action.

o Analytical content. Content blocks can also contain analytical content, such asa graphic or an analytical table view. In most cases, for a concise display ofanalytical content, full-width content blocks have to be used.As these kinds of content blocks require a lot of space and performance, theyshould only be used when necessary. Alternatively, use a list content block withhyperlinks to analytical content pages.

• Example: Partner Facts in Partner Channel Management (home page),Figure 4-5

The options mentioned above are the visualization options used in standard CRMroles. Generally, these content blocks can contain every kind of information in everykind of visualization (keeping in mind that it should be easy to read and a graphicallyclear visualization) to allow the highest flexibility in customer projects.

Figure 4-4. Example of Visualizing List Content Blocks (from Home Page and ReportsPage)

Figure 4-5. Example of an Analytical Content Block

4.2.3. Personalization of Information Hub Pages and their contentblocks

The content of every page based on the information hub type can be personalized bythe user. The personalization can be done regarding the page structure in general onthe one hand side, and on the other hand side on content block level.

Page structure personalization:

While the user can directly on the page use drag & drop to re-position the content onthe page (i.e. move blocks from left to right column, up or down) also a dedicatedpersonalization page is available.

When the user clicks the personalization icon in the top right corner, the screenswitches and the logical content block areas of the current page are displayed (Figure4-6). This page can be used to remove content blocks from the page as well as to addnew content using the drop down list boxes shown in the place of the content blocktitle.


_________________________________________________________________________________________________________________________________________________________

Page 21 of 98

Figure 4-6. Example of Personalizing an Information Hub Page Type

Content block specific personalization:

Per content block additional personalization can be done covering the followingcapabilities:

o Start Collapsed: the user can define if a content block per default should beshown open or closed. Closed would allow to position more content on the pagethat is only rarely used on request.

o Choose Pictogram (skin dependent): In all SAP CRM standard skins besidesthe SIGNATURE skin the user can choose a pictogram as indicator for thecontent block, that appears in the top left corner of a content block left to theblock title.

o Personalize Content Details (optional): some content blocks provide apersonalization option regarding the content details they display. Thispersonalization is started via the personalization icon in the tray which opens apopup for the personalization details.

4.3. Home PageThe home page is the first page that is directly shown to a SAP CRM user when theuser opens the software. It summarizes the most important information for the user’sdaily business. This can be information or links to access important information.Therefore, some content is dynamic (My Appointments Today, for example, ischanged daily) while other content is relatively static (Favorite Reports, for example).The content of the home page has to be tailored to the needs of the correspondingrole and can therefore differ between roles.


_________________________________________________________________________________________________________________________________________________________

Page 22 of 98

Figure 4-7. Example of a Home Page

In CRM WebClient UI, the following pre-defined content blocks are available and canbe used for standard roles:

o My Appointments Today. This content block displays the appointments for theuser on the current day with start times and end times as well as the appointmentdescriptions.

o My Open Tasks. This content block displays the currently open and due tasksfor the user with their descriptions.

o Favorite Reports. This content block displays the most important reports theuser wants to access directly from the home page with one click. The content isrole-dependent.

o My Saved Searches. This content block contains a list of saved searchesidentical to the Saved Searches dropdown list box in the navigation frame.

o Alerts. This content block displays a short list of CRM alerts. It can be seen as asubstitute for or a complement to the first-level entry worklist, which providesmore details about alerts.

o Workflow Tasks. This content block displays a list of workflow items and has ahyperlink to navigate to the details of a workflow task. It can be seen as asubstitute for or a complement to the first-level entry worklist, which providesmore details about workflow tasks.

o Favorites. This content block allows the user to browse through his/her favoriteobjects. To be listed here the user needs to add an object to his/her favorites inthe corresponding overview page. The favorites can be structured in user specificfolders.

o Tags. This content block provides easy access to all tags (tag cloud etc.) theuser has assigned to any object. Via the hyperlink on the tags the user candirectly see a list of all objects related with this tag (tagging an object itself isdone on the corresponding overview page)

o Web Links. This content block allows the user to directly place favorite links intothe WWW on the home page. A personalization of the content is available

o CRM links. This content block allows the user to place direct “quick links” to anyCRM functionality within his/her role on the home page. A personalization of thecontent is available.

o Widgets. This content block allows the user to display his own created widgetlinks directly on the home page. A personalization of the content is available

For each role, additional role-specific content blocks can be shown on the homepage, based on the existing business requirements (example: analytical graphics).


_________________________________________________________________________________________________________________________________________________________

Page 23 of 98

4.4. The Work Center PageThe default content specific to a CRM role is grouped in work centers. These workcenters are normally represented in the navigation bar with the first-level entries thatcall the work center page with one click and provide a second-level navigation that iscalled by clicking the triangle. The second-level navigation provides direct access toobject search pages, while the work center page provides a summarized view of allthe business content in this work center.

On such work center pages, normally three different content blocks are displayed(Figure 4-8):

o Search. This content block shows all Search links to objects that are part of thiswork center. This content block can contain more entries than are available in thesecond-level navigation of this work center. Only the most important search linksshould be available in the second-level navigation, but on the work center page,all entries have to be available.This content block has to be placed in the top left area of every work center page.

o Create. This content block shows all Create links for objects that are part of thiswork center. This content block can have an overlap with the Quick Create blockin the navigation bar. The Quick Create block, however, should contain only themost used links for a role, while the Create block in the work center page has tocontain all Create links for objects in this work center.This content block has to be placed in the top right area of every work centerpage.

o Reports. This content block contains a subset of the reports available on thereports page. The reports listed here are all related to the specific businesscontent of this work center.

Figure 4-8. Example of the Work Center Page Sales Operations

Generally, the work center pages can be used in customer projects for displayingadditional, summarized information relevant for the business content of this workcenter.

4.5. The Reports PageThe reports page is the central point for the user to access any kind of analyticalinformation or reports. The concrete content offered on this page is role-dependent.

The standard reports page (equivalent to the work center pages above when clickingthe first-level navigation bar entry) consists of several content blocks that group allavailable reports or other report-related information or functions under content blocktitles (Figure 4-9). The grouping is role-dependent and based on business areas.


_________________________________________________________________________________________________________________________________________________________

Page 24 of 98

Such a content block contains, for example, the analysis or report name visualized asa hyperlink. Icons in front of the report name can be used as indicators for the reporttype. Clicking the hyperlink opens the selected report or analysis using the entire workarea.

Figure 4-9. Example: Sales Professional Reports Page

In addition to this general reports page, it is also possible to create analyticaldashboard pages and to make them available on the second-level navigation belowthe report’s first-level entry.

Such analytical dashboards are normally a group of four analytical views arranged ina square on the page. These analytical views are directly loaded when accessing thedashboard.

This is a general overview of the navigation scheme of the SAP CRM WebClient.

UI Guidelines for SAP CRM –Chapter 5 Overview Page

_________________________________________________________________________________________________________________________________________________________

Page 25 of 98

5. Overview Page

5.1. OverviewThe overview page (Figure 5-1) shows all important information regarding a single instanceof an object (e.g. an opportunity, campaign, or account). It is the navigation target for alllinks to the respective object. The overview page can, for example, be reached by a linkfrom a search result list, or by a link from another overview page.

The overview page contains a header area for the attributes of the object itself and 1-to-nassignment blocks that contain data for assigned objects or further data for the object.

The overview page consists of these focus areas:

o Work area title. The title should help the user to identify the current object.

o Work area toolbar. Contains all functions that apply to the whole object.

o Details assignment block. The Details assignment block contains the most importantattributes of the object (object header data) in a form view.

o Assignment blocks. Assignment blocks contain additional attributes for the object orinformation assigned to this object. Examples include:

Other objects connected to the object represented by the overview page, such ascontacts, products, or competitors assigned to an opportunity.

Additional information assigned to the object, such as notes, attachments, ormilestones assigned to an opportunity.

Additional attributes concerning the object, such as organizational data for anopportunity.

Historic or log information, such as transaction history, sales stage history, orchange logs of an opportunity.

Services available for the object, such as scheduled actions.

The default visibility and sequence of assignment blocks is configurable. In addition, eachuser can personalize which assignment blocks are displayed on the overview page and inwhich order they are displayed.

Since configuration and personalization of the assignment blocks is quite easy to do, thedefault configuration should be as simple as possible. Include only those assignment blocksin the visible content of an overview page that are required by a significant majority of users.

Figure 5-1. Example of an Overview Page

5.2. Changing information in an assignment block:Some assignment blocks simply display information while other assignment blocks offer theopportunity to change the content (for example, change the data in form fields, or add newrows in a table).

There are three methods available to change the contents of an assignment block:

o In-place editing. The form, table, or tree inside the assignment block is switcheddirectly (without navigation to a different page) to editable. If a block is switched fromdisplay to edit (resp. from edit to display) the user’s current position on the overviewpage does not change (no screen jumping occurs).

o Navigation to an edit page. The system navigates the user to a separate edit pagethat replaces the overview page in the work area. The edit page can show additionalattributes of the current object in a form or table. It can also be the overview page of adifferent object. The user can perform the changes on this edit page and can then


_________________________________________________________________________________________________________________________________________________________

Page 26 of 98

navigate back to the overview page. In this case the position of the assignment blocksin the overview page is the same as before the navigation (an exception are newlyinserted lines in a table or tree) and the corresponding assignment block is in edit mode(in exceptional cases the assignment block may not have an edit mode, in this case it isstill in display mode).

o One-click actions in a table. Table-based assignment blocks can contain one-clickactions, for example to delete a row. The one-click action can be represented by anicon or a text link. It only influences the entry in the corresponding row. After a one-clickaction is performed, the corresponding assignment block is automatically set to editmode.

The complexity of the assignment block content determines if it is edited in-place or on aseparate edit page. The general goal is to provide in-place editing for as many assignmentblocks as possible.

The switch to edit mode is done per assignment block. As a shortcut a central Edit buttoncan be placed in the work area toolbar. If the user clicks on this button all assignment blocksthat can be edited in-place are switched to edit mode.

An assignment block that was switched to edit mode stays in this mode until the userpresses Save (saving all changes in all assignment blocks) or Cancel (discarding allchanges in all assignment blocks) in the work area toolbar. A save or cancel event sets allassignment blocks on the overview page back to display mode.

If the user made some changes in the overview page and clicks the Cancel button, theapplication should not raise a dialog box asking if the user really wants to cancel his or herchanges. Instead, all changes that occurred after the last save event are directly discardedand the overview page is set back to display mode.

5.3. Basic Navigation Pattern: Save, Cancel, and BackThe work area toolbar of every overview page contains the buttons Save and Cancel. Thesebuttons are mandatory (exceptions are objects which can never be changed).

If the user has not changed any information on the overview page since the last save orcancel event, then the buttons Save and Cancel are inactive. They become active as soonas the user switches one assignment block to edit mode (directly or by navigating to aseparate edit page), or clicks a one-click action. The buttons are activated even if the userdid not actually change any data. The occurrence of a switch to edit mode or navigation toan edit page is sufficient to activate the buttons.

When the overview page is initially called Save and Cancel are inactive and all assignmentblocks are in display mode.

Exception: If the nature of the object or the business process indicates that users will inmost cases directly change information on the overview page it is also possible to displayone or several assignment blocks directly in edit mode when the overview page is entered.In this case the Save and Cancel buttons must be active. When Save or Cancel are pressedthe page behaves like any other overview page, i.e. it is switched to display mode.Therefore, if an overview page is opened in edit mode it should contain a central Edit buttonin the toolbar. To ensure a consistent behaviour this option should only be used in caseswhere it is evident that users typically want to change information when they enter the page.

5.4. Work Area TitleThe title should help the user to identify the object. It consists of the object type andbetween one and three object attributes. The rule for the title of an overview page is:

<object type>: <attribute 1>, <attribute 2 -optional>, <attribute 3 - optional>

Here <object type> is the textual description for the object type in the singular. Instead of the<object type>, the <transaction type> can be used in the title if several transactions arederived from the same object type.

Example: The title for the overview page of an opportunity with Id = 9686, Description = SellLaptops and Prospect = TEST Customer is:

Opportunity: 9686, Sell Laptops, TEST Customer

The title should not cause any line breaks in standard resolution 1024 x 768. Werecommend that you use only two object attributes in the title.

When the user creates a new object the title is:

<Object Type>: New

When the user saves the new object for the first time, the term New is replaced with thecontent of the relevant object attributes. Exceptions are object attributes that areautomatically generated when the object is created (for example the object id). If theseattributes are important for the concrete use case, then they should be display in addition tothe term New in the title before the object is saved the first time.

Example: The id of a new sales order is automatically created and is important for the userbefore he or she saves the sales order (the user may talk to a customer on the phone andneeds to communicate the order number directly when the order is created). In thisexample, the title of the new sales order with id 123456 would be Sales order: New, 123456.


_________________________________________________________________________________________________________________________________________________________

Page 27 of 98

5.5. Work Area ToolbarThe work area toolbar contains all functions that refer to the whole object. Functions thatrefer only to one assignment block are placed in the assignment block toolbar. The left-aligned part of the work area toolbar contains all functions relevant for the handling of theobject displayed in the overview page. The availability and order of the buttons must followthe button guideline.

The right-aligned part of the work area toolbar contains several generic functions:

The possibility to personalize the content of the page.

The possibility to print the content of the overview page.

The possibility to call context-sensitive help.

Depending on the authorizations of the user additional buttons can appear. These buttonscan be hidden via personalization settings.

Buttons for the configuration of the corresponding page.

A button to add the object to a favorites list. The user can organize his or herfavorites in a hierarchy of folders. Objects marked as favorites can be accesseddirectly from the corresponding content block on the home page.

A button to add tags to the object. If the user clicks on this button he or she canadd new tags or remove already existing tags in a popup. The tags can be madevisible on the home page by a tag cloud.

5.6. Details Assignment BlockThe Details assignment block contains the most important attributes of an object. In thedefault settings it should be always the first assignment block on the overview page (theuser can change this by personalization).

The Details assignment block is based on a form view. We recommend using a two-columnlayout.

The name of the Details assignment block is generally <Object Type in Singular> Details or<Transaction Type in Singular> Details. Example: Opportunity Details.

Some objects, such as campaigns, allow the display of a navigation tree inside the Detailsassignment block of the overview page. The user can display or hide this navigation tree byclicking a toggle button in the toolbar of the overview page. For details of this navigationbehaviour, see the guideline concerning hierarchies.

If notes are a key part of the business process, the Details assignment block can alsocontain a Notes block to enter notes directly at header level. This notes field does notprovide a notes type or a Language Selection dropdown list box.

The Details assignment block is always edited in-place on the overview page.

Figure 5-2. Example of an Overview Page with Notes in Display Mode

Figure 5-3. Example of an Overview Page with Notes in Edit Mode

In addition, the general rules for assignment blocks are also valid for the details assignmentblock.


_________________________________________________________________________________________________________________________________________________________

Page 28 of 98

5.7. Assignment BlocksEach assignment block consists of a title bar and a content area.

o Title bar. The title bar contains a title which should help the user to identify theassigned information. In addition, it contains all functions that apply to the content areaof the assignment block.

o Content area. The content area typically contains a table (Figure 5-4), a form (Figure5-5) or a tree. Of course, it is possible to display other content here, for example asurvey, or a report.

Figure 5-4. Example of an Assignment Block that contains a Table

Figure 5-5. Example of an Assignment Block that contains a Form

5.7.1. Assignment Block TitleThe title should help the user to quickly identify the content of the assignment block.

If the assignment block contains information that is in a 1:n relationship to the objectdescribed by the overview page, such as a table or a tree, the title should describe theinformation in the plural.

Example: The overview page for an opportunity contains an assignment block Products thatshows all products assigned to this opportunity.

If the assignment block contains additional attributes for the object, such as a form, the titleshould describe those attributes in the singular.

Example: The overview page for an opportunity contains an assignment block Sales AreaData that shows the sales area data relevant for this opportunity.

5.7.2. Functions in the Assignment Block Title BarThe area that contains all functions specific to assignment blocks starts next to theassignment block title. This area can contain generic buttons (needed to edit the informationin the content area) as well as application-specific buttons.

The following functions are placed at the right end of the assignment block title bar:

o Export to Spreadsheet (available only in tables or trees - can be hidden if export is notpossible or makes no sense for a specific table)

o Personalize (available only in tables or trees)

o Back to Top (in all assignment blocks except the Details assignment block)

Only those functions that exclusively influence the content area of the assignment blockmay be placed in the assignment block title bar. If this assignment block is edited in-placeon the overview page, additional buttons can appear in edit mode. Therefore, the buttons inthe assignment block title bar can differ between edit and display mode. The button orderand the naming of the standard buttons are described in the Buttons guideline.

5.7.3. Generic buttons in the Assignment Block Title Baro Edit (icon+text):

Normally used only in form-based assignment blocks, such as the Details assignmentblock. This button switches the content area of the assignment block to edit mode. Thiscan be done in-place or by navigating to a separate edit page.

The Edit button is only active when the assignment block is in display mode.

o Edit List or Edit Hierarchy (text only):

Used only in table- and tree-based assignment blocks. This button switches theassignment block to edit mode. This can be done in-place or by navigating to aseparate edit page.

The button is only active when the assignment block is in display mode.

o Add (icon+text):


_________________________________________________________________________________________________________________________________________________________

Page 29 of 98

This function is used only in table-based or tree-based assignment blocks. This buttondirectly opens a search help (in rare cases a value help) to search for and select thecontent that should be added to the assignment block's content area.

The assignment block content is updated when the search/value help is closed. Newrows that are added using the value help are always placed at the end of the table.After the value help is closed, the table shows the last page that contains the objectsjust added. The assignment block is also switched to edit mode in-place.

The button is always active regardless of whether the assignment block is in display oredit mode.

o New (icon+text):

This function is used in assignment blocks that contain a table or a tree. This buttonnavigates to a dedicated edit page. This separate edit page can show additionalattributes of the current object in a form view or table. But it can also be the overviewpage of a different object.

If the button navigates to the overview page of a different object, the rules for creating anew object apply. In this case, backward navigation to the current overview page is onlypossible using a history back navigation.

This button switches the assignment block to edit mode after the user has navigatedback to the overview page. The content of the assignment block is automaticallyupdated in this case. New rows that are added to a table using the New button arealways placed at the end of the table. The table shows the last page that contains theobjects just added.

The button is always active regardless of whether the assignment block is in display oredit mode.

Assignment blocks containing a New button should also contain a one-click action Editfor each row (exception: hierarchies have no one-click action).

Note: There are some assignment blocks to which new entries can be added (using Add,New or even an Edit List button) that navigate to a separate edit screen, but which cannotbe displayed in edit mode on the overview page. Examples include the Attachments or theNotes assignment blocks. In these cases, there is currently no visual indication possible toshow that the assignment block was changed. This means that the assignment block is stillin display mode after data is changed.

It is not necessary to use all generic buttons in the assignment block title bar. Somecombinations that make sense in many different scenarios are:

o New + Edit List : Use this combination if the creation of new rows in a table-basedassignment block requires the entry of more data than what is displayed directly in the

table (New button) and if the user should be able to change some content in existingrows directly in the table (Edit List button). This situation occurs often in tables wherethe rows represent complex objects and it is a valid use case that some details ofexisting rows are changed frequently by the user.

o Add + Edit List: Use this combination if new rows in a table are typically added using asearch help (Add button) and if the user should be able to change the field content ofexisting rows directly in the table (Edit List button).

o New + Add : Use this combination if table rows represent complex objects that cannotbe entered and changed directly in the row and if it is a common use case that existingobjects are assigned to the table via the search help.

For some assignment blocks, multiple New or multiple Add buttons are necessary.

Examples: The Attachments assignment block allows the creation of a new document or anew URL or new document with template. Therefore, three New buttons are contained inthe title bar of the assignment block (Figure 5-6).

Figure 5-6. Example of an Assignment Block with multiple “New” Buttons

In such cases, the word New on the button is replaced with the name of the object. The Newicon shows that the function creates a new object. The button has the tooltip New <Object>,for example New URL. The same applies for multiple Add buttons.

It is not allowed to display more than three New or Add buttons in the title bar. If more thanthree different objects that can be created and added to an assignment block, then a singleNew button must be used. When the user clicks this button a selection dialog box appears,in which users can choose the object they want to create.

5.7.4. Assignment Block Content AreaThe content area of an assignment block typically contains a form (Figure 5-7), a table, or atree. The user can collapse or expand the content area by clicking the triangle on the leftside of the assignment block title.

Content area containing a form view:

Choose a two-column layout whenever possible. If the form contains many fields, thencaptions should be used to group these fields.

Form-based assignment blocks should be switched to edit mode in-place wheneverpossible.


_________________________________________________________________________________________________________________________________________________________

Page 30 of 98

Figure 5-7. Form in an Assignment Block Based in Display and Edit Mode

Content area containing a table:

In the case of table assignment blocks, the standard editing concept is also editing in-placeby switching the assignment block on the overview page from display to edit mode ifpossible. This is mainly the case where only the columns visible in display mode should be(partly) editable and no further content, such as form fields, related tables, or special filteringmechanisms, is needed for editing.

The state of a table does not change when it is switched from display to edit mode or viceversa. State summarizes the following information:

o Whether the table is expanded or collapsed

o The number of visible rows per page

o The page that has the focus

The table row that has the focus does not change when the user expands or collapses it inedit mode. This means that the page with the row that is currently being edited is alwaysvisible to the user.

Content area containing a tree:

With some exceptions, the rules for assignment blocks containing tables apply. For furtherdetails concerning the behavior of trees, refer to the Hierarchies guideline.

5.7.5. Load OptionAn assignment block can be defined with two different start options (Figure 5-8):

o Auto load. The content of the assignment block is automatically loaded when theoverview page is displayed. In this case, the assignment block is automaticallyexpanded when the overview page is displayed.

o Lazy load. The content of the assignment block is only loaded at the user’s request,that is, when the user clicks on the small triangle to the left of the assignment block title.In this case, the assignment block is automatically collapsed when the overview page isdisplayed. The data is loaded when the user expands the assignment block for the firsttime.

The default for the load option of an assignment block can be defined in Customizing. Theuser can change this default in Personalization.

Figure 5-8. One Auto-Load and Two Lazy-Load Assignment Blocks from a Sales OrderOverview Page

The overview is the central navigation target to an object. It is important that it appears assoon as possible when the user clicks a corresponding link. To achieve this goal thenumber of queries that must be executed before the overview page can be shown must beminimized. Therefore, only those assignment blocks with content that users always want tosee when they navigate to the overview page should be defined as auto load in the defaultfor a role.

5.7.6. Separate Edit PagesIf a switch of an assignment block in-place to edit mode makes no sense from the businesslogic or is technically not possible, the edit process is performed (additionally) on a separateedit page. Use this method only in cases where in-place editing is really not possible.

A separate edit page can contain a form, a table, or a combination of a form and one orseveral tables. The work area toolbar of the separate edit page must contain the buttonBack as the first button. This button navigates back to the overview page from which the editpage was opened. If the function Cancel is available in the toolbar of a separate edit page,


_________________________________________________________________________________________________________________________________________________________

Page 31 of 98

then pressing this function should only cancel changes make on the edit page and notchanges made in other assignment blocks of the underlying overview page. Pressing theCancel button navigates back to the overview page.

The work area toolbar of the separate edit page should contain all buttons that influence thewhole content of the edit page. Field-related buttons should be placed inside the form andbuttons that influence single rows in the table should be placed inside the table toolbar. Forthe order of the buttons refer to the buttons guideline.

Examples:

o A sales order contains an assignment block that lists all line items. It is possible to enterline items directly in the table. But if product proposals are used, direct entry in aneditable table on the overview makes no sense. Therefore, it is possible to navigate to aseparate edit page (using the Edit List button) that contains a table with line items ontop and an additional dependent table with product proposals based on top N rules orcross-/up-/down-selling rules.

o The address information of an account contains attributes (city, street, house number,and so on), but also several phone numbers, several e-mail addresses, or severaladdress types. It is not possible to edit this information directly in the table that lists alladdresses of the account. Thus, editing is done on a separate page with a form to enteraddress attributes and three tables for the phone numbers, the e-mail addresses, andthe address types of the specific address.

An edit page that contains only a table is opened by Edit List. Edit pages that contain a form(and additional tables) are opened by New or the one-click action Edit.

5.8. Special Use Cases

5.8.1. Creating a new objectWhenever a new object is created, the user is taken to a blank overview page. In this caseall assignment blocks are in edit mode, the Save and Cancel buttons are active, and theDelete button is inactive. If Cancel is clicked for an yet unsaved object, then all entries madeso far will be discarded, the overview page is closed and an automatic back navigation tothe last page available in the history takes place.

For some applications it is necessary that the user makes some decisions before theoverview page can be displayed (i.e. the structure of the page depends on these decisions).There are in principle two different scenarios possible:

o The user has to choose between different variants of the business object (for example,between different transaction types of a sales order). In this case a selection popup is

displayed before the overview page is opened. After the user has selected one of thevariants in the popup the overview page is shown.

o The user has to enter some initial values, which become attributes of the object. Thesevalues determine the available information in the overview page and can not bechanged later on. In this case only the Details assignment block is shown when theoverview page is opened. The initial values are shown as required fields in the Detailsassignment block. All other assignment blocks become only visible after the requiredfields are filled and a server roundtrip occurs (triggered by ENTER or Save). The fieldsthat contain the initial values become read-only after this action.

5.8.2. Deleting an existing objectWhen a user deletes an object, an automatic back navigation to the last page available inthe history takes place. If this page displays information concerning the deleted object, werecommend that you update the page before it is shown to the user if this is technicallypossible without performance problems. If such an automatic update would result inperformance problems, you can display the deleted object and show an error message if theuser tries to navigate to the object or to perform a function in this object.

Example: The user navigates from a search result list to the overview page of an object.Then he or she deletes the object. The system then performs an automatic back navigationto the search result list. In this scenario, the list will still contain an entry for the deletedobject (otherwise the search would have to be performed again after each back navigationto a search result page, which would have a highly negative impact on systemperformance).

When you press Delete, a dialog box appears with the text Do you really want to delete?The dialog box offers the user the two options Yes and No.

5.8.3. Overview page of an archived objectWhen the overview page for an archived object is accessed, then work area toolbar buttonsthat are of no use are hidden (Save, Cancel, etc.). Buttons in assignment blocks are shownactive. If these buttons are clicked, a message is shown informing the user that therequested function is not available for archived objects.

UI Guidelines for SAP CRM –Chapter 6 Guidelines for Forms

_________________________________________________________________________________________________________________________________________________________

Page 32 of 98

6. Guidelines for Forms

6.1. OverviewForms can appear inside assignment blocks or on separate edit pages. Since forms are afrequently used design element it is important to built them in a way that allows efficient dataentry. In addition form layout rules should be applied consistently in the whole CRM.

6.2. Grid LayoutThe layout of forms is based on a grid that consists of 8 or 16 cells (labeled in the followingby letters A to H respectively A to P). Forms can be built in three different layout styles.

6.2.1. 16/1-Layout (16 Cells, 1 Form Group) Form groups and their headers span the complete width.

Within the form group, the UI elements can be arranged within one column(spanning 16 cells) or two columns (spanning 8 cells each).

If one-column layout is used, labels are placed in cells A-C and the UI elementscover cells D-P. Elements without labels (e. g. text edit fields) span the completewidth of the form (cells A-P).

If two-column layout is used, labels are placed in cells A-C and I-K. The UIelements cover cells D-H and L-P. Element without a label cover the cells A-H andI-P. Layout is done row-wise, i. e. elements are arranged horizontally, thenvertically (Z-shape; see also Tab Order 6.5).

Figure 6-1. Example of a text edit field in 16/1 layout using one column (ConfigTool).

Figure 6-2. Example of input fields in 16/1 layout using two columns (ConfigTool).

6.2.2. 16/2-Layout (16 Cells, 2 Form Group) The layout contains two columns for form groups. Form groups and their headers

span 8 cells each, layout being done column-wise.

Label are placed in cells A-C and I-K. UI elements cover cells D-H or L-P.

UI element without labels (e. g. text edit fields) cover the cells A-H or I-P.

Layout is done column-wise, i. e. elements are arranged vertically within a column,columns arranged next to each other (inverted N-shape; see also Tab Order 6.5).

Figure 6-3. Example of a form with 16/2 layout (ConfigTool)

6.2.3. 8/1-Layout (8 Cells, 1 Form Group) Form groups are arranged within one column, spanning half the width.

Label are placed in cells A-C.

UI element without labels covers the cells A-H

8/1 layout is mainly used for forms that are displayed in overview pages using tilelayout. Another use case are forms that are re-used as parts of other forms(spanning only the half width).


_________________________________________________________________________________________________________________________________________________________

Page 33 of 98

Figure 6-4. Example of a form with 8/1 layout (from ConfigTool)

6.2.4. Recommendations for the Grid Layout

A form can contain a mixture of the above listed layout options.

Figure 6-5. Example: Form mixing 16/2 and 16/1 grid.

To keep the appearance of forms consistent whenever possible 16/2 layout should be thepreferred option.

It is recommended to fill the lines completely. This means that UI elements (like fields,dropdown list-boxes etc.) used in a line should cover the respective cells (see spanningrules for the different layout styles). This generally reduces visual complexity and thusimproves the visual appearance of forms.

Numeric fields should always be long enough so that their content is not cut off.

6.3. Layout in Edit and Display ModeIf a form in an assignment block of the overview page can be switched to edit mode, thendisplay and edit mode must contain the same fields in the same screen positions. Thisguarantees that the screen stays stable when the user switches between the two modes.

Non-editable fields are displayed as read-only in edit mode (see Figure 6-6).

Figure 6-6. Example of a non-editable fields (Type and ID) in edit mode.

Input help like value helps, date pickers, dropdown list box controls, and so on, are onlydisplayed in edit mode. They are never visible in display mode. This principle applies also tomandatory fields. Thus, the indicator that a field is mandatory is only visible in edit mode.

Only editable fields can show an input help in edit mode. You cannot display a field as non-editable in a form and let the user change the field content via a value help.

6.4. GroupingIf a form contains many elements it is recommended to use grouping to make it easier forthe user to scan the content of the form. To group elements, consider the followingsuggestions:

o A group should not span more than 8 lines.


_________________________________________________________________________________________________________________________________________________________

Page 34 of 98

o A group should always contain more than one element. Exceptions are groups thatcontain complex elements, for example tables, text edit fields, radio button groups orcheckbox groups. In this case the group header can replace the label.

o Generally, a group should always contain more than one element.

o A blank row separates the last element of a group and the header of the next group.This improves the readability of the form.

o If a two-column layout is used, groups should be horizontally aligned on the left andright columns of the form if possible. This has a reasonable impact on the perceivedcomplexity of the form. Groups should be horizontally aligned on the left and right sideof the form even if this requires the insertion of up to two blank rows on one of the sides(and thus some white space in the form). Horizontal alignment is not recommended ifmore than two blank rows would be necessary.

o Visual grouping of the form elements has to be consistent with the tab order betweenthe elements. This should be no problem if a two-column layout is used. In one-columnlayout, it is not permitted to display two groups side by side (in this case, the tab orderwould be in contradiction with the visual appearance).

6.5. Tab OrderThe user can move the cursor focus from one editable field to the next using the TAB key.The order of the tab sequence is from left to right and from top to bottom inside each group(only active screen elements are contained in the tab chain, so non-editable fields that donot contain a hyperlink are not part of the tab chain). Thus, the order of the tab sequencemust be consistent with the visual assignment of fields to groups. The tab sequence muststep through all fields inside a group before it leaves the group to enter a new group.

6.6. Dynamic Screen AreasDynamic areas (i.e. groups of fields that are displayed or hidden dependent on the entries inother fields) are always displayed within the column in which the trigger (the field thatcontains the content that influences the dynamic area) is displayed. This ensures that thegeneral form layout is not impaired by a dynamically changing height of a respective formgroup.

Disable UI controls if a user has access to a command but is not available due to the currentstate of the business object instance and either that disabled conditions can change duringthe session when access can be granted or the disabled condition is based on a specificobject instance and for other object instances it may be enabled.

UI controls should be hidden from the screen when the user will never have access to them(i.e. user never has access privileges to them due to role based security or otherconfiguration rights and privileges).

6.7. Input Fields

6.7.1. Field LengthIn general, the field length is determined by the UI grid that is used for the form layout. Thismeans that fields have a fixed length relative to the screen width, the smallest unit being1/16. If the length of the field content exceeds the length of the field the text is cut and anellipsis (“…”) is added to indicate this. A tooltip displays the complete field content. Byputting the cursor into the field and using the right and left arrow keys, the field content canbe scrolled through.

6.7.2. Field LabelsIn principle, each field in a form has to be equipped with a label. The field labels shoulddescribe the content of the fields as clearly as possible. Try to avoid abbreviations in thefield labels. Field labels are right aligned by default.

In edit mode, mandatory fields are marked with a small asterisk next to the field label. Ifsuch a mandatory field is not filled, an error message must be sent after the next roundtrip.The background of a mandatory field can be marked by a different background color.Whether this mechanism is used at all, and the concrete color used to mark mandatoryfields, depends on the skin selected. In display mode, the mandatory field visualization isnot visible.

If a label is too long to be displayed completely, the label text is cut and “…” is added toindicate that the label has been cut. A tooltip displays the complete label text.

6.7.3. Links in Form FieldsFields that allow users to navigate to a related object contain a hyperlink. These hyperlinksare always shown in display mode, independent of any authorization settings. Thus, if auser does click on such a link and has no authorization to navigate to the respective objectan error message must be shown.

In edit mode, only inactive fields can contain hyperlinks. If a field is editable, the content ofthe field is never formatted as a link.


_________________________________________________________________________________________________________________________________________________________

Page 35 of 98

A non-editable hyperlink field is displayed in the edit mode of a form without borders. Inother words, the display of such a field is the same in both edit and display mode. Onlywhen the hyperlink field is empty a blank read-only field displayed.

6.7.4. Melting GroupsIn some cases, it makes sense to place more than one field in a row, such as a value andthe corresponding currency field or fields for a phone number and extension.

In this case, all field labels are placed in front of the first field, and separated by a forwardslash (/). If for example, the fields for postal code and city are placed in one row, the labelfor both fields is Postal Code/City.

You can omit labels for fields for which the content is clear from the context as long as onefield in the row has a label. But in this case, it must be guaranteed that each field has ahidden label, so that blind users can still access it using a screen reader.

For several fields appearing in one row, at least one of the fields must have a visible label.

6.7.5. Alignment of Field Content in FormsIn edit mode, the content of all numeric fields (read-only or editable) is right-aligned. Thecontent of all other fields is left-aligned.

In cases where numeric fields are supposed to be used for comparison or summationpurposes it is recommended to use a table within the form to improve the readability indisplay mode.

6.7.6. Concatenation of FieldsTo increase readability of information, it often makes sense to concatenate the content ofseveral fields in display mode. But since we want to have a stable layout between edit anddisplay mode, concatenation must be used carefully.

Concatenations of fields in the display mode of a form are only allowed if the concatenationcontains fields from the same row of the form in edit mode. A concatenation of fields that aredistributed across several rows in edit mode is not allowed.

6.7.7. Sorting of dropdown list boxesThe entries of a dropdown list box should be sorted alphabetically. Exceptions are caseswhere the business logic implies a different sorting, for example to match a naturalsequence of the entries.

6.8. Text Edit FieldsIn general, a Text Edit Field will be used as a separate form group. In this case a groupheader has to be displayed.

Figure 6-7. Example of a form with text edit field displayed with a header.

If a Text Edit Field is used as an element within a form group, it is displayed with a label.The label is aligned with the labels of other elements within the form group.


_________________________________________________________________________________________________________________________________________________________

Page 36 of 98

Figure 6-8. Example of a form with text edit field displayed with a label.

If a Text Edit Field is the only element / form group within a form (e. g. Assignment block;Edit page) group header and label are omitted (in this case the assignment block title or thepage title substitutes for the table title).

Text displayed in a Text Edit Field spanning two columns is hard to read. It is recommendedto use Text Edit Fields only spanning one column (maximum of 8 grid cells).

6.9. Tables in formsUsage, layout, features, and recommendations relating to tables in general are described inChapter Tables..

If a table is used on form group level/as a separate form group, the table header isdisplayed and serves as group header.

Figure 6-9. Example of a form with integrated table displayed with a header.

If a table is used as an element within a form group, the table header is omitted and thetable is displayed with a label. The label is aligned with the labels of other elements withinthe form group.

Figure 6-10. Example of a form with integrated table displayed with a label.

If a table occurs together with other tables or form fields within a form, then it must have avisible table title.

Exception: If the table is the only element in a form or if the other elements are only used toinfluence the table display (for example, there is only a dropdown list box above the tablewhich filters the table content) then the table needs no title (in this case the assignmentblock title or the page title substitutes for the table title, see above, 6.4 Form Groups).

6.10. Checkboxes and Checkbox GroupsThe checkbox control can have two "labels".

Figure 6-11.Checkbox with label and checkbox text.

The left checkbox label is used for checkboxes to enter or display a binary attributeindependent from the surrounding fields. The checkbox appears aligned with theneighboring fields:

Figure 6-12. Independent checkbox with label and checkbox text.


_________________________________________________________________________________________________________________________________________________________

Page 37 of 98

The right checkbox text is used for checkboxes to handle attributes which are dependent onthe preceding field. The "missing" label indicates the dependency.

Figure 6-13. Dependent checkbox with checkbox text (no label).

If appropriate in the overall layout context of a form, dependent checkboxes with text can bearranged in a melting group with the corresponding field.

Figure 6-14. Dependent checkbox and checkbox text in melting group with correspondingfield.

Checkboxes can be grouped to handle sets of binary attributes. A checkbox group has alabel, and all its options have texts. The individual checkboxes are aligned with the otherfields on the layout.

Figure 6-15. Checkbox group.

If a checkbox group is the only element / form group within a form (e. g. Assignment block;Edit page) group header and label are omitted (in this case the assignment block title or thepage title substitutes for the table title).

6.11. Radio Button GroupsRadio buttons provide users with a single choice from a set of alternative options which aremutually exclusive. Radio buttons are used in groups and are aligned vertically with otherform elements. If you need more than 5 radio buttons use a dropdown list box instead.

For the alignment of radio buttons we distinguish the following cases:

Radio buttons that refer to adjacent fields

Radio buttons that do not refer to elements but should be included in fieldgroups

Radio buttons that can be arranged as an independent block of information

Radio Buttons that Refer to One or More FieldsAlign dependent radio buttons with the left border of other input elements. The radio buttonlabels are placed right to the radio button (see Figure 6- 16).

Figure 6- 16. A pair of radio buttons that refers to the input field above it (Some field).

Radio Buttons that are Included in a Field Group

If radio buttons are included in a field group but do not refer to a certain field, do thefollowing (see Figure 6- 17):

Place the description of the radio button group to the left of the group and align itwith the other field labels

Align the radio buttons with the other input fields

In general, radio button groups within a field group should have a descriptive label for thegroup and a label to the right of each radio button.

Figure 6- 17. Radio buttons within a field group with group label to the left

Radio Buttons that Form an Independent Information Block

If radio buttons are arranged in a separate radio button group, separate them from thesurrounding form elements using white space (see Figure 6- 18):


_________________________________________________________________________________________________________________________________________________________

Page 38 of 98

Figure 6- 18. Radio button group that forms an information unit of its own.

If a radio button group is the only element / form group within a form (e. g. Assignmentblock; Edit page) group header and label are omitted (in this case the assignment block titleor the page title substitutes for the table title, see above, 6.4 Form Groups).

6.11.1. Explanatory TextA form as a whole may have an explanatory text that provides end-user help on using theform. Explanatory text for a whole form is always the first element of the form.

Form groups may also have explanatory text. Such texts are placed directly below the groupheader.

UI Guidelines for SAP CRM –Chapter 7 Advanced Search

_________________________________________________________________________________________________________________________________________________________

Page 39 of 98

7. Advanced Search

7.1. OverviewThe advanced search lets the user find and navigate to instances of any type of object thatis available for a specific user role. The advanced search pattern occurs in the followingsituations:

o Within the work area as the regular search facility for CRM objects

o Within search help dialog boxes that are launched to determine the appropriate valuefor a certain field in a form or table.

A regular advanced search is accessed either using a link in the Search group of a workcenter or using a second-level entry in the navigation bar.

The advanced search consists of these focus areas (Figure 7-1):

o Search area. The search area contains all required fields and functions to specify thesearch terms and start the search.

o Search result list. The search result list appears directly below the search area.

o Saved and central searches. Users can use the saved search function to call upexisting search queries anytime and from everywhere in the application. Centralsearches allow users to enter a search value directly without requiring navigation to theadvanced search screen.

Figure 7-1. Overview Search

The work area title of an advanced search screen is defined as follows:

Search: <Name of Object in plural>

An example for the object Sales Order is shown in Figure 7-1.

7.2. Search AreaBy default, the search screen opens with a predefined set of search statements (maximumof 4 rows). The application defines these default rows. It is possible to change the type anddefault number of search statements in the search screen by configuration.

The typical arrangement of a search statement is as follows:

<search attribute> <operator> <search field> [and <search field>]

An example of a default set of statements and all additional functions can be seen in Figure7-2.


_________________________________________________________________________________________________________________________________________________________

Page 40 of 98

Figure 7-2. Search Area

State after navigating back to the advanced search screen: After leaving an advancedsearch screen and navigating back to this screen (for example, by using history Back ornavigation bar entry), the advanced search is displayed in the same state as it was whenthe user left it. No reset of attributes, operators, or search result lists occurs, nor clearing ofsearch fields.

Due to memory consumption issues, a BOL reset takes place (performed by the framework)when the user navigates to the home page or a work center page. If a user navigates to asearch page (where he or she had executed a search) after a BOL reset, then the statementabove is true, only the search result list is no longer filled.

7.2.1. Search Attribute SelectionField labels can be selected in dropdown boxes. The order and sequence of the field labelsthat are displayed is customizable. If no other sequence is required, the entries shouldalways be sorted alphabetically (since it is problematic to provide sorted dropdown boxes inall relevant system languages, this is just a recommendation). The size of the dropdown boxis limited. If the number of displayed field labels exceeds the size of a dropdown box(usually seven lines), scrollbars are shown. To avoid excessive numbers of entries in thesedropdown boxes, only the most important search attributes should be offered initially.

Fields that are hidden in Customizing for the specific object are not to be displayed in thecontent of the first field label selection dropdown box in each row.

After changing a search attribute, the corresponding search field is always cleared. Thecorresponding operator is set to the default operator for the selected search attribute.

7.2.2. Operator SelectionThe operators shown in the operator selection fields depend on the selected field label.They are relations between the field label and search fields and displayed in naturallanguage.

Table 7-1 provides an overview of the operators available for the different types of searchfields.

Table 7-1. Operators

Field Label Corresponds To Operators

Text Field is, is not, is empty, starts with, contains

ID Fields (alphanumeric fields thatusually contain numbers)

equals, does not equal, is greater than, is less than, is between,is empty, contains

Numeric Field equals, does not equal, is greater than, is less than, is between,is empty, contains

Date Field is, is not, is between, is earlier than, is later than

Dropdown Field is, is not, is empty(in cases where the dropdown box contains an empty entry)

Special cases:

o If the operator is between is selected, a second search field is displayed next to theoriginal one. The and shows the connection between these fields.

o If the operator is empty is selected, the corresponding search field disappears.

o After changing an operator, the corresponding search field is not cleared.

o After a change from is to is between, an existing search term is displayed in the firstsearch field of the is between search statement – the second field is empty.

o After a change from is between to is, the search field is filled with the search term fromthe first search field of the is between statement.


_________________________________________________________________________________________________________________________________________________________

Page 41 of 98

o If not both fields of a search statement with is between operator are filled with a value,an error message has to be launched after triggering the search.

o If an application cannot provide the complete set of standard operators, the applicationcan restrict the available operators depending on the selected field.

7.2.3. Search FieldsRendering of search fields depends on the selected field label and the selected operator.Usually, rendering of search fields is the same as rendering of the corresponding field withinan application. For example, if a field is rendered as a dropdown list box within an editableform, it should also be rendered as dropdown list box in the advanced search.

If a search is launched with a blank search field, the search is treated as a search for “*”(that is, the search is run for all records in the corresponding database).

Wildcard search: With the operator is, no automatic expansion is performed. Therefore, anexact search for <TERM> is possible. If a wildcard search is required, wildcards have to beentered manually (for example, <TERM>*, *<TERM>, <TE>*<RM>).

7.2.4. Add/Delete Search StatementsThe user can duplicate (+) or remove (-) search statements. It is not possible to remove allsearch statements – if one row is left, only the duplicate (+) icon is shown.

The size of the advanced search area depends on the amount of attributes that aredisplayed. Adding or deleting an attribute results in changing the size of the advancedsearch area.

7.2.5. Logical Relationships Between Search StatementsLogical operators default to:

o OR between multiple instances with the same field label

o AND between search statements with different field labels

Examples:

o The following search statements are connected by a logical OR:

[Account ID] [is] [12345]


o The following search statements are connected by a logical AND:


[Contact Person ID] [is] [54321]

7.2.6. Combined SearchesIt has to be possible to search for more than one “search field-value” combination, wherethe two (or more) search values depend on each other.

Examples:

o Search for customer X with partner function Y (Partner Function freely customizable)

o Search for skill X with proficiency Y

o Search for marketing attribute X with value Y

Combined searches are entered using dedicated selection dialog box windows. Figure 7-3shows a multi-value selection dialog box and the corresponding search field filled withmultiple values. In general, the guidelines for dialog boxes apply for the selection dialogboxes.


_________________________________________________________________________________________________________________________________________________________

Page 42 of 98

Figure 7-3. Multi-Value Selection Dialog Box and Corresponding Search Field

The following rules for combined searches apply:

o Search statements that require a combined search are equipped with a search fieldwith an Input Help icon.

o The input help launches a dialog box that allows users to enter the required (combined)search values.

o Selection of search values may be done with either a dropdown list box (if number ofalternatives < ~10), input help, or a (simple) value help.

o For combined searches, only the operator is is available. This avoids possible problemsconcerning the dependencies between (combined) search values.

o Currently, only one search term combination per search statement can be defined (thatis, no AND connection of multiple combined search terms). The elements of acombined search term are displayed in the corresponding search field, separated bysemicolons (;).

o Though legibility may be less than optimal, the IDs of the search values are usuallyshown as elements of the combined value.

o In the initial state (for example, no values have been provided), all fields of the selectiondialog box are empty – that is, dropdown list boxes show blank entries. When a field inthe selection dialog box is changed, all dependent fields are set to the initial state.

o If a combined search field is already filled with a combination of values and thecorresponding search help is launched again, then the search help dialog box containsthe search values that were entered previously.

o Dependent fields in the selection dialog box are displayed in read-only mode if thesuperordinate value has not been selected.

o Title of the selection dialog box: “Select <Search Field 1>, <Search Field 2>, and<Search Field n>” Example: Select Partner and Partner Function. If this is not possible,there should be a general title: Select Search Criteria.

o Mandatory fields are visualized as defined for all input fields.

7.2.7. Maximum Number of Results FieldThe default value for the maximum number of results threshold is set to 100. This thresholdvalue may be overwritten by the user in the Maximum Number of Results field.

If the number of hits exceeds the number of the result list threshold, an information messageis provided in the table header:

Result List: More than <maximum number of records> <object type - plural> found

The result list is filled with the number of hits defined by the threshold.

If the field does not contain any number (because it has been deleted) and then a search islaunched, the default maximum number is used for this search and the default maximumnumber is (re-)entered in this field.

7.2.8. Search/Clear ButtonThe search can be started by either clicking the Search button, or by pressing the ENTERkey. The Clear button clears all search fields as well as the search result list, but does notreset the search statement (that is, attributes and operators are not changed, no lines areremoved).The Clear button does NOT clear the Save Search As field, nor the MaximumNumber of Results field. If a column of the search result list has been sorted, Clear does notreset this adjustment.

7.2.9. Hide Search FieldsTo hide the advanced search area, the corresponding link (Hide Search Fields) has to beused. Hiding/collapsing the advanced search area leads to a full screen display of the resultlist (20 rows in total can be displayed, instead of 10 rows).

The link Hide Search Fields is switched to Show Search Fields. After clicking the ShowSearch Fields link, the combined screen with a search form and a result list is displayed,and the link Hide Search Fields appears again.

Collapsing and expanding the advanced search area does not affect the data entered in thisarea, or its usage in executing the search.

7.2.10.Contextual Search StatementsFor re-using advanced searches in various applications contexts, for example re-using anadvanced search as search-help, an application shall be able to influence search-statements of an advanced search at runtime.

According to this, the following capabilities are provided:

o Pre-defining search statements including pre-filled search field and hiding those searchstatements to the user.

o Pre-defining search statements and showing them - as usual - to the user.


_________________________________________________________________________________________________________________________________________________________

Page 43 of 98

o Pre-defining search statements and showing them read-only to the user without plus- orminus-buttons for removing or duplicating these search statements.

7.3. Result ListThe general list or table behavior is described in chapter Tables. In general, the result list isnot equipped with line selectors, if no line-specific function is available on the result listtoolbar.

The records found after launching a search query are displayed in the search result list. Asa default, the result list shows a maximum of 10 lines. If the advanced search area is set tohidden mode, a maximum of 20 rows is displayed by default. Empty rows are not displayed.If the maximum number of rows to be displayed has been changed in the personalizationarea of the result list, the number of rows in each case is exactly as personalized – there isno difference between states with hidden or displayed search statements.

Multiple selection of result list lines is possible. For more details, see the table specificationsin chapter Tables.

7.3.1. Table Title and MessagingThe table title displays the number of results found as well as information about when themaximum number of results has been exceeded (this message is not shown in the messagearea). The table title remains unchanged within the user session until a new search hasbeen launched. Navigating away from a search page and coming back to a search pagemust not have an impact on the result list title.

The “No Results Found” message only occurs when a search has been started. Thismessage is not shown when the search result list is in the initial state. For more details onmessaging, see section 14 Messag.

7.3.2. Mass Change FunctionMass changes may be triggered with buttons on the result list toolbar. The Mass Changedialog box is triggered by the Change Status button in the result list toolbar. The selectedstatus (in this case Completed) is applied to all selected entries in the result list after clickingthe OK button in the Mass Change dialog box.

A Mass Change dialog box is required only if selectable alternative values exist for the masschange. For example, if the mass change only changes the status of all selected objects toClosed, then it is sufficient to provide a Mass Change button with a label such as Close<Object Type>.

If the intended change cannot be applied to a subset of the selected objects (for example,because of insufficient authorization), then all objects that can be changed are changed,and for all the other objects, a message is displayed stating that not all selected objectscould be changed.

If changes for some of the selected entries were not made successfully, then only onemessage is displayed that informs the user about this status. The Details link of thismessage navigates the user to a screen where he or she can see the complete list of failedchanges.

7.3.3. New and Deleted Objects in the Result ListThe following use cases have to be considered:

o The user navigates from the result list to the overview page of an object. On theoverview page, the object is deleted and the user is then taken back to the searchpage.

o The user navigates from the result list to the overview page of an object. From theoverview page, the user creates a new object and then navigates back to the searchpage.

In the first case, the deleted object is still visible, while in the second case, the new object isnot yet visible. To obtain an updated result list, a new search is required.

7.4. Saved SearchThe access to saved searches is combined with the access to the central search (section7.5). The respective function can be selected by a label shuffler control. The savedsearches function is activated by selecting the entry Saved Search from the label shuffler.The selection of central searches is done using the entries below the Saved Search entry.

7.4.1. Save Search AsTo save a search query, the user has to enter a name in the Save Search As field and pressthe button Save (as shown in Figure 7-4).

If all search fields are left blank, the statement cannot be saved. There is a dialog instead:Search has not been saved; enter at least one search criterion

After clicking the Save button, the statement is saved and is then available in the SavedSearches dropdown list box (Figure 7-5). All search statements currently visible on thescreen remain unchanged. This means that none of the lines disappear – even when nosearch terms were entered.


_________________________________________________________________________________________________________________________________________________________

Page 44 of 98

After the search has been saved, the input field for Save Search As is cleared and aninformational message Search <search name> has been saved is displayed in the messagearea.

Figure 7-4. Save Search As

7.4.2. Opening a Search QueryTo open a search query, the user has to select the saved searches mode from the labelshuffler control (if the label shuffler is in central search mode) and then select an entry in theSaved Searches dropdown list box and press the Go button (as shown in Figure 7-5).

When calling a saved search, only the search statements with filled search fields (thestatements that constitute the search) are displayed.

After running a saved search, the search result list is shown with hidden search fields. Thesearch fields can still be opened by the user to show the search criteria of the executedsaved search.

By opening the search criteria and then pressing the Clear button, the search fields and theresult list are cleared.

Figure 7-5. Open a Saved Search

7.4.3. Editing a Search QueryTo change a search query, the user has to select an entry in the Saved Searches dropdownbox and click the Advanced button. The saved search statement is displayed, no search istriggered, and the result list is left in its current state (i.e., the list is empty if this search hasnot been run before within the current session and the list is filled if the search has alreadybeen run). The user can then change the search criteria in the advanced search area. Tosave the edited search, the user chooses the Save button.

If search criteria for an existing saved search have been changed and the search is thensaved under the same name, no dialog appears to ask the user to confirm the changes. Ifno criteria have been changed and the user enters a new name for a saved search, thesaved search with the old name is not overwritten.

7.4.4. Deleting a Saved SearchTo delete a saved search query, the user selects a saved search from the Saved Searchesdropdown box and chooses the Delete icon. The saved search is deleted immediately. Noconfirmation dialog box is launched.

7.5. Central Search and Simple SearchThe central search allows users to search with one single search criterion without requiringnavigation to the advanced search screen. With the central search, the user can, forinstance, search for an account by last name or for a marketing campaign by ID.

Simple Searches are available when objects of the CRM system are enabled for EnterpriseSearch. For those objects, a one-field-search over all connected object-types or over onespecific object type can be launched. If a simple search over more than ob object type hasbeen launched, the search result may consist of several result lists – one list for each objecttype.

Central searches and simple searches cannot be deleted – therefore the delete button atthe far right is deactivated when a central search or a simple search has been selected.

7.5.1. Selecting and Starting a Central SearchCentral searches can be selected from the label shuffler below the entry Saved Searches,where a horizontal separator and a list of objects are shown.

Search fields corresponding to those objects occur in the second level of the label shufflermenu (Figure 7-6). The label shuffler text is adjusted according to the selected object andfield. The central search is started by clicking the Go button.


_________________________________________________________________________________________________________________________________________________________

Page 45 of 98

7.5.2. Refining a Central SearchTo refine a central search, the user clicks the Advanced button. The corresponding searchstatement of the selected advanced search will be displayed. If this statement is not part ofthe default search statements of this search, the statement of the central search will bedisplayed additionally.

Figure 7-6. Selection of a Central Search

7.5.3. Selecting and Starting a Simple SearchSimple searches can be selected from the label shuffler below the entry Saved Searches,where a horizontal separator and a list of objects are shown. A simple search over allconnected object types is selected via the All Objects entry below the horizontal separator.

Simple searches for single objects types can be selected via the Free Text entry on top ofthe second level of the label shuffler menu entries. The label shuffler text is adjustedaccording to the selected object. The simple search is started by clicking the Go button.

7.5.4. Simple Search Result ListsSince the simple search may cover more than one object type (e.g. orders, opportunities,leads, accounts, and quotations), multiple result lists (one for each object type) may beprovided. The result lists can be collapsed and expanded.

7.6. Archive SearchArchive searches are dedicated searches within sets of already archived objects. Sincearchived objects may have different or less attributes as the regular objects, specific archivesearches have to beoffered. Users can access the Archive Search screen by switching theregular advanced search to archive search mode. This is done with the Archive Searchbutton in the work area toolbar of the advanced search screen. After clicking this button, theArchive Search area appears and the toolbar button changes to Back to Standard Search.Figure 7-7 displays the two modes of the advanced search.


_________________________________________________________________________________________________________________________________________________________

Page 46 of 98

Figure 7-7. Standard Search and Archive Search

7.6.1. Default Search Statementso If possible, the same default search criteria should be displayed in the regular search

and archive search.

o If possible, the same default operators should be displayed in the regular search andarchive search.

7.6.2. Search Result Listo If possible, the search result lists of the regular search and archive search should

consist of the same columns in the same order with the same default sorting. If some

fields do not exist for one of the searches, the corresponding columns are notdisplayed.

o If the search result list toolbar for the regular search contains function buttons that arenot available for archive searches, those buttons do not appear in the archive searches.

o The search page for archive searches is equipped with an extended title: Search:<object> - Archive Search. This ensures that the user can see that the list containsarchived data, even if the search fields are hidden.

7.6.3. Search Statements after Navigation to Other Search Typeo If search statements adjusted in the initial search type (1) are also available in the

subsequent search type (2), then those statements should also be displayed in search(2) and the search fields should be filled with the search terms from search (1).

o Example: if the regular search (1) has a search statement Last Name that is alsoavailable in the archive search (2) and this statement is displayed in (1), then it shouldalso be displayed in (2) after a switch from (1) to (2). Furthermore, if a search field ofsearch (1) contained a search term (Last Name “Miller”), then this search term will alsobe contained in search (2), if the corresponding field is available in (2).

o If a search criterion is in principle available in the archive search, but not displayed dueto the configuration, then this criterion will also not be displayed even if it has beenused in the corresponding standard search.

7.6.4. Saved Searcheso When saving a search statement within an archive search, calling the saved search will

take the user back to the corresponding archive search.

o If a user has called a search for online data and then switches to the correspondingarchive search, all search values that are applicable for the archive search will betransferred to the archive search. Non-applicable search values will be ignored. In thesame way, the values of a saved archive search will be transferred to thecorresponding online search.

7.6.5. Search Help Dialog Boxeso In search help dialog boxes, only regular searches can be conducted.

o Search help dialog boxes are not equipped with the Archive Search button.

o History breadcrumbs


_________________________________________________________________________________________________________________________________________________________

Page 47 of 98

Since the archive search has its own work area title, a history breadcrumb entry foreach search should be written.

7.7. Search HelpNote that the type of search help described in this section is the only one that isrecommended and supported by the CRM WebClient UI Guidelines. The “complex valuehelp dialogs,” as mentioned in section 8.5.3, are explicitly deprecated. Nevertheless, someof these dialogs still have to be available for technical reasons.

Search helps are always associated with editable fields. The combination with non-editablefields is not permitted.

7.7.1. Opening a Search Help Dialog BoxTo open a search help, the user can either click the Search Help icon ( ) or entersomething in a field that is equipped with the Search Help function and press ENTER. Afterpressing ENTER, the following cases have to be considered:

No matching value for the entered value exists:

o The system sets all entered letters to capital letters.

o The system automatically adds in the field behind the manually entered value the text‘(does not exist)’.

o The system launches an error message in the application log.

Exactly one matching value for the entered value exists:

o The complete value is inserted; no search help dialog is started.

More than one matching value for the entered value exists:

o On hitting ENTER, the information entered manually by the user is used to open thesearch help dialog box and directly offers in the result list all entries that match theinformation that was entered.

o The search area is closed automatically when the value help is opened, in this case.

o If the user opens the search area manually, then the search fields show the defaultsand the value fields are blank.

o For fields supporting the manual entry of more than one value type (such as businesspartner fields that allow entry of ID or name), this behavior should work for both types ofmanual entries.

In general, search terms without appended wildcards are treated as terms with wildcards.Terms without wildcards are also expanded automatically. For example, the term “Mi” in asearch field will be treated like “Mi*”.

Consistent workaround:

o The user enters something that is not unique in a field and presses ENTER. Noautomatic confirmation of the first value is found, but an error message appears toinform the user that the entry is not unique. The text in the field remains as it wasentered by the user.

7.7.2. Properties of Search Help Dialog BoxesDefault search fields in search help dialog box windows may either be the same as ordifferent from default fields in the corresponding advanced search. Saved searches are notavailable for search help dialog boxes.

When the user makes a selection and leaves the dialog box, the dialog box is launchedagain with blank search fields and an empty result list, but the attributes and operators thatwere adjusted previously remain unchanged.

Search fields in a search help dialog box are usually of the following types:

o Plain input fields

o Input fields equipped with access to a (simple) value help or a date picker

o Dropdown boxes

Input fields equipped with access to a search help dialog box may be provided, but searchhelps called from within a search help must not provide access to further search helps (toavoid excessive stacking of dialog box windows). Access to simple value helps is permitted.

The result list of a search help is not equipped with an “export to Excel” function.


_________________________________________________________________________________________________________________________________________________________

Page 48 of 98

Figure 7-8. Search Help Dialog Box

7.8. Smart Value HelpThe smart value help is available for fields that are either equipped with a search help or aregular simple value help (for example country or language fields). The smart value help is amenu that is automatically opened below an associated field. As a default, the smart valuehelp offers the last 5 entries that have been entered by the user. Figure 7-9 Smart valuehelp showing the last 5 entriesshows an example for a smart value help in a search form.

Figure 7-9 Smart value help showing the last 5 entries

If the empty field is entered with tab or mouse nothing is shown. If the down arrow key ispressed or the field is double clicked the last 5 entries are displayed. Also after somethingwas typed, the matching values (case insensitive) from the last 5 entries are shown. Themost recent entry is shown on top.

The first entry is selected. Up/down arrow and mouse over change the selection. Tab,return, enter or mouse click fills the selected entry into the field and closes the menu. Esc orclicking outside the menu field closes the menu without filling the field.

In connection with a simple value help, a background search depending on the enteredcharacters is started additionally and the smart value help menu displays both the last 5entries and the results of the background search. Figure 7-10 Smart value help at a fieldassociated with a simple value helpshows an example.

Figure 7-10 Smart value help at a field associated with a simple value help

The last 5 entries are displayed in temporal order. Separated by a dashed line thealphabetically sorted results of the background search are displayed. The smart value helpmenu displays a maximum of 10 entries at a time. With the eleventh entry, a scrollbaroccurs.

UI Guidelines for SAP CRM – Chapter 8 Dialog Boxes

_________________________________________________________________________________________________________________________________________________________

Page 49 of 98

8. Dialog Boxes

8.1. OverviewA dialog box is a new window that appears to present information or to request input. Adialog box is always instantiated by a parent window.

Dialog boxes can have 2 different modes:

o Modal. Until the dialog box is finalized, its parent window remains inactive. A modaldialog box interrupts the user’s task and waits for a decision or confirmation.

o Modeless. The dialog box’s parent window can be used independently of the dialogbox. Thus a modeless dialog box leaves the user with the decision to either process thedialog box, or continue his or her action in the primary window and leave the dialog boxfor later.

Navigation in or out of the dialog box:

o A modal dialog box does not contain any navigation options that lead out of the dialogbox, except for finalizing it (for example via the OK, Accept, Done, or Cancel buttons).Exception: A link that leads to end-user help, any external link that opens a modelessdialog box or any input help that opens another search help (such as in advancedsearch) may contain navigation options. Only two layers of dialog boxes are allowed.

o A modal dialog box may contain navigation options within the modal dialog box itself(such as tabs, or navigation area).

Usage of dialog boxes:

o Information. A user action requires that the user is informed specifically about someresults. A dialog box appears, showing the respective information.

o Confirmation. After a critical user action, the user is asked for confirmation.

o Input help. An input help dialog box helps users enter data.There are three different input help types:

• Simple input help

• Search help

• Complex input help (deprecated)

o Personalization dialog boxes. To enable the user to use his or her preferred settings,a personalization dialog box is used (for example for tables and application settings).

o Additional input required. Some user actions, such as clicking a button, enteringdata, or selecting a navigation entry, might require additional input so that theapplication can proceed.

• Decision dialog box

• Application-specific dialog box

8.1.1. Design of the Dialog BoxDialog boxes appear in a standard window design (depending on the operating system).They have an application-specific title (-- Web Page Dialog is automatically added by theframework), content, and optionally at the bottom, a fixed button row that is left-aligned.(Exception: Decision dialog boxes have a centered button row.)

Dialog boxes can have a message bar (Figure 8-1) and offer a link to the end user help thatis placed in the toolbar (if necessary).

Figure 8-1. Message Area and End User Help Link in Dialog Boxes

8.1.2. Size of the Dialog BoxThe size of the dialog box adapts to the width and height of the content.

However, if it is necessary to define width or height of a dialog box, the rule of thumb for thewidth is that 50% of the screen width should be used (if applicable). For the height, the ruleis that the height should adapt to the contents' height, but if it exceeds 3/5 of the screenheight, a scrollbar for the content appears.

8.1.3. Canceling a Dialog BoxThere are two options for canceling a dialog box: either by using the standard windowsdialog box “close” button (“X”-icon in the right top corner) or, if available, by using thestandard “Cancel” button. Both buttons have the same function: They close the dialog boxand the user returns to the page where the dialog box was launched.


_________________________________________________________________________________________________________________________________________________________

Page 50 of 98

8.2. Information Dialog BoxIf a user action requires that the user is informed about some specific result, an informationdialog box appears, showing the respective information. It contains the OK button.

8.3. Data Loss Dialog BoxOne elementary component of the general navigation logic is the existence of a data lossdialog box.

Whenever a user leaves a page (for example, by using a hyperlink or selecting an entry inthe navigation bar) and changed, unsaved data exists that is about to be lost by leaving thepage, a data loss dialog box has to appear. This data loss dialog box offers the user thefollowing options: continue and save, continue without saving, or cancel the navigation.

Leaving a page does not necessarily indicate an automatic loss of changed, unsaved data,so the business use case determines when exactly the data loss dialog box must appear.Technically, the data loss dialog box must appear if the user starts a cross-componentnavigation while the current page or object still contains changed, unsaved data.

8.4. Confirmation Dialog BoxAfter a critical user action, the user is asked for a confirmation. An example of aconfirmation dialog box is the Save Changes dialog box:

Figure 8-2. Example of a Confirmation Dialog Box

The confirmation dialog box contains a text area with the confirmation text and at least oneconfirmation button, which is emphasized and can be executed by pressing ENTER. Thebuttons in the confirmation dialog box are centered:

Figure 8-3. Template of the Confirmation Dialog Box

8.5. Input HelpsAn input help dialog box helps users enter data. There are different kinds of input help.Search help dialog boxes are described in more detail in section 7.7.

8.5.1. Simple Input HelpA simple input help dialog box contains predefined values stored in the ABAP dictionary(DDIC). If the values exceed seven entries, the simple input help dialog box is preferred tothe dropdown list box. However, the application has some “freedom” to display 15 values ina dropdown list box, for example.

If the values of the simple input help (Figure 8-4) exceed the maximum height of the table, ascrollbar appears. However, a horizontal scrollbar should never appear. If required,personalization can be offered for the table.

The title of the simple input help is Search Help.

Figure 8-4. Example of Simple Input Help


_________________________________________________________________________________________________________________________________________________________

Page 51 of 98

8.5.2. Search HelpA search help dialog box (Figure 8-5) contains the advanced search to support the user insearching for data. It has the same layout as the search page, but should not contain theSave Search As area. As in the advanced search, if the search result list exceeds themaximum number of rows (10), a pager appears.

A search help can be in single-select or multi-select mode. In single-select mode, the dialogbox closes as soon as the user selects a row. In multi-select mode, a Choose button isplaced below the search result list.

The application-specific title is similar to the one on the search page: Search: <objects>.

Figure 8-5. Examples of Search Help Dialog Boxes

8.5.3. Complex Input Help (Deprecated)The complex input help (Figure 8-6) is an enhanced simple input help with an additionalsearch criteria area (such as a DDIC search).

This input help should not be used unless user input support cannot be realized with anadvanced search help or a simple input help.

If the values of the simple input help exceed the maximum height of the table, a verticalscrollbar appears. However, a horizontal scrollbar should not appear. If required,personalization for the table can be offered.

The title of the complex input help is Input Help.

Figure 8-6. Example of Complex Input Help (Deprecated)

8.6. Personalization Dialog Boxes (Table, Simple, Complex)To enable the user to use his or her preferred settings, a personalization dialog box is used(for example for tables and application settings).


_________________________________________________________________________________________________________________________________________________________

Page 52 of 98

Figure 8-7. Example of a Personalization Dialog Box for a Table

Application-specific personalization dialog boxes should follow the template shown in Figure8-9.

8.7. Additional Input Required Dialog BoxSome user actions (such as clicking a button, entering data, or selecting a navigation entry)might require additional input so that the application can proceed.

8.7.1. Decision Dialog BoxA decision dialog box is used, for example, to determine the transaction type of an object:

Figure 8-8. Example of a Decision Dialog Box

If a decision dialog box is in single-select mode, the dialog box closes as soon as the userselects a row. If a decision dialog box is in multi-select mode, a Choose button is addedbelow the table, with one empty row of distance separating it from the table.

If the values of the table exceed the maximum height of the table, a scrollbar appears. Therecommended number of rows displayed until the scrollbar starts is 15 rows.

The preferred table styling for the decision dialog box is the “search result list”, which has ablack font color.

The title of the decision dialog box that allows you to choose the transaction type is SelectTransaction Type.

8.7.2. Application-Specific Dialog BoxExamples of an application-specific dialog box include the Mass Change dialog box and theContact Quick Create dialog box.

Application-specific dialog boxes follow the template shown in Figure 8-9.

They contain the following elements:

o Dialog box title (mandatory)

o Explanation text (optional). This is only used if it is a very complex dialog box andexplanation is needed to understand and use the dialog box.

o Group header (mandatory)


_________________________________________________________________________________________________________________________________________________________

Page 53 of 98

o Application-specific content (such as tables and form views)

o Finalize button (mandatory)

o Cancel button (mandatory)

Figure 8-9. Template for Application-Specific Dialog Box

The application-specific dialog box might have an input help that opens a search help. Inthis case, nesting of three dialog boxes is allowed.

UI Guidelines for SAP CRM – Chapter 9 Tables and Hierarchies

_________________________________________________________________________________________________________________________________________________________

Page 54 of 98

9. Tables and Hierarchies

9.1. OverviewTables are among the most-used screen objects on the UI. Mostly, a table serves as a viewof business objects and their attributes. Tables provide access to data for display andmaintenance purposes. The data is displayed in rows and can be distributed across severaltable pages. Table rows can contain hyperlinks to navigate to other screens.

A large number of table types can be used, which differ in visual and interaction design.Therefore the table control can be adjusted to fit the requirements of the appropriate usecases and screen locations.

Hierarchies have basically the same functions and features as tables, e.g. drag and drop,selection behavior, cell navigation, personalization, etc. In comparison to tables, hierarchiesdo organize a collection of items at different levels. The hierarchy is a data structure thatcan contain different objects at n levels. The hierarchy nodes can be expanded or collapsedvertically using a collapse/expand icon per item row. The different types of objects can bevisualized with an icon displayed after the triangle optionally.

Furthermore tables and hierarchies can be used in a so called master-detail screenconstruction. Especially when the item rows are of different type and contain heterogeneouscontent which cannot be shown in common columns master-detail constructions may help.A selection of an item row within a master-table or -hierarchy triggers a display of dependentdetail data. Please consider that such constructions can get complex in interaction behaviorproviding all available features of tables and hierarchies and combining theses dependentlyin the master and in the detail sections. In most cases it will be most simple to navigate to aseparate OVP or Edit Page rather than to use a master-detail construction. Please contactyour UI Designer for support.

See Chapter 5 Overview Page.

9.1.1. Elements of the TableA table generally consists of the following elements:

Title bar. Contains the table title and, dependent on the table location, alsofunction buttons.

Toolbar. Contains function buttons and icons.

Column headers. Contain the titles of the table columns with the sorting andfiltering function.

Selection column. Contains the Select All/Deselect All function icon and selectoricons.

Actions column. Contains function icons and links for direct row manipulation.

Vertical scrollbar. Scrolls all table rows per page.

Table row. Contains a sequence of data cells.

Footer. Contains the Show More/Show Less function and/or, if no scrollbar isused, the paging function.

Figure 9-1: Table Elements

9.1.2. Elements of the HierarchyA hierarchy generally consists of the following elements:

Title bar. Contains the hierarchy title and, dependent on the hierarchy location,also function buttons.

Toolbar. Contains function buttons and icons.

Column header. Contain the titles of the table columns with the sorting andfiltering function.

Selection column. Contains the Select All/Deselect All function icon and selectoricons but only for multi-selection in edit mode.

Vertical scrollbar. Scrolls all table rows per page.

Hierarchy row. Contains a sequence of data cells on different hierarchy levels.

Footer. Contains the Show More/ Show Less function and/or the paging function.Hierarchies should preferably scroll vertically only.


_________________________________________________________________________________________________________________________________________________________

Page 55 of 98

Hierarchy column. Contains hierarchy rows representing the hierarchicalstructure. The row of nodes containing subnodes starts with a collapse/expandicon. A click on a collapse/expand icon can either hide or show a subnode. If aparticular level of the hierarchy does not contain any subnodes, nocollapse/expand icon is displayed.

Object Type Icon. Optionally, an object icon can be used after thecollapse/expand icon to visualize the object type.

Figure 9-2: Hierarchy Elements

9.2. Editing ModesTables and Hierarchies can appear in read-only or in edit mode. Dependent on the use casethere can be a switch from read-only to edit mode, e.g. with the function buttons Add, New,and Edit. Dependent on the need of function buttons a toolbar and selector icons can bedisplayed additionally. Especially for tables, empty editable rows can be insertedautomatically while switching into the edit mode.

9.2.1. Read-Only ModeThe read-only mode does not allow users to change data in the data cells directly. The read-only mode is to be used whenever data cells should not be editable.

Figure 9-3: Table in Read-Only Mode

Figure 9-4: Hierarchy in Read-Only Mode

9.2.2. Edit ModeThe edit mode can display data that is permanently not editable (as it is in the read-onlymode), temporarily not editable, or always editable. The edit mode provides controls in thedata cells to insert and change data directly in input fields, dropdown list boxes, radiobuttons, and checkboxes for example.

Figure 9-5: Table in Edit Mode


_________________________________________________________________________________________________________________________________________________________

Page 56 of 98

Figure 9-6: Hierarchy in Edit Mode

9.2.3. Function Triggering with ButtonsFor applying functions on single and multiple row items, the following behavior can be usedgenerally. First, a selection of one or several item rows is a precondition for all followinginteractions. Then, pressing a button within the table or hierarchy toolbar will trigger therespective function. Functions which are related to all table items (included all items whichcurrently invisible but placed on other table pages) do not care about selected or deselectedrows always (e.g. Print).

9.2.4. Function Triggering with One-Click ActionsAs the name implies, One-Click Actions are actions which can be triggered by one clickwithout the need to do first a row selection and afterwards a function button trigger (whichcosts extra way of mouse navigation and one click more). Because table toolbars arehidden in read-only mode but One-Click Actions are still visible important functions can bemade accessible a bit earlier without switching into edit mode first. One-Click Actions foreach table row are grouped in the so called Actions column which is displayed at thebeginning of the table (besides the Selector icon column the Actions column is the first tablecolumn always). The action is related to a single table row item only. One-Click Actions canbe used in hierarchies as well. Here the Actions column is displayed before the hierarchycolumn.

In this document the name One-Click Action is also used for the trigger element itself withwhich the action can be released, e.g. Icon or button link. These clickable elements aredisplayed left aligned always.

Generally One-Click Actions are optionally. For the default delivery it is allowed to be usethe two generic functions EDIT and DELETE, displayed as icons, and one applicationspecific function, displayed as button link, only.

Exceptions: For use cases like approving or rejecting requests, a two button link sequencecan be used as One-Click Actions. For use cases to toggle between two states, e.g.“activate” or “inactivate”, the application specific button link can be switched and thus servesas a status indicator in parallel. One-Click Actions are not allowed to be used in SearchResult Lists!

Figure 9-7: One-Click Actions in a Hierarchy

One-Click Actions cannot be sorted or filtered or personalized in other ways. They do notvanish or appear while switching from read-only to edit mode or vice versa. One-ClickActions which are never available for (certain) row items are hidden. Besides the DELETE,One-Click Actions are hidden as well, until a necessary set of item data is maintained tomake the action function feasible. The place of the hidden One-Click Action in a cell staysempty and is not filled up with other available One-Click Actions.

Figure 9-8: One-Click Actions visible and hidden


_________________________________________________________________________________________________________________________________________________________

Page 57 of 98

Using INSERT function Button on a toolbar needs to have a Delete One-Click Action alwayseven the row is still empty. Using DELETE button in a table toolbar together with DELETEas One-Click Action redundantly is only needed if multi-deleting of items with the multi-select function will be done very frequently.

Offering object details with a One-Click Action “Details” should be used only for tables orhierarchies being in edit mode which has no other navigation possibility to navigate to objectdetails.

9.3. SelectionSelecting in tables and hierarchies mean marking or choosing one or more item rows inorder to apply related functions. Using the mouse the user can select an item row by clickingthe selector icon or by clicking in one of its data cells directly.

Launching the table or hierarchy initially will deliver the information which toolbar buttonshould be enabled or disabled dependent on the number of selected or not selected rows.Thus a table or hierarchy does not need to trigger a server roundtrip while selecting a row.This behavior is slightly different in master-tables or -hierarchies where a selection triggers aroundtrip to load the detail data, always. In cases where a server roundtrip is required forevery selection, the keyboard focus can be moved with the arrow keys without influencingthe selection. This enables quick navigation across table rows.

Depending on the use case, a table or hierarchy can generally have three selection modes:

The non-select mode does not have a selection column and does not offer theoption to select a row using the mouse or keyboard.

The single-select mode provides a selection column with selector icons in the farleft column. If you select a single row as described above, any previously selectedrow is deselected.

The single + multi-select mode is a combination of the single- and multi-selectionmodes. A click into a table row does a single-selection. Multiple clicks on differentrow selectors do a multi-selection. A single selection triggers a de-selection ofpreviously done multiple selections. To accelerate multi-selecting rows the usercan use both mouse and keyboard, or keyboard only.

For a single + multi-select table a Select All/Deselect All button is available to select all ordeselect all available rows at once. For tables this function concerns all rows on all availabletable pages.

Figure 9-9: Select All/Deselect All Button

In general, the following is valid for the selection modes:

If you select a row that is already selected, this row either stays selected or isdeselected, depending on the underlying use case (e.g. if at least one defaultsingle-selection is needed in a table always; consider the Deselect All function formulti-selection mode is conflicting here).

When doing a selection and navigating to another page and back, the most recentselection state is preserved. The selection will be kept for both single-select andmulti-select modes. Keeping a selection should not happen when switching a tablefrom edit mode back to read-only mode during navigation.

If you click on a hyperlink for navigation purposes there is a selection and navigationin parallel. When navigating back to the source table, the selection should still bedisplayed.

A selection never causes a server roundtrip. Exception: For master-detailconstructions a selection causes a server roundtrip to load and display detail data.

A row selection does never trigger a switch to edit mode.

Start editing within a table cell single-selects the appropriate row.

Doing a multi-selection takes the edit cursor from the previously edited row. Themost recently selected row gets the selection focus.

Inserting rows with the Insert button function does a single-selection automatically. Ifmultiple rows get inserted at a time the first inserted one gets single-selected andthe other rows are deselected.

Inserting rows with the Add, New, Copy, Copy Line and Paste button functions doesa single-selection automatically. If multiple rows get inserted at a time all inserteditems are selected. All other previously selected rows are deselected.

Dragging a (set of) selected item(s) carries all selected items to the target. On drop,these items remain selected. Dragging a so far not selected item will single-selectthis item (and cancel previous selections). On drop, the (corresponding) item will beselected in the new position. If the drop action fails, the item is restored in its initialposition, and single-selected.

A row which is indicated as disabled cannot be selected.


_________________________________________________________________________________________________________________________________________________________

Page 58 of 98

Figure 9-10: Non-, Single-, and (Single+) Multi-Select Mode

9.4. Cross Dependencies in AppearanceTables and hierarchies may appear in different styles of visual and interaction design.

The following dependencies will lead to different styles:

editing modes

grouping position

number of visible rows

9.4.1. Editing ModesEdit function buttons are typically not needed in read-only mode. Therefore toolbars are notvisible in read-only mode unless the table or hierarchy is switched to edit mode. If nofunction buttons are needed there is no toolbar displayed in any mode. Selector icons areneeded only if further item related functions are necessary and one-click actions are notsufficient. If a toolbar is not displayed then selector icons will not be displayed, either.

Exceptions: Toolbars are always visible in assignment blocks grouped as tiles on an OVPand in an assignment block with a master-table or -hierarchy. In this case the buttonsNew, Add will be displayed in the table or hierarchy toolbar and not in the title bar. Switchingfrom read-only mode to edit mode makes further available buttons in the same toolbarvisible if needed. Edit can be displayed in the generic page toolbar or additionally in theassignment block toolbars, too. Generally, if no function buttons are needed anyway thetoolbar is not displayed regardless of the editing mode.

Tables and hierarchies can be displayed in edit mode always, e.g. on edit pages. In thiscase toolbar and selector column are always in visible state but only if selection and buttonfunctions are needed.

Tables and hierarchies are displayed on search pages, value help and search helpdialogs always in read-only mode. Here they have an own title bar. They can have a toolbarif buttons are needed.

They always have a selector column. Hierarchies have hidden selector icons when ahierarchy node is not selectable.

There is a visual indicator displayed to indicate the possibility of direct cell editing, e.g.showing no vertical table grid lines and a dark background color for cells remaining read-only.

9.4.2. Grouping PositionIf a table or a hierarchy is placed within an assignment block as a single group element thetitle bar is hidden. Instead the title will be shown in the assignment block title bar itself.Button functions like New, Add or Edit can be placed behind the title within the assignmentblock title bar if needed.

Exception: As mentioned above, assignment block title bars of grouped assignment blocksas tiles and master-tables or -hierarchies cannot contain buttons like New, Add or Edit.

Generally if a table or a hierarchy is displayed as single group element within anassignment block it will fill in any space between the assignment block border and the tableor hierarchy completely.

If a table or hierarchy is placed as group element with other group elements together inone assignment block its title bar will be always visible. There are no button placementsallowed within the title bar. If function buttons are needed a toolbar will appear afterswitching the assignment block to edit mode. If there is an Add, New or Insert buttonneeded then a toolbar is visible also in read-only mode. Clicking theses buttons will in thiscase switch the entire assignment block to edit mode.

If tables or hierarchies are displayed within a form group as a form element, aligned withother form elements like input fields or dropdown list boxes, the title bar will becomeinvisible. Instead a form element label will be displayed as aligned as all other form elementlabels, e.g. input field label left side/input field right side, table label left side/table controlright side.

See also chapter 6 Guidelines for Forms.


_________________________________________________________________________________________________________________________________________________________

Page 59 of 98

9.4.3. Number of Visible RowsTables and hierarchies can change the number of visible rows dynamically dependent oncertain user or system actions, e.g. searching, filtering, calculating, triggering functions likeEdit, Add, New, Insert or Delete and Personalization. Tables are displaying item rows whichcan be distributed on several pages dependent on the available amount of rows. Forhierarchies paging is very cumbersome and thus vertical scrolling is mandatory.

If a table gets filled up with rows and reaches the number of visible rows a footer row will bedisplayed. This footer shows the Show More/Show Less function and dependent on theconfiguration a pager or a vertical scrollbar. The Show More function combines all availablepages or hidden rows in a scroll container and displays the item rows in one large table.Pager or vertical scrollbar disappear. The work area scrollbar can be used to scroll throughthe list. The Show Less function is working vice versa.

A table has a default number of 5 rows until paging starts. A hierarchy has a number of 15rows as default until vertical scrolling starts. The default setting of visible rows can bechanged in the personalization dialog. For tables and hierarchies used as master in amaster-detail construction the number of visible rows should be 10 before vertical scrollingstarts. Here vertical scrolling means that the table or hierarchy controls scroll itself but notthe vertical browser scrollbar.

In order to keep system performance in a usable manner both tables and hierarchies will geta pager or a so called fake scrolling after reaching a critical amount of available items in anycase. The critical amount is configurable.

The column headers are hidden as long there are no item rows visible. The column headerswill be visible if at least one row is visible regardless if the row is filled with data or empty.

Exception: The column headers of the search page and search help results are displayedalways.

9.5. Adding Empty Rows, Assignments and Other ObjectsFor adding and maintaining additional item rows to tables and hierarchies several functionsare available. They get triggered by buttons placed behind an assignment block title orplaced within a toolbar dependent on their current design.

The following functions are generally available:

Add – generally inserts an assignment of objects as row(s) which are alreadyexisting in the data base

New – generally creates a new object and inserts this new object as assignment

Edit – generally switches the table or hierarchy to edit mode

Insert – generally inserts one or multiple empty row(s) and navigates to the firstinserted one

Besides Edit, Add and New can switch the table or hierarchy into edit mode in parallelmeaning that e.g. cell editing is possible. But the table or hierarchy can stay read-only aswell if the use case requires that.

Figure 9-11: Edit, Insert, New and Add Buttons

9.5.1. Add ButtonGenerally, the Add button should be used if the main maintenance of data in an item rowconsists of filling a “leading” field using a search help.

The Add button is placed within the assignment block title bar when the table or hierarchy isplaced as a single group element in an assignment block. The Add button is placed withinthe toolbar if tables or hierarchies are displayed as a form group element with other formgroup elements together or used as a master in a master-detail construction.

Several Add buttons can be provided at the same time, but the label Add has to be changedto distinguish between different object types which should be added. If more than three Addbuttons are needed an Add menu is to be used.

The Add button launches an input help or search help dialog box for searching and selectingan object. The selected object is inserted as a new row in the table or hierarchy.

Afterwards the assignment block which contains the table or hierarchy is switched to editmode if the edit mode was enabled.

For tables adding item rows will add rows at the end of the table list. If table pages areoccurring then an automatic paging will navigate to the most recent added item row. If one


_________________________________________________________________________________________________________________________________________________________

Page 60 of 98

or several item rows are selected adding an item row will insert the added item row belowthe most recently selected row.

For hierarchies always an item row has to be selected to give the system the informationwhere to insert the added item row within the tree structure. Typically several Add buttons(Edit menu) are needed to predefine the item type which can be inserted on certainhierarchy levels only. A textual description or ID is preferred for hierarchy nodes. Thesystem should provide a dummy if no description is currently available.

9.5.2. New ButtonThe New button typically launches a create dialog for creating a new object or newinformation on a separate page, e.g. overview or edit page.

Exception: If only some attributes are needed for creating a new object this can be done byinserting an empty row for maintaining the data directly.

After creating a new object, and saving, the user will be navigated from the separate pageback to the previous one automatically in most cases. The created object is inserted as anew row in the table or hierarchy.

Afterwards the assignment block which contains the table or hierarchy is switched to editmode if the edit mode was enabled.

The New button is placed within the assignment block title bar when the table or hierarchy isplaced as single group element in an assignment block. The New button is placed within thetoolbar if tables or hierarchies are displayed as a form group element with other form groupelements together or used as a master in a master-detail construction.

Several New buttons can be provided at the same time, but the label New has to bechanged to distinguish between different object types which should be created. If more thanthree New buttons are needed a New menu is to be used.

For tables creating new item rows will add rows at the end of the table list. If table pagesare occurring then an automatic paging will navigate to the most recent added item row. Ifone or several item rows are selected creating a new item row will insert the added item rowbelow the most recently selected row.

For hierarchies always an item row has to be selected to give the system the informationwhere to insert the item row of the newly created object within the hierarchy structure.Typically several New buttons (Edit menu) are needed to predefine the item type which canbe inserted on certain hierarchy levels only. A textual description or ID is preferred forhierarchy nodes. The system should provide a dummy if no description is currentlyavailable.

9.5.3. Edit and Insert ButtonsGenerally, the Edit button can be used to switch tables or hierarchies from read-only modeto edit mode. After the switch to edit mode a toolbar and selector icons can be displayeddynamically if further functions are needed. The Edit button is placed within the assignmentblock title always.

Exception: In OVPs which are diverted into tiles the Edit button is placed on the genericpage toolbar or additionally on the assignment block toolbar. In master-detail constructionsthe Edit button is placed within the assignment block toolbar of the master-table or -hierarchy.

The Edit button is displayed disabled after switching assignment blocks or entire pages toedit mode. If switching back to read-only mode it is displayed active again. It can be used infree combinations with Add and New buttons. In rare cases, when data editing in a table orhierarchy is rather complex, it is possible to navigate to a separate edit page to do furtherdata maintaining.

Especially for tables the Edit button can be used to insert automatically for fast data entry. Itis possible to enable two variants:

Automatic page row filling

Automatic inserting of one row after pressing ENTER key

Clicking the Edit button can fill up the table with empty editable rows for direct cell editing.The number of visible rows can be defined in the personalization dialog. If rows containingdata are displayed the Edit button will fill up remaining empty rows until the number ofvisible rows per page is reached. If the complete table page is filled with rows containingdata then a new table page (filled with empty rows) will be indicated by the pager.

Clicking the Edit button while the automatic inserting of row mechanism is enabled will insertjust one empty row at the end of the table list. The cursor focus will remain on the Editbutton. After the user entered data into the row and pressed ENTER key the row will bechecked for errors by the system and a new empty row will be inserted below automatically.If the checked row is the last row of the current visible table page the cursor focus willremain on last position. A new page (containing one empty row) will be indicated by thepager.

But if these two variants are used then displaying the Insert button in a table toolbar ismandatory. The Insert button navigates to the next empty row, does a single-selection of therow and sets the cursor focus to the first editable cell. The Insert button inserts a single rowon a certain row position only when rows are selected before. Then the empty row will beinserted below the most recent selected row.

For hierarchies there is no automatic inserting of empty rows available. There is no Insertfunction button available.


_________________________________________________________________________________________________________________________________________________________

Page 61 of 98

Generally Insert is used to accelerate the Add function for expert users when directly typingin data knowing by heart in a faster way instead of first calling a search or value help popup.

9.6. Overview of Function Buttons for TablesAdd – adds an assignment of an existing object as item row, inserts it below thelast row on the last table page and navigates (pages) to the inserted row; if a row isselected the added row will be inserted below the selected one; if multiple rows areselected the item row will be inserted below the most recently selected one; theinserted row is single-selected

New – creates a new object and adds an assignment of it as an item row, inserts itbelow the last row on the last table page and navigates (pages) to the inserted row;if a row is selected the new row will be inserted below the selected one; if multiplerows are selected the item row will be inserted below the most recently selectedone; the inserted row is single-selected

Edit – makes rows editable and if enabled also inserts empty rows; does alwaysstay on current page and does not navigate to empty rows when hidden

Delete – deletes a selected item row and removes its assignment; if Delete is aone-click action no row selection is needed

Copy – duplicates a selected item row and inserts it single-selected below thepreviously selected one; navigates (pages) to the inserted row if currently visiblepage is filled with rows entirely

Insert – inserts an empty row for direct cell editing below the last row on the lasttable page and navigates (pages) to the inserted row; if a row is selected the emptyrow will be inserted below the selected one; if multiple rows are selected the itemrow will be inserted below the most recently selected one

Export to Spreadsheet – exports the entire content or selected or filtered item rowsto Excel format

Personalize – opens the generic personalization dialog

Open Chart – displays a chart diagram below the table

See also chapter 11 Buttons.

9.7. Overview of Function Buttons for Hierarchies Add – adds an assignment of an existing object as item row, inserts it below

the last row on the appropriate level; if a row is selected the added row will be

inserted below the selected one if allowed; row items might be inserted onspecific levels only, dependent on their hierarchy types; the inserted row issingle-selected

New – creates a new object and adds an assignment of it as item row; insertsit below the last row on the appropriate level; if a row is selected the addedrow will be inserted below the selected one if allowed; row items might beinserted on specific levels only, dependent on their hierarchy types; theinserted row is single-selected

Edit – makes rows editable; does not insert or navigate to empty rows

Delete – deletes a selected item row and removes its assignment (Deleting acollapsed node will also delete its children. The attempt to delete an expandednode which is not empty will lead to an error message.)

Cut – cuts a selected item row and keeps it stored for pasting as long as nonew item is cut (repeated pasting); a cut item row gets deleted after pastingonly

Copy – copies a selected item row and keeps it stored for pasting as long asno new item is copied (repeated pasting)

Paste – inserts a stored item row; inserts it below the last row on the last tablepage and navigates (pages) to the inserted row; if a row is selected the addedrow will be inserted below the selected one; row items might be inserted onspecific levels only, dependent on their hierarchy types; the inserted row issingle-selected

Expand All – expands all collapsed item rows

Collapse All – collapses all expanded item rows

Export to Spreadsheet – exports the entire content to a Spreadsheet format

Personalize – opens the generic personalization dialog

See also chapter 11 Buttons

9.8. Deleting Assignments and ObjectsFor deleting a row which represents objects or assignments to other objects displayed intables or hierarchies the following rules apply:

One-Click Actions in tables can be used for deleting assignments to other objectswhere it is easy to re-assign the object again. In this case it is not necessary tolaunch a deletion confirmation dialog. The final delete confirmation is done with the


_________________________________________________________________________________________________________________________________________________________

Page 62 of 98

Save Button if the overview page is an editable overview page. One-Click actionsare not allowed in hierarchies instead a Delete button placed in the toolbar has tobe used.

A Delete button in the table or hierarchy toolbar is used to delete objectassignments which are hard to insert quickly again (e.g. a significant amount ofdata has to be inserted for this assignment). The deletion needs a row selectionbefore, thus a deletion confirmation dialog is not needed.

If a table item directly represents a business object, a Delete button in the table orhierarchy toolbar can be used, if user research indicates a very high priority for thisfeature. In this case a deletion confirmation dialog has to be displayed, eventhough a row selection is needed before. Usually a Delete button is used on theobject page only.

The customer can configure the system in such a way that every Delete function isprotected by a dialog to confirm the action. By default, the dialog appears as describedabove.

9.9. Sorting and FilteringSorting and Filtering can be done for tables and hierarchies. Hierarchies will lose theirhierarchical structure when filtered thus only the common attributes of items and theirhierarchy path can be displayed within the hierarchy column.

Sorting for hierarchies can be done on a group level thus common categories of an itemattribute can be set as a group and be sorted for category values. There is only a globalsorting of the key column possible which contains the hierarchy structure with expandableand collapsible hierarchy item rows.

9.9.1. OverviewThe sorting and filtering functions allow you to change the current appearance of view of atable list. Sorting changes the order of table rows but always keeps the entire number ofrows. Filtering displays a set of rows and therefore only part of the entire number of rows iskept.

Sorting and filtering events can be triggered to restore the initial state of the table list.

The two functions impact all table list pages. Thus rows which are currently not visible areaffected too. After filtering is triggered, all columns stay sorted as before.

Using sorting and filtering in a certain sequence will influence the function events in theopposite sequence. That means sorting a list in the sequence Last Name, City and Activity

will show an entire table list sorted by activities, then by city and then by the last name. A listfiltered by last name, city and activities will show the exact values for the chosen attributes.

Generally for any search result list, sorting and filtering is restricted to the range of displayedresults because the database search was interrupted by reaching the limited number ofsearch hits. A message has to be displayed if this happens. The user should know aboutfiltering on a limited number of items only.

9.9.2. Entry PointThe entry point for sorting and filtering is the column header title of each column. A menuwill open by setting the cursor focus on the entry point and pressing ENTER or by a leftmouse click on the entry point.

A mouseover effect indicates the option of opening a menu by displaying a small right-aligned arrow icon.

Figure 9-12: Mouseover Effect on Column Header and Opened Menu

The tooltip for the column header title should be extended by the appropriate screen readertext: Press Enter to Open Sorting and Filtering Menu. Within the screen reader mode, themouseover effect for appearing/disappearing icons is switched off.

After triggering sorting, an icon is displayed behind the column title appropriately toascending (up arrow icon) or descending (down arrow icon) sorting. Only the most recentlysorted column has the appropriate sorting icon displayed.


_________________________________________________________________________________________________________________________________________________________

Page 63 of 98

After triggering filtering, a filter icon is displayed behind the title as long as there is filteringbeing executed on the related column. Several columns can have filter icons to indicate thefiltering state of each column.

Figure 9-13: Column Filtering and Sorting State Indicated by Icons

If a title text is cut, the icons for sorting and filtering have to be shown at the right hand side.The icons show the appropriate tool tip (Sorted Column Ascending, Sorted ColumnDescending, Filtered Column and their combinations).

If an assignment block table is filtered and then switched to edit mode or to read-only mode,the list must remain filtered. The same applies when navigating to another page and thenback again, for example. The list must remain filtered as it was previously.

A search result list which is sorted and filtered switches back to the default display (filterswitched off and sorting is reset) after triggering a new search.

Filtering always de-selects previously selected rows. Inserted rows are displayed in sortedand filtered lists (as described in chapter 9.5) although the content does not apply thecurrent sorting position and filter criteria. After a Save the list will not change either. Thesorting and filtering have to be triggered manually to update the view.

9.9.3. Sorting and Filtering MenuThe sorting and filtering menu provides different function links to immediately trigger afunction or to call a separate dialog box for triggering more complex operations. Generally,sorting should be provided for all columns of a table when this makes sense, for example,sorting for the column Actions does not make sense.

The following function links can be displayed within a menu:

Sort Ascending – sorts column values in ascending order

Sort Descending – sorts column values in descending order

A separation line contains no function but separates sorting and filtering functionsvisually

All – resets the filtering of the related column to the initial state and de-highlights it;does not reset manually-performed sorting

(Custom…) – launches a filtering dialog box for more complex filtering options

List of filter criteria, generally taken from the values of the corresponding column (<Value Name> 2 to maximum 100 filter criteria); sorted alphabetically; If more than10 values are listed, a vertical scrollbar appears in the menu;

(Too Many Entries…) – If more than 100 values are needed or available, forexample, values from a Description column, then only the Custom function is usedfor filtering; then values are shown but an additional entry (Too Many Entries…) isdisplayed and leads to the Custom Filter dialog

If filtering is not needed, only provide the sorting functions.

9.9.4. Custom FilterThe function link Custom Filter opens a filtering dialog box for free-text filtering options. Anasterisk (*) as a wildcard placeholder can be used for any unknown character, such as“Wall*” or “al*orf”. The form view of the dialog can be extended with fields, e.g. to enter dateranges or other combinations.

Figure 9-14: Custom Filter Dialog Box for Free-Text Filtering

9.9.5. Configuration, Personalization, and DefaultsSorting and filtering functions are customizable features of the table control. They can beswitched on and off by disabling the option to open the menu or to hide function links in theconfiguration. Configuration for default filtering of tables is not allowed.


_________________________________________________________________________________________________________________________________________________________

Page 64 of 98

The table control remembers the last sorting and filter state in a session. Saving an objectdoes not save the filter state.

A table can have a default sorting in configuration and also by personalization, for example,combined sorting first by start date then by activity type. Only the column that was sortedlast has the appropriate sorting icon displayed.

If the personalization of column filters is not available within personalization the filtering of acolumn will go back to its initial state (reset) when the column gets hidden.

9.10. Additional Rules for Hierarchies

9.10.1.Loading a HierarchyWhen initially displaying an object within a hierarchical structure, the application can definethe number of higher levels displayed (for example, 2 levels up). If this is not the case, allthe higher levels are hidden and the application should offer the toolbar button Show LevelAbove, so the user can access the higher levels one by one. Hide Levels Above will hide alldisplayed levels above the selected node at once.

Additionally, the application can define the number of lower-level nodes that should bedisplayed opened. Otherwise, the contents are displayed and loaded on user request, usingthe collapse/expand icons.

9.10.2.Expanding and Collapsing Hierarchical LevelsHierarchy levels are displayed by using collapse/control icons and progressive indentationof lower hierarchy levels. The user can expand or collapse items at different hierarchicallevels by clicking the respective collapse/expand icons. When the last hierarchical level (leafnode) is reached, an appropriate indicator element is displayed.

When navigating to other pages and back again the expand/collapse state of any hierarchyshould be kept.

An Expand All/Collapse All option can be offered using icons in the toolbar. This functionexpands/collapses all hierarchical levels. This function should only be used if it is necessaryfor the use case, since it can lead to performance problems.

Figure 9-15: Expand All/Collapse All Buttons

9.10.3.Deleting Nodes and SubnodesGenerally deleting a collapsed node will also delete its children. The attempt to delete anexpanded node which is not empty will lead to an error message. Deleting a node will alsodelete its subnodes, if authorizations and the application logic allow it. If it is not possible todelete a node and its subnodes, then there should be a message that informs the user thatdeletion is not possible, along with the reason, as subnodes will have to be deleted first.

9.11. Table and Hierarchy PersonalizationTables and hierarchies can have an entry point (Personalize icon) for displaying apersonalization dialog box. In this dialog box, the following properties can be adjusted to theuser's personal needs:

Changing the number of visible rows

Displaying and hiding table columns (Exception: For hierarchies the hierarchycolumn cannot be hidden nor moved)

Changing the order of columns (Exception: For hierarchies the hierarchy columncannot be touched)

Changing the width of table columns

Enabling horizontal scrolling

Fixing certain columns while scrolling horizontally

Changing the attribute for the default sorting when launching the application screenagain; it is also possible to set the most recently sorting done directly within columnheader sorting as default when launching the application screen again

Saving a specific personalization as switchable View

Additionally, it is possible to personalize the column width and the column order by using thedrag and drop function.

Sorting and filtering are generally temporary personalization settings and can be donedirectly within the column header menu. Sorting and filtering will be reset to the defaultsafter logoff and logon of the system.

See details in chapter 15 Personalization.


_________________________________________________________________________________________________________________________________________________________

Page 65 of 98

9.12. Defaults for Tables and Hierarchies

9.12.1.Column Width and AlignmentThis section shows default table and hierarchy properties concerning column width andalignment of cell content.

Table 9-1: Default Width for Columns and Content Alignment

Column Content (Example) Column Width Alignment

Icon only 4% centered

Text with 2 Digits (Country) 4% left

Text with 3 Digits (Currency) 5% left

Text with more than 3 digits(Description)

X% or no definition,depending on importance ofcell content

left

Figures with n digitsn+2% or no definition,depending on importance ofcell content

right

Checkboxes 7% (or less - to 4% -depending on the header) centered

Radio buttons 7% (or less - to 4% -depending on the header) centered

Time 8% (due to different timeformats) left

Date 10% left

Hierarchy column (forhierarchy only)

X% or no definition,depending on importance ofcell content

left

Actions (for tables only) 6% (only for actionscontaining Edit or Delete) left

Column titles are always left-aligned. A default size has to be defined and set for allcolumns.

Further recommendations:

For editable columns, add 2% - 3% more width if the columns contain dropdown listboxes or input help icons.

To account for translation, define the width of text content 20% wider than theoriginal text, if possible.

Generally, the most important columns have to receive the most space.

There is no need to abbreviate the column title to fit the column width as it will becut automatically, indicating this with three dots at the end (for example “ColumnTi…”). A tooltip which appears as a mouse over effect shows the full length of thecut text.

9.12.2.HyperlinksTable and hierarchy cells can contain hyperlinks for navigation. Usually the description textof an object is used as a hyperlink rather than the ID. If there is no description text available,use the dummy text “No Text Available” (German: “Kein Text verfügbar”) so that navigationis still possible.

In read-only mode hyperlinks can be clicked for navigating. In edit mode the hyperlinks aresimply displayed as text and editable. There is no navigation possibility anymore. To providenavigation anyhow alternative designs can be used dependent on the use case:

provide a link on a redundant attribute which is displayed as a read-only hyperlinkalso edit mode, e.g. a description as hyperlink and the related ID as editable fieldwith value help (consider when this column will be hidden by personalization)

one-click action Details as application specific link (not available for hierarchies,might be a redundant link target; consider navigation may force saving data andswitching back from edit to read-only mode)

9.12.3.Number of Visible Rows and Scrolling vs. PagingDependent on the location of tables and hierarchies the following defaults are valid:


_________________________________________________________________________________________________________________________________________________________

Page 66 of 98

Overview/sub-overview page, edit page: 5 visible rows for assignment block tables(paging)

Overview/sub-overview page, edit page: 15 visible rows for assignment blockhierarchies (scrolling)

Search page, search help (search area open): 10 visible rows for tables andhierarchies (paging)

Search page, search help (search area closed): 20 visible rows for tables andhierarchies (paging)

Input help table: 10 visible rows for tables and hierarchies (scrolling)

Browse and collect construction with tables in personalization dialog: 10 visiblerows (scrolling)

Master-detail construction: 10 visible rows for tables and hierarchies (scrolling)

If the default number of visible rows is not sufficient for the related use case you canincrease the number steps of 5 rows (5, 10, 15, 20; not valid for value help, search help,search page, personalization dialog)

9.12.4.Number of Visible ColumnsDisplay for a default screen resolution of 1024 x 768 as few columns as possible to avoidhorizontal scrolling.

9.12.5. Remember Setting and Data State of Most Recent ViewIn order to give the user a better orientation when navigating to different pages forward andbackward, the most recent editing, selection, scrolling and paging state of tables orhierarchies should be kept. For hierarchies the expand/collapse state of nodes should bepreserved as well.

9.12.6.Default Row Height for Displaying ImagesImages can be displayed in table cells. The image size has to be configured, either fixingthe height of the image while the width is determined proportionally, or vice versa. Theaspect ratio has to be kept stable.

The fixed height of an image within a table cell has to cover 3 table row heights at least. Amaximum fixed height of 5 table row heights is recommended. Images should be displayed

in same height over all rows to ensure a consistent row height in the table, even if theimages have different original sizes.

The image stays in size and left top aligned within the table cell when the table column isextended in width by personalization. If the table column is reduced in width and thusbecomes smaller than the image width of the image gets simply cut. The image providesinteractivity. When the user clicks on the image a dialog is opened which displays the imagein original size.

If there is no image available a dummy image should be shown as a placeholder or clickelement.

Figure 9-16: Table with Images

UI Guidelines for SAP CRM – Chapter 10 Guided Maintenance

_________________________________________________________________________________________________________________________________________________________

Page 67 of 98

10. Guided Maintenance

10.1. OverviewGuided maintenance helps users follow any defined process within the system. It isespecially useful for complex, infrequently performed maintenance and complexbusiness processes that can be broken into logical chunks.

Processes may become complex if they handle different data objects or differentbusiness user roles within one process.

Guided maintenance consists of a series of linked screens that guide the user througha process, such as creating a report or creating a funds transfer. It is always openedin the work area (it will not be launched in a separate window).

Guided maintenance consists of the following areas:

Refer to Figure 10-1 for an illustration.

o Work area title and work area toolbar.

o Roadmap. The roadmap is a visual representation of the steps contained in theguided maintenance, including the user's current location in the sequence.

o Roadmap toolbar. The button row contains all buttons that are necessary tonavigate within the guided maintenance as well as page-specific function buttons(optional).

o Content area. Displays the information for a step, where the user can eitherenter or review data.

Figure 10-1. Areas of Guided Maintenance

If the height of the guided maintenance page exceeds the screen height, then avertical scrollbar appears for the content area. (Roadmap and roadmap toolbar stayfixed on top of the content area.)

10.2. Visual DesignThe framework does not yet provide a template for the visual design of the guidedmaintenance page. Therefore, the distances between the different screen areas needto be set by the application.

The specification for the distances and colors of the guided maintenance can befound in Figure 10-2.


_________________________________________________________________________________________________________________________________________________________

Page 68 of 98

Figure 10-2. Visual Design Specification for the Guided Maintenance Page

10.3. Work Area Title and Work Area ToolbarIt is recommended to include step information in the work area title like this:

<Object type or application>: <Attribute>, Step <Step #> (<optional: Description >).

Otherwise, the work area title should follow the general title guidelines (section 3.2.3).

In the work area toolbar, the following buttons can be displayed:

o Finalize button (mandatory). The finalize button is disabled throughout theguided maintenance until the last mandatory step is reached – then it is enabled.The finalize button is enabled all the time when guided maintenance is used tomodify an object, unless there are no mandatory steps necessary to finish orsave.In general, the finalize button is called Finish; but if required, it can be renamed

so that it is more appropriate to the actual use case (Send to Manager, forexample).After the finalize button is chosen, the guided maintenance closes. Navigationafter closing the guided maintenance depends on the purpose of the guidedmaintenance. If it was used for one of the following reasons, then the overviewpage of the newly created object will be shown:

• To create a new object (Funds Transfer, for example)

• To create a new object and to start a workflow

If the guided maintenance was used to start a process which does not lead to anoverview page or another follow-up application, the user is taken back to thepage where the guided maintenance was launched. An information messageappears, informing the user that the guided maintenance has been completed, orthat the process has been started.

o Save and Back and Save (optional). The Save button can be included in thework area toolbar, if it is required to save an incomplete object (save draft), or togive users the option of saving their recently entered data, in the case of a verycomplex guided maintenance. Save will save the object, but not leave the actualstep. Save and Back will save the object(s) and navigate to the previous pagefrom which the user entered guided maintenance.

o Cancel (mandatory). Cancel closes the guided maintenance without saving. Awarning dialog box is shown, in which users must confirm the cancellation(Figure 8-2. Example of a Confirmation Dialog Box).

o Application-specific button (optional). If a required application-specific buttonis included in the work area toolbar, it can affect the entire guided maintenance(Show Technical Details, for example).

The toolbar divider should be placed as described in the guidelines (section Buttons).

10.3.1.History BackThe history back function will not affect the guided maintenance steps. The historyback function does not step back in the guided maintenance, but leaves the guidedmaintenance.

If a save draft function is offered in the guided maintenance and the user chooseshistory back, a data loss warning appears in a dialog box (Figure 8-2); otherwise thecancellation dialog box appears, asking the user if he or she wants to discard entereddata.


_________________________________________________________________________________________________________________________________________________________

Page 69 of 98

10.4. RoadmapThe roadmap is a visual representation of the steps contained in the guidedmaintenance, including the user's current location in the sequence. The roadmapshould map out the number of steps and present them in a logical sequence. Eachstep should have a single purpose.

The roadmap has to be stable throughout the guided maintenance application.

Step labels should clearly reflect the purpose of each step and be no more than twoto three words (verb + noun; for example: Select Customer, Enter Payment Details orReview Order).

The roadmap steps can have the following states (Figure 10-3):

o Enabled. If the user can reach a step from his or her current position in theguided maintenance, then this step is enabled.

o Disabled.

• If the user cannot reach a step without performing another step first, this stepis disabled.

• A guided maintenance can bypass a step depending on user’s actions in apreceding mandatory step. A skipped step is disabled.

o Highlighted. The step the user is carrying out is highlighted.

o Finished (deprecated). If a step is marked green, it was finished. This functionwill not be supported in future releases.

Figure 10-3. States of Roadmap Steps

All enabled steps in the roadmap are clickable, that means that the user can directlyclick the step. In this way, the user can navigate between steps without having tofollow the predefined sequence.

A guided maintenance may contain mandatory steps. This means that a user needsto perform a step first before he or she can proceed to the next step. If a step is notmandatory, it is an optional step.

The roadmap states are determined by the following rules (refer to Figure 10-4):

o Enable all steps except for skipped steps prior to the highlighted step.

o After the highlighted step, disable all steps after the next mandatory step. Allsteps between the highlighted and disabled steps are enabled.

Figure 10-4. Example of State Determination of Roadmap Steps

If the highlighted step is mandatory, both the next step and the next button areenabled. If the user chooses either one without entering all the mandatory data, an


_________________________________________________________________________________________________________________________________________________________

Page 70 of 98

error message will be shown that asks the user to fill out every mandatory field or tofinish the mandatory step.

10.5. Roadmap ToolbarThe roadmap toolbar contains the following buttons :

o Previous (mandatory). The Previous button is enabled throughout the guidedmaintenance, except for the first step. Previous navigates back to the previousstep.

o Next (mandatory). The Next button is enabled throughout the guidedmaintenance, except for the last step. Next navigates to the next step. The usercannot proceed to the next step until all required criteria are met and errors areresolved.

o Application-specific button (optional). It may be necessary that an application-specific button is added to the roadmap toolbar. For example in reporting, thePreview button that shows a preview of a report before finalizing it is anapplication-specific button. Application specific buttons are only displayed if theyare available, so the toolbar can include different buttons depending on thecurrent roadmap step.

If more than 8 buttons are visible at a time, a „More-button“ appears

10.6. Content AreaThe content area includes all information or forms needed for the highlighted step.

The height of the content area adapts to the content of the currently highlighted step.The height of the content for each step should be designed so that the whole guidedmaintenance (including the bottom button row) is fully visible in standard resolution(1024x768). This is about 13 rows.

The content area can contain:

o Explanatory text (optional). The explanation should be used to provideinformation about the purpose of the current screen. It should not be used forobvious actions (Complete the following fields, for example).

o Form groups with editable fields

o Tables and hierarchies

o Browse and collect patterns

o Attachments

o Other allowed elements

The content area may not contain:

o Links. Links should not be included in the content area since they would leavethe guided maintenance. Exception: Links that open a dialog box, for example,for more information.

o Buttons for navigation. Buttons that trigger a different application outside theguided maintenance should not be included in the content area.Exception: Buttons that open a dialog box (see 10.6.2)

10.6.1.Attachments in the Content AreaIf the attachment function is needed in the guided maintenance, a table similar to theAttachments assignment block is shown, but in edit page style. In the table toolbar,the buttons New Attachment and New URL are offered, if required. Both buttonslaunch a dialog box, in which the user can enter the file or URL to be attached. If NewAttachment offers the entire attachments capability, the dialog box will be as complexas the one in the generic service .

10.6.2.ContentsThe content of each step should suit the step's purpose as indicated in the roadmaplabel. Content areas should avoid presenting information that is irrelevant to thecurrent step. On occasion, it may be necessary to include more content for a singlestep than can be displayed in the viewable area.

The guided maintenance steps should be structured so that the sequence of steps ispresented in a logical manner. Consider dependencies between steps. For example,it may be necessary to enter the shipping details before determining the sales tax.

If optional or mandatory sub-activities have to be carried out, a modal dialog box canbe used. The dialog box is called by means of a button in the content area of theguided maintenance (for the design, sizing, and behavior of dialog boxes refer toChapter Dialog Boxes). Scrolling should be avoided. After finalizing the sub-activity inthe dialog box, the user returns to the roadmap step the sub-activity was started from.

Guided maintenance step types:

o Steps. Steps assist the user in completing a logical sequence of actions forguided maintenance. Steps should include only the data relevant to the currentstep. If the screen requires user input, only fields the user can add or edit shouldbe presented. Automatically filled, non-editable fields should not be included inthese screens unless such information is relevant to provide context to the user.


_________________________________________________________________________________________________________________________________________________________

Page 71 of 98

o Summary or review step (optional). This optional step summarizes all theinformation entered in the guided maintenance. This step should aggregate andpresent only the information necessary for reviewing in a display-only format. Itenables the user to check the accuracy of entered data before committing thedata to the database or triggering a workflow. It is the last step in the roadmap. Ifthe summary or review step is used, this step will be defined as mandatory.

10.7. Guided Maintenance for object creationIf guided maintenance is used to create a new object, there is no difference to thecreation process using the standard “create” links. Also, the terminology remains thesame. There is no additional phrase like “create report with guided maintenance”.

If an object is created with guided maintenance, there is no additional way to allow theuser to create the same object without guidance. The user has to decide if guidedmaintenance is needed or not.

Creation of an object using guided maintenance can be triggered by a:

o Create link in a work center page

o Create link in the Quick Create block

o New button in assignment blocks

o New buttons in work area toolbars and table or hierarchy toolbars

Once the guided maintenance is finalized, there are two options to proceed (refer tosection 10.3):

o The overview page of the newly created object appears.

o The user is taken back to the previous page.

In both cases, integration in the CRM concept differs.

10.7.1.Guided Maintenance for an Object with an Overview PageOn the overview page, an option can be offered to modify an object using guidedmaintenance, if required. This function should be included in the work area toolbarusing the button Launch Wizard.

The step the user enters when reopening the guided maintenance depends on itsstatus. If guided maintenance must be finalized, the user will enter at the first step; if itis not finalized (if the Save and Back function is used), the user is positioned at thelast step that the user edited or visited.

Thus, it is possible to use the same guided maintenance to create as well as edit anobject. However, there are times when the same guided maintenance should not beused to create and edit an object, especially if it has triggered a workflow.

10.7.2.Guided Maintenance for an Object With No Overview Page(or Something Similar)

If the guided maintenance was used to create an object without an overview page (orsomething similar), the user enters the guided maintenance directly (for example,from the search result list). In this case, the first step should always be presentedregardless of the guided maintenance's finalizing status, since the user may want toverify or change the information before proceeding.

10.8. Design RecommendationsThe users, their goals, and the scenario(s) have to be considered when determiningthe necessity for using guided maintenance. The question "Is guided maintenanceappropriate for the task?" has to be answered positively, based on well-foundedreasons.

When to use a guided activity:

o To guide the user through a configuration sequence

o When input for each step in the task sequence is required

o For complex, infrequent activities

When not to use a guided activity:

o For simple, frequent tasks, especially when the overview/edit concept is moreefficient and appropriate for entering data

o When the user needs complete and random access to all areas of a complexbusiness object

o For viewing data (the overview page should be used instead)

Create a task flow for the specific scenario before designing the steps for the guidedmaintenance.

The following table presents typical criteria for the decision whether to use guidedmaintenance:


_________________________________________________________________________________________________________________________________________________________

Page 72 of 98

Table 10-1. Guidelines for determining whether guided maintenance is suitable,provided by "Designing Effective Wizards: A Multidisciplinary Approach - by DianaPupons Wickham, Dr Debra L. Mayhew, Teresa Stoll, Kenneth June Toley III,Shannon Rouiller (Upper Saddle River, NJ: Prentice Hall PTR, 2001)".

Characteristics Related Questions Reason for Asking

Task Frequency How frequently does the usercomplete the task?

Does the user complete the taskonly a single time, daily, weekly, orother?

Rarely completed tasks are goodcandidates because the user willprobably not gain expertise incompleting them.

Task Importance How important is the task?

Does the user consider the taskcritical?

Is it optional?

Both optional and critical taskscan be good candidates. Ingeneral, it is more useful tosupport critical tasks well.

Task Difficulty Does the user feel that the task isdifficult or easy?

If the task is difficult, can it be madesignificantly easier in a guidedmaintenance? Are otherinterventions, such as product re-architecture or tutorial, needed?

If the task is too easy, it may notwarrant the use of the guidedactivity.

Alternatively, the task may be toodifficult to be improved by aguided maintenance. Otherinterventions may be needed.

UI Guidelines for SAP CRM – Chapter 11 Buttons

_________________________________________________________________________________________________________________________________________________________

Page 73 of 98

11. ButtonsThis section gives an overview of the button controls.

In detail, this section contains information for:

o Different button types

o Possible button placements

o Tooltips

o Rules for enabled and disabled buttons

o Button order depending on the page type

11.1. Button Typeso The icon-only buttons (icon), text-only buttons (text) and icon-with-text buttons

(icon + text) have exactly one clickable area). A click in this area directlyexecutes an action.

• The usage of icon buttons and icon + text buttons is restricted to a minimumand is only used for the generic buttons as defined below.

• Application-specific buttons are always visualized as text buttons.

• The usage of other icons that are not officially provided is not allowed,because those icons are not supported in different skins. Icons have to beapproved and provided centrally.

• Special feature – the emphasized button:

The emphasized button is a special kind of button, which can be anicon, icon + text, or text button.

The button is triggered using the ENTER key.

The button appears only in a straightforward case (for example in dialogboxes as the finalizing button or on the search page to start the searchquery).

In the default skin, this button type has a blue border.

o Menu Button:

• A menu button looks like a normal button, but a small expand icon appearson the right hand side of the button. If the user clicks on a menu button, asmall popup menu is opened, which offers the functions grouped within the

menu button. If a menu includes a submenu, the submenu is opened onmouse-over. A second mouse click is not required.

• It is possible that multiple menu buttons appear within one toolbar.

• A maximum of three menu buttons per toolbar is allowed.

• Menu buttons are used to reduce a big amount of buttons within a toolbar.

• A menu button includes buttons which logically belong together. Such alogical group should be surrounded by toolbar dividers.

• It is not allowed to place mandatory buttons in a menu button (see chapter10.6).

• Buttons, which are required just for some rare use cases (no “80% case”),are hidden in a menu button.

• A menu button offers only one level. Exception: the generic More menubutton (see chapter 10.2.1) can offer two menu levels. In general it is notallowed to place a menu button into the more button menu.

• Menu buttons do not provide an additional icon, they consist of a text and theright aligned expand icon.

• Within the menu of such a button it shall be possible, to display the icon,which belongs to a generic button function. In addition the text of this button -which sometimes is displayed as a tooltip if it is not used within a menubutton - should appear as text entry behind the icon.

o Toggle Button:

• Toggle buttons are used to control and visualize states. Generally two statesare possible ‘Selected’ and ‘Not Selected’.

• The usage of toggle buttons is allowed only in exceptional cases. Alwaysrequest such an exception from the UI Concept Team!

• Switching between the two states is triggered

via click on this button, or

via click on a related view switch toggle button. E.g. within the calendarthe three toggle buttons ‘Day’, ‘Week’ and ‘Month’ occur. If the ‘Day’view is pressed, this button is in state ‘Selected’ and disabled. Reachingthe state ‘Not Selected’ for this toggle buttons is possible, if you switcheither the ‘Week’ or the ‘Month’ button to the ‘Selected’ state.

• Within the ‘Not Selected’ state the button looks like a normal button.


_________________________________________________________________________________________________________________________________________________________

Page 74 of 98

• The button state ‘Selected’ is represented with a different background colorand a tooltip extension. The tooltip should include the button meaningextended with the phrase ‘Selected’. The tooltip for the selected ‘Day’ togglebutton is ‘Day Selected’.

• The label (respectively the tooltip) of such a toggle button is always fix. It isnot allowed to switch the label, after the state was switched. E.g. the label ofthe ‘Day’ toggle button is always ‘Day’. In case of a label change the togglebutton should not be used. E.g. a label switch from ‘Show Hierarchy’ to ‘HideHierarchy’ is not allowed for toggle buttons. Instead the label could be‘Hierarchy’ and in the selected mode the tooltip is extended to ‘HierarchySelected’.

• Within the screen reader mode the tooltip needs the extension ‘ToggleButton’. This extension should be placed between the label and the state.E.g. the tooltip for the Hierarchy button is ‘Hierarchy Toggle Button’ and‘Hierarchy Toggle Button Selected’.

Picture 11-1 shows the different kinds of buttons. The visual design of these buttontypes is defined in section 12.

Figure 11-1. Button Types

To structure buttons in toolbars, toolbar dividers are available. These small verticallines are used to logically group buttons on a toolbar. They are not used to visuallyseparate single buttons from one other.

Generic buttons:

In CRM, some generic buttons exist that have to be used in a consistent manner asdescribed in the table below:

Table 11-1.Generic Buttons

Groupname (formenu

buttons)

Function Type Tooltip

Grouping notallowed

Back Icon + Text No tooltip

Grouping notallowed

Save Icon + Text No tooltip

Grouping notallowed

Save and New Icon and Text No tooltip

Grouping notallowed

Cancel Icon + Text No tooltip

Grouping notallowed

New In toolbars: Icon +Text

As one-click action:Icon

In toolbars: No tooltip

As one-click action:New

Grouping notallowed

Add Icon + Text No tooltip

Edit Insert Text No tooltip

Edit Delete Icon Delete

Grouping notallowed

Details Link as one-clickaction

No tooltip

Edit Copy Icon Copy

Edit Edit In toolbars: Icon +Text

As one-click action:Icon

In toolbars: No tooltip

As one-click action:Edit

Edit Edit List Text No tooltip


_________________________________________________________________________________________________________________________________________________________

Page 75 of 98

Groupname (formenu

buttons)


More More Text Menu Button No tooltip

Grouping notallowed

Export toSpreadsheet

Icon Export to Spreadsheet

Go To… Go To… Icon Menu Button Go To…

Grouping notallowed

Personalize Icon Personalize

Grouping notallowed

Print Icon Print Page

Grouping notallowed

Help Icon Help

Grouping notallowed

Back to Top Icon Back to Top

Tbd by solution /knowledgemanagement

Application-specific Text No tooltip

Grouping notallowed

Move to Right Icon Move to Right

Grouping notallowed

Move to Left Icon Move to Left

Grouping notallowed

Expand Hierarchy Icon Expand Hierarchy

Grouping notallowed

Collapse Hierarchy Icon Collapse Hierarchy

Grouping notallowed

Copy Line Icon Copy Line

Groupname (formenu

buttons)


Grouping notallowed

Remove Line Icon Remove Line

Grouping notallowed

Show ConfigurableAreas

Icon Show ConfigurableAreas

Grouping notallowed

Configure Page Icon Configure Page

Grouping notallowed

Tag Icon Tag current Item

Grouping notallowed

Add to Favorites Icon Add to Favorites

Grouping notallowed

Define Tab Order Icon Define Tab Order

Grouping notallowed

Open Chart Icon Open Chart

Special rules:

o The Back and Save buttons may be replaced by text buttons that describe thefinalizing action on the page. The e-mail send screen, for example, offers theSend button instead of the Save button (Figure 11-2, left side).

o Some pages need multiple New buttons to create different new objects. In thiscase, New is replaced with the name of the object and the tooltip contains thecontent New <Object>, for example, New Corporate Account (Figure 11-2, rightside).

Figure 11-2. Special Rules


_________________________________________________________________________________________________________________________________________________________

Page 76 of 98

11.2. Button PlacementOn the CRM WebClient user interface, buttons appear in different places. Where abutton has to be placed depends on the area that the button influences.

Possible button placements and usages (Figure 11-3):

o The work area toolbar is used if a button has an influence on the whole pagecontent. Examples: Save or Help.

o A button is placed in the assignment block toolbar if the function onlyinfluences the content of the assignment block. Examples: Edit or Edit List.

o Use the table or hierarchy toolbar if a button has influence on each entry or thewhole table or hierarchy. Examples: Insert or Export to Spreadsheet.

o Buttons are placed in the first column (Actions column) of an assignment blocktable if they are one-click actions that only influence one row of the table.Examples: the one-click actions Edit or Delete.

o Buttons are placed below a group of form fields if they belong to the wholegroup. Examples: Save and Clear in the search area.

o Buttons are placed directly beside a form field if the button has an impact onlyon this specific field. Example: Save, which belongs to the Save Search As inputfield.

Alignment of buttons on the screen:

o On toolbars and below groups, buttons are always left-aligned.

o Exception:

Some generic buttons on toolbars are always right-aligned (Print, Personalize, orHelp, for example). For further details, refer to the order of buttons in section11.5.

Buttons in dialog boxes appear at the bottom of the dialog box. Depending on thedialog box type, they are centered or left-aligned. Details are provided in sectionDialog Boxes.

Figure 11-3. Button Placement

11.2.1.Special Case: More ButtonThe More button may appear in each toolbar. It contains functions that are lessimportant. This button is a menu button and is used to avoid line breaks in toolbars.Line breaks in toolbars are not allowed.

If the More button is used, it is always the last left-aligned button in a toolbar.

If a toolbar of a work area, table, or hierarchy offers more than eight buttons, the Morebutton has to be placed in position eight and all other functions (starting with functionnumber eight) have to be moved into the menu of the More button.


_________________________________________________________________________________________________________________________________________________________

Page 77 of 98

The More button can also appear in an earlier position than position eight. This has tohappen when grouping functions that are not as important as the previous ones,because they may not meet the “80% case”.

Generic buttons are never contained in the menu of the More button.

Currently it is not possible to show an icon in the menu of the More button.

Exceptions:

o If a toolbar includes many icon-only buttons, the placement of the More buttoncould be at a higher position than position eight. In this case, three icon buttonscount as one normal button. This counting rule is shown in Figure 11-4.

Figure 11-4. Counting Rule

o In the assignment block toolbars, the More button appears at position three.

o If the maximum of eight buttons leads to a toolbar line break at the standardscreen resolution of 1024 x 768, the More button has to appear earlier becauseline breaks are not allowed in toolbars.

11.3. TooltipsIcon buttons always provide a descriptive tooltip. Tooltips are never available for textbuttons, because you cannot provide further information for text buttons with a tooltip.Icon + text buttons only provide a tooltip if the interpretation of the icon is differentfrom the text meaning.

o Examples:

• A button includes the icon for New and the text Corporate Account. In thiscase the tooltip includes the text New Corporate Account.

• The Save button consists of the Save icon and the text Save. This buttondoes not provide a tooltip because icon and text provide the sameinformation.

The previous tooltip rules are also relevant for the Menu buttons.

11.4. Enabling and Disabling ButtonsThis section only describes the button behavior that is not influenced by authorizationrules. For further details concerning authorizations and their influence on buttons,refer to the section Authorizations and User Interface Behavior.

A function that is never available to a user in a specific role is not displayed on theuser interface. The button is hidden from the user. The button Forecast, for example,could only be used if a SAP NetWeaver Business Intelligence (SAP NetWeaver BI) isavailable. If the customer has no SAP NetWeaver BI, this button has to be invisible forthat customer.

The buttons are always enabled if they are also used for navigation. The navigationbuttons execute the navigation and raise an error message on the new page if at leastdisplaying the page content is allowed. Example:

o Using an Edit button on a currently locked object navigates to the edit page. Thepage is opened in display mode and an error message informs the user about thelock.

If it is obvious why a function is currently not available, the buttons are disabled.

o Examples:

• Buttons in table toolbars that require a selection.

• The Save button is disabled if nothing was changed. The system assumesthat something was changed if a new object is created, if the Edit or Edit Listbutton was used, or if a one-click action was used on an overview page.

• A user used a navigation Edit button and sees a dependent edit page indisplay mode together with an error message that editing is not allowed. Thebuttons on this page are disabled. Exception: Navigation buttons such as theBack button are still enabled to allow users to leave the page.

If it is not obvious why a function is currently not supported, the buttons are enabled.If the user tries to use such a function, an error message is raised that explains whythis action is currently not available.

o Examples:

• The Edit button for an object that is currently locked by another user.

• The current status of an object does not allow any changes.


_________________________________________________________________________________________________________________________________________________________

Page 78 of 98

11.4.1.Special Case - Buttons in Table Toolbarso Buttons which require a row selection are always disabled if nothing is

selected. After at least one row is selected, these buttons are always enabled. Ifthe amount of selected items does not fit the selected function, an error messageis raised. For example, the function Merge Accounts is only available whenexactly two accounts are selected. An error message appears if only one or morethan two accounts are selected.

o Buttons that are independent from the selection in the table are alwaysenabled. Example: New button.

o The More button is always enabled to allow the user to see which functions areavailable. The menu entries behave like the buttons described in the twoprevious rules of this section.

11.5. Order in Toolbars and in the Actions ColumnThe availability of the generic buttons depends on the page type and the toolbar type.

On the toolbars, the application-specific buttons always appear after the generic ones.You cannot mix them.

For all application-specific buttons, the application owners have to ensure that theorder of the buttons used is consistent in the whole application.

Between application-specific buttons, you can define additional toolbar dividers togroup buttons logically.

All toolbar dividers mentioned in the following sections are mandatory if they aresurrounded by buttons.

Toolbar dividers never appear as the first or last element on a toolbar.

11.5.1.Search Page

Figure 11-5. Work Area Toolbar Search Page

Order of left-aligned buttons (Figure 11-5):

o Archive Search (optional, toggles between Archive Search and Back to Standard-Search)

Order of right-aligned buttons:

o Show Configurable Areas (possible, depends on authorizations andpersonalization)

o Help (mandatory)

11.5.1.1. Table Toolbar Search Result List

Figure 11-6. Table Toolbar for Search Result List


o New (optional)

o Delete (optional)

o Copy (optional)

o Toolbar divider

o Application-specific buttons (optional)

o Toolbar divider

o More (optional)


o Open Chart (optional)

o Export to Spreadsheet (optional)

o Personalize (optional)

11.5.2.Editable Overview Page

Figure 11-7. Work Area Toolbar for Editable Overview Page


_________________________________________________________________________________________________________________________________________________________

Page 79 of 98


o Save (mandatory)

o Save and New (optional, should replace New)

o Toolbar divider

o Cancel (mandatory)

o Toolbar divider

o New (mandatory, could be replaced by Save and New dependent on the usecase -> see below)

o Edit (optional)

o Delete (optional)

o Copy (optional)

o Toolbar divider


o Toolbar divider

o More (optional)

Special use cases for the “Save and New”button:

o The Save and New button is to be used only if definitely required.

o Use it only if a creation of multiple new objects is a 99% use case.

o Contrary to the New button, no data loss popup appears if the user wants tocreate a new object.

o If you use the Save and New button, you should take possession that the Newbutton does not appear in this toolbar.

Order of right-aligned buttons :


o Configure Page (possible, depends on authorizations and personalization)

o Tag current Items (possible, depends on personalization)

o Add to Favorites (possible, depends on personalization)

o Go To… (mandatory)

o Personalize (mandatory)

o Print (mandatory)

o Help (optional)

11.5.3.Suboverview Page

Figure 11-8. Work Area Toolbar Suboverview Page


o Back (mandatory)

o Toolbar divider

o New (mandatory)

o Delete (optional)

o Copy (optional)

o Toolbar divider


o Toolbar divider

o More (optional)



o Configure Page (possible, depends on authorizations and personalization)

o Tag current Items (possible, depends on personalization)

o Add to Favorites (possible, depends on personalization)

o Go To… (mandatory)


_________________________________________________________________________________________________________________________________________________________

Page 80 of 98


o Print (mandatory)

o Help (optional)

11.5.4.Assignment Blocks

11.5.4.1. Form View

Figure 11-9. Form View-Based Assignment Block Toolbar (Display Mode)


o Edit (optional)

o Toolbar divider


o Toolbar divider

o More (optional)


o Define Tab Order (possible, depends on authorizations and personalization)

o Back to Top (mandatory, but not available in the first assignment block Details ofthe overview page)

11.5.4.2. Table / Hierarchy View – Display Mode

Figure 11-10. Table-Based Assignment Block Toolbar (Display Mode)


o New (optional)

o Add (optional)

o Edit List (optional)

o Toolbar divider


o Toolbar divider

o More (optional)


o Open Chart (optional)

o Export to Spreadsheet (optional)


o Back to Top (mandatory)

o Resize (optional, only allowed for navigational hierarchies)

o Close (optional, only allowed for navigational hierarchies)

11.5.4.3. Table / Hierarchy View – Edit Mode

After a table-based assignment block has been switched to the in-place edit modewith the Edit List button, the Edit List button is disabled. No other changes appear inthe assignment block toolbar. A table toolbar may appear between the assignmentblock toolbar and the table.

Figure 11-11. Table-Based Assignment Block Toolbar (Edit Mode)

Order of left-aligned buttons:

o Insert (optional)


_________________________________________________________________________________________________________________________________________________________

Page 81 of 98

o Delete (optional)

o Cut (only allowed for hierarchies, optional)

o Copy (optional)

o Paste (only allowed for hierarchies, mandatory, if Cut or Copy is used)

o Toolbar divider


o Toolbar divider

o More (optional)

Right-aligned buttons are not available in this kind of table toolbar.

11.5.4.4. Table Actions Column

In the Actions column of an assignment block table, a maximum of three one-clickactions are allowed.

Figure 11-12. Assignment Block Table Actions Column

Order (Figure 11-12):

o Edit (optional)

o Delete (optional)

o Details link (optional)

o Application-specific link (optional)

Special use cases for the “Details” link:

o The Details one-click action is to be used only if definitely required.

o Use it only if the user needs more detailed information (maybe read-only) with theaim to only display, not edit this information.

o The link navigates to a separate page that is displayed either in edit or in read-only mode (depending on the available authorization).

o Contrary to the Edit one-click action, no error message appears if the user onlyhas read access.

o Example:

• The user enters a closed contract that is no longer editable to see somecontract-specific conditions and price details.

• The user just wants to see the details page behind the conditions/pricesassignment block (which is a table).

• The user knows that he or she cannot edit the information. He or she justwants to view the information.

• Here, the Details link makes sense and may be used.

11.5.5.Edit Page

Figure 11-13. Work Area Toolbar for Edit Page


o Back (mandatory)

o Toolbar divider

o New (optional)

o Toolbar divider

o Application-specific buttons belonging to the whole page (optional)

o Toolbar divider

o More (optional)


o Define Tab Order (possible, depends on authorizations and personalization)


_________________________________________________________________________________________________________________________________________________________

Page 82 of 98


o Help (optional)

Buttons Belonging to One Group:

If an edit page offers multiple groups, e.g. a form and a table, then the buttons whichbelong justto one of these groups should be placed directly into this group (in cases of a Formthe buttons areplaced below the Form).

11.5.6.Guided Maintenance

11.5.6.1.1. Work Area Toolbar

Figure 12-146. Work Area Toolbar Guided Maintenance

Order of left-aligned buttons (figure 12.16):

o Finalize Action (mandatory)

o Save (optional)

o Toolbar divider

o Cancel (mandatory)

o Toolbar divider


o Toolbar divider

o More (optional)


o Personalize (optional)

o Help (optional)

11.5.6.1.2. Roadmap Toolbar

Figure 12-17. Roadmap Toolbar Guided Maintenance


o Previous (mandatory)

o Next (mandatory)

o Toolbar divider


o Toolbar divider

o More (optional)

Right-aligned buttons are not available in this kind of roadmap toolbar.

11.5.7.Dialog BoxesButtons may be centered or left-aligned at the bottom of the dialog box, depending onthe dialog box type (refer to section Dialog Boxes).

The finalizing button is always the leftmost button and if it makes sense, it is anemphasized button.

Buttons in dialog boxes are always text-only buttons. Icon buttons are not permitted.

UI Guidelines for SAP CRM – Chapter 12 Icons and Pictograms

_________________________________________________________________________________________________________________________________________________________

Page 83 of 98

12. Icons and Pictograms

12.1. IconsIn general, icons are to be avoided wherever possible. However, there is a set oficons that are used for a compact display of standard functions. These icons aregenerally allowed to be used by applications.

A list of these generic icons can be found under:

http://uxcia0f.wdf.sap.corp:50026/SAP(bD1lbiZjPTAwMA==)/BC/BSP/SAP/crm_thtmlb_test/icons.bsp (User: Anzeiger, Password: display)

Icons in this list that have a flag in the column Show Label will be displayed as acombination of icon and text, for example Save. Icons that have no Show Label flagare not automatically always without a label, but they can be, depending on wherethey are used.

All icons have a standard size (14x14 pixels) and a tooltip for accessibility reasons. Ifrequired, the tooltip of an icon can be modified, but the original meaning of the iconshould be kept.

Generic icons can be used as:

o Function icons. There is a fixed set of function icons that can occur on buttonsor as one-click actions in tables.

o One-click action icons in tables are shown in the following figure:

Figure 12-1. Icons for One-Click Actions

Further information about icons and buttons can be found in section Buttons.

In addition to the generic icons described above it is possible to use applicationspecific icons to display specific states of an application. Such icons are allowed inthe following cases:

o Icons to display file types

o Icons that help to distinguish mixed object types in hierarchies or tables.

o Icons to display status information. General status icons in the sense of OK/NotDue, Warning/Due and Error/Due, shown in the following figure, can be used:

Figure 12-2. Icons for Status

Tips for avoiding icons:

o Use text instead of icons

o Use text on application-specific buttons

o Use a general status icon combined with text to refine the meaning instead ofrequesting a new icon

All application icons that are not listed or have a different meaning in your applicationthan the listed ones need to be approved by the UI concept team. The first step is foryou or your team to contact the UI concept team and request the icon. The request isnot only necessary to keep an overview of all icons, but also to ensure a consistentvisual design for all icons and to ensure that these icons are available for all skinsthroughout the framework.

12.2. PictogramsSAP pictograms have a completely different visual style than icons, and a differentpurpose. They help users to differentiate between categories when differentcategories appear together on a home page. Pictograms should only appear on ahome page, workcenter page and on the recent objects and create areas in all skinsbesides Signature Design.

http://uxcia0f.wdf.sap.corp:50026/SAP(bD1lbiZjPTAwMA==)/BC/BSP/SAP/crm_thtmlb_test/icons.bsp

http://uxcia0f.wdf.sap.corp:50026/SAP(bD1lbiZjPTAwMA==)/BC/BSP/SAP/crm_thtmlb_test/icons.bsp

UI Guidelines for SAP CRM – Chapter 13 Scrolling

_________________________________________________________________________________________________________________________________________________________

Page 84 of 98

13. Scrolling

13.1. General Behavior (Defined by Framework)In general, the upper area of the navigation frame (header area) and the work area toolbarare always fixed on the screen and do not have their own scrollbars. Line breaks for theseareas are not allowed in the standard screen resolution of 1024 x 768.

The navigation area and the work area get their own scrolling mechanisms if the content islarger than the available visible space (Figure 13-1).

If the screen resolution is different than the standard screen resolution, automatic resizing issupported. The minimum screen resolution that should be supported using resizing is 800 x600. If a screen has a smaller resolution (available screen size for the CRM applicationwithout browser content is smaller than 800 x 445), a vertical and a horizontal browserscrollbar appears for the whole application window.

Figure 13-1. Fixed and Scrollable Areas

The standard screen resolution for the CRM WebClient user interface is 1024 x 768. Thefollowing rules apply for this screen resolution.

Independent scrollable areas:

o The navigation area has two scroll areas, one at the top and the other at the bottom ofthe navigation area, if the content exceeds the visible space of this area. Horizontal

scrolling for this area is not supported. A line break will appear if the text for an entry istoo long.

o The work area will get a vertical scrollbar if the content exceeds the visual space of thework area. A horizontal scrollbar for the work area is not supported.

13.2. Tables and Hierarchies

13.2.1.TablesTables using the entire visible work area width (Figure 13-2):

o By default, such tables will not get their own scrollbars.

o If the available space in a table is not sufficient, the content will be cut. This cut isindicated by three dots at the end of the cell’s content.

o It is possible to define the width of each column in the UI Configuration Tool and in thetable personalization dialog box to avoid negative cutting effects like hiding a button inthe Actions column of an assignment block.

o Hiding value helps, date selections, dropdown listbox icons, and one-click actions is notallowed in the standard system (screen resolution 1024 x 768). To achieve this,sometimes the table column width needs to be adapted to its content.

o For customers and for some freestyle tables, it should be possible to allow a horizontalscrollbar instead of the cut mode.

This mode switch is available in the UI Configuration Tool.

The horizontal scrollbar moves the whole table column (data cells and columnheader cells) either right or left.

The horizontal scrollbar should not have an influence on the table toolbar or thetable paging area. This means all buttons and links in these two areas shouldalways be visible; hiding functions by scrolling is not possible.

o Vertical scrollbars are not allowed for this kind of table.

o A pager will appear for this kind of table.

Tables not using the entire visible work area width:

o If the available width of a table is not sufficient, the table content is cut.

o For horizontal scrollbars, the same rules as in the previous section apply.

o If needed, a vertical scrollbar can be used.

UI Guidelines for SAP CRM – Chapter 13 Scrolling

_________________________________________________________________________________________________________________________________________________________

Page 85 of 98

The table has a fixed height, and if more entries are available, a vertical scrollbarappears.

The column header cells, the table toolbar, and the paging area are not influencedby the vertical scrollbar.

If two tables or a table and a form view are displayed side by side in one group andthe visible height of the table is not needed, the table should be filled with emptytable rows to avoid extensive empty spaces on the screen (for example,personalization of tables, or navigational hierarchy in the marketing campaign).

The table height can be adapted to the table content.

o If the table has more than 100 entries, in addition to the vertical scrollbar, a pagerappears for performance reasons.

Tables with horizontal (Figure 13-2) and vertical scrollbars:

o Both scrollbars should have a fixed location and should always be visible.

o It should not be possible that by scrolling vertically, the horizontal scrollbar is hidden,and vice versa.

Figure 13-2. Horizontal Table Scrollbar

13.2.2.HierarchiesIn general, hierarchies should get a vertical scrollbar instead of a pager if the visual heightof the hierarchy is not sufficient.

A horizontal scrollbar should not appear in the standard system. For customers, however, itis possible to switch from the cut mode to a horizontal scrollbar in the UI Configuration Tool.Further details can be found in section Hierarchies.

Due to performance restrictions, a pager should only appear if a hierarchy has more than100 entries.

Recommendation:

o A hierarchy that only uses one third of the visible work area width should have amaximum of two columns to ensure that the content is legible without any cutting orhorizontal scrolling.

13.3. Applets and Other Freestyle ElementsIn general, such elements could get their own vertical and horizontal scrollbars, dependingon the space they need. Examples are the graphical buying center and the campaignautomation applets (Figure 13-3).

Figure 13-3. Applet with Its Own Scrollbars

UI Guidelines for SAP CRM – Chapter 14 Messages

_________________________________________________________________________________________________________________________________________________________

Page 86 of 98

14. MessagesSystem messages provide information to users concerning errors, warnings, success, orgeneral system events. Error messages are system messages that are displayed in order totrigger some user action, but they do not necessarily interrupt the user's interaction flow.Errors have to be treated appropriately before saving an object. Warnings inform usersabout potential problems that they should be aware of but that do not have an impact on thefurther processing of an object. Success messages state that a function triggered by theuser has been finished correctly (for example, saving an object). General systeminformation lets the user know what the system is currently doing or has previously donewithout requiring user reactions. Messages appear in the following positions: the messagebar, in tables, and in (usually modal) dialog boxes. In interactive dialog boxes, messagesappear in a message area below the dialog title.

14.1. Message Bar Position and BehaviorIf no messages are available, the message bar is invisible. In its default position, the barappears in the page toolbar. It may, however, be dragged to any position of the work area.

Figure 14-1. . Message Bar in collapsed mode

Figure 14-2. Message Bar with expanded message log

The message bar is found between the work area toolbar and the work area (Figure 14-1and Figure 14-2). If no messages are available, the message bar is invisible. In its defaultposition, the bar overlays the work area toolbar. It may, however, be dragged to eachposition of the work area or the left navigation bar. Figure 14-1 and Figure 14-2 display thebar in closed and expanded mode. The message bar shows new messages within a so-called “toast-up” that is opened above the message bar as soon as a message comes in.The toast-up is modeless, i.e. the user can proceed interacting with the UI while the toast-upis displayed. If there are less than four messages the messages appear one after the otherlike in Outlook in the preview. If there are more than three new messages, only a message"Multiple new messages..." is shown in the toast-up.

Figure 14-3 displays two examples for toast-up notifications: a single warning and thenotification if more than three new messages exist.

Figure 14-3 Examples for toast-up notifications

The message bar may also appear within search help dialog box windows (Figure 14-3).There, the message bar looks different. This bar takes the width of the search help dialogbox and displays 3 messages at the most. If more than 3 messages exist, a scrollbaroccurs. No toast-up window will be displayed in the dialog box version of the message bar.

Figure 14-3. Message Bar in Search Help Dialog Box Window


_________________________________________________________________________________________________________________________________________________________

Page 87 of 98

14.2. Messaging Elements

14.2.1.Message BarThe message bar may contain all message log elements listed below. This area is visuallyindicated using a dedicated background color. The size of the message log area isautomatically adapted to the length and number of the messages contained in the log.

14.2.2.Message IconsEach message in the message log is marked by one of three icons:

o Error messages

o Warning messages

o Success or general system event messages

14.2.3.Details LinkIf additional detailed information is available for a message, a Details link is insertedbetween the message icon and message text. A click on this link opens a dialog box windowwith further information.

14.2.4.Message TextThe message text provides a short and comprehensive description of the alert, error,warning, success, or general system event. If required, the message text may be equippedwith a hyperlink in order to trigger an action. Only one action associated with the messagetext is permitted and the complete message text is shown as a hyperlink.

The text should not contain purely technical information that the users may not understand.If necessary, the message ID may be displayed, since the ID might be required for purposeslike error escalation. User interface-related messages should only refer to the user interfaceof SAP CRM 5.1 and above.

14.2.5.Message CounterIf more than one message is in the message area, the message counter displays the totalnumber of messages. If at least one message exists, the counter is constantly visible inorder to inform the user of the total number of messages.

14.3. Message Log Behavioro Messages are sorted chronologically with the most recent message always on top.

o Success messages and general system event messages disappear after the nextroundtrip.

o Alerts, errors and warnings disappear after the invoking system property no longerexists and a roundtrip has been triggered (for example, the user enters a missing valuehas been entered in a mandatory field).

14.4. Message DialogsMessage dialogs are used in order to request decisions or confirmations of the user.

Specific message dialog box dialogs have been defined for the following purposes:

o To provide system information, in an information dialog box. This dialog has to beconfirmed by the user (usually by clicking a finalize button like “OK”).

o To interrupt interaction, with a modal alert dialog box.

o To interrupt interaction, with a decision dialog box. An example for a decision dialog isthe “data-loss” dialog, where the user is asked to decide for one of the followingalternatives after having triggered a certain navigation: (1) Save the current object andproceed with navigation, (2) do not save the current object and proceed with navigation,or (3) cancel the navigation, stay at the current page, and close the dialog.

o For information concerning dialog box design, see section 8.

14.5. Messages in TablesThe message text Empty Table is displayed in table without any contents, e.g. assignmentblock tables. For search result list, the table title is used for messages.

If results were found, then the table header displays the number of records that were found.The general format of the result list table header is:

Syntax: Result List: <number of records> < object type> found

Examples: “Result List: 28 Accounts Found”, “Result List: 1 Service Order Found”

Syntax: Result List: More Than <maximum number of records> < object type> Found


_________________________________________________________________________________________________________________________________________________________

Page 88 of 98

The examples show that the name of the object is displayed in singular or pluralaccordingly. If the number of results found exceeds the given maximum number of hits, thenthe general format of the result list table header is:

Example: “Result List: More Than 100 Leads Found”

Special guideline for assignment block tables: If an assignment block table displays only alimited number of records (according to a maximum number of records set for thisassignment block), then a message may be displayed in the message area. The generalformat of this message is as follows:

Syntax: Assignment block <Assignment Block Title>: More than <maximum number ofrecords> entries exist

Example: Assignment block Marketing Plan Elements: More than 100 entries exist

UI Guidelines for SAP CRM – Chapter 15 Personalization

_________________________________________________________________________________________________________________________________________________________

Page 89 of 98

15. Personalization

15.1. What Does Personalization Mean?Offering personalization means that end users can adapt the software to fit their needs best.It improves user productivity by adapting the application to a user’s individual working style.

Personalization is done by end users, while configuration in any form, such asadministration or Customizing, is done by project teams, solution consultants, key users,and administrators. Personalization influences the user interface (UI) of an individual enduser, while configuration influences the UI of a group of users.

Personalization is valid longer than just one working session. It is done once, or severaltimes at greater intervals (not daily or weekly, for example), with the goal of achieving apermanent state.

Personalization should be reduced to a minimum. It is not the users’ task to define their UI.Users who want to adapt their user interface to individual preferences are provided withpersonalization capabilities where appropriate.

15.2. Personalization DialogsA personalization dialog is the UI with which a user can adapt the UI of the application itself.Mostly one single object, the personalization object, can be adapted, for example thecolumns of a search result list. Most of the personalization dialogs are built generically. TheUI structure of the dialogs cannot be changed, but the content has to be adjusted accordingto the use cases.

Besides the generically built dialogs, application-specific dialogs can be implemented aswell. In this case, “application-specific” means having the option to change the structure ofthe dialog partially. But we strongly recommended following the dialog structure of thegenerically built dialogs for consistency.

A personalization dialog can call further dialogs as popups, e.g. a value help or a furtherpersonalization popup to do detail settings. If a popup is called out of another popup it isstrongly recommended to call no further popups from there.

Generally the interaction behavior has to be consistent in all personalization dialogs.

The following elements make up the structure of a personalization dialog:

o Dialog frame is the body of the personalization dialog and can be placed within adialog box or within the work area. It contains all screen elements for further structuring.

o Dialog title names the personalization object or group of personalization objects.

o Message bar displays error messages which might occur when users choose Save.

o Help text is optional and can be used to give further explanations directly on the UI ifneeded. Help texts can be placed below every title which is displayed in the dialog.

o Property group groups all properties of a personalization object.

o Property group title names the property group and must be used only if multipleproperty groups are displayed.

o Property values can be changed for each property to adapt the UI.

o Property group function buttons trigger functions to change property values.

o Finalizing buttons generally save or discard the changes and close thepersonalization dialog in parallel.

o Child Personalization Entry point launches a secondary personalization dialog forfurther settings

Figure 15-1 and Figure 15-2 show two personalization dialogs, one displayed as a dialogbox and another one displayed within the work area.


_________________________________________________________________________________________________________________________________________________________

Page 90 of 98

Figure 15-1. Dialog Box for the Personalization Dialog

Figure 15-2. Finalizing and Reset to Default Buttons

Besides additional function buttons which might be needed to change property values, thefinalizing buttons and the Reset to Default button must be used consistently in allpersonalization dialogs.

After changing some property values, the user can trigger three actions:

o Reset to Default sets the property value back to the default value of the application.This function has to be offered for each property in order to avoid data loss onproperties for which the user did not want to reset to the defauult. If the dialog is notvery complex, this button can also be placed in the button row of the finalizationbuttons.

o Save saves the changes, closes the personalization dialog box, and refreshes thecorresponding UI immediately. Dialogs displayed within the work area use a Save andBack button instead to produce the same result.

o Cancel closes the current personalization dialog while navigating back to the previouspage or closing the dialog box without saving any changes.


_________________________________________________________________________________________________________________________________________________________

Page 91 of 98

15.3. Launching a DialogA personalization dialog is launched by ”entry points”. An entry point is the link, button, oricon with which a user calls up a personalization dialog. The positions for these entry pointsare predefined for the generically built dialogs (see Figure 15-3 and Figure 15-4).

Figure 15-3. Entry Points of Generic Personalization Dialogs

For application-specific dialogs, the positions of entry points can deviate from thegenerically built ones in order to support their use cases optimally.

Figure 15-4. Entry Point of an Application-Specific Personalization Dialog

15.4. ExamplesFigure 15-5 and Figure 15-6 show examples of some generic personalization dialogs.Figure 15-5 is a dialog for showing and hiding assignment blocks that can appear on anoverview page. Additionally, the sequence of visible assignment blocks can be changed.

Figure 15-5. Overview Page Personalization

Figure 15-6 shows a dialog for showing and hiding table columns within a table control. Thesequence of the displayed columns can be changed, as well as the width of individualcolumns. There is also an option to define the number of visible rows that will be displayedper table page.


_________________________________________________________________________________________________________________________________________________________

Page 92 of 98

Figure 15-6. Table Personalization

15.5. Drag and DropAdditionally, drag and drop functions are available to support faster and more directpersonalization without launching a personalization dialog popup. Drag and drop works forthe following personalization objects:

o Table columns (change of column width, change of column order)

o Home page and workcenter page (change of content block position)

o Overview page (change of assignment block sequence)

Drag and Drop is within the personalization popu dialogs itself available, too.

Figure 15-7. Personalize Column Width Using Drag and Drop

Figure 15-8. Personalize Column Sequence Using Drag and Drop


_________________________________________________________________________________________________________________________________________________________

Page 93 of 98

Figure 15-9. Personalize Content Blocks Using Drag and Drop

Figure 15-10. Personalize Assignment Blocks Using Drag and Drop

15.6. Usage of Application specific PersonalizationSettings that are done frequently and routine tasks, such as maintaining key performanceindicators (KPIs) or defining rules, are not part of a typical personalization. Instead, theybelong to the application functions. In many cases, it is difficult to distinguish whether youshould incorporate the application settings to the application UI or to use a separate dialog.The workflow is basically the same. Therefore, we recommend that you use for these kindsof application specific settings the UI dialogs of the personalization. The following sequenceof control questions may be useful to assist you in defining when to use a personalizationdialog for application settings.

If the following questions can be answered with “Yes”, the settings can belong to apersonalization. If the answer is generally “No”, a redesign of the application or availabilityof the settings in Customizing should be considered.

1. Do the settings optimize the individual workflow of the user?

2. Are the settings adjusted once or occasionally (at greater intervals, not daily) withthe goal of achieving a permanent state?

3. Does the user expect to be able to make such a setting here?

4. Is the user being offered the settings because this is a useful feature here (and isnot a kind of workaround due to design/resource issues)?

5. Do the settings help the user to adapt the application to his or her personal workingstyle?

6. Is the application still fully accessible after the settings have been made?

7.

UI Guidelines for SAP CRM – Chapter 16 Authorizations and User Interface Behavior

_________________________________________________________________________________________________________________________________________________________

Page 94 of 98

16. Authorizations and User Interface BehaviorThis section provides an overview of the behavior of the CRM WebClient UserInterface whenever authorization becomes relevant. It provides the status agreed onand implemented across the CRM solution.

This user interface guideline is not intended to provide any statements or guidelinesregarding the technical authorization concept or authorization business rules to bemaintained in the standard CRM delivery, since these authorization guidelines arespecific to the customer, business scenario, and role. The focus of this section is aconsistent user interface behavior across CRM, given a set of circumstances (forexample, authorizations are maintained according to business needs).

The statements below are based on the assumption of a hierarchical dependencybetween authorizations, where the next-highest level includes the previous levels.

Levels of authorizations (simplified model needed for the explanations below):

o Display/read authorization

o Change authorization

o Create authorization

o Delete authorization

16.1. General rulesThe following rules are the basis for a secure CRM solution:

o Read authorization

If a user has no read authorization for an object, he or she cannot see thedetailed information of that object. Exceptions are information concerning anobject that is contained in a link to the object, for example displayed in a searchresult list.

o Create authorization

A user can only create an object if he or she has create authorization. Normally,the user cannot access any create object pages if he or she has not the requiredauthorization. This affects all buttons that trigger the creation of a new object,such as New, Copy, or Follow-Up.

If the authorization is not handled directly at object level, but at any subtype level(such as transaction types, categories in products, or roles in accounts) theprevious rule might not be valid because only in a later step can the systemdecide if the corresponding authorization is available.

If a user has, for example, authorizations for only a sub-set of the transactiontypes of a business object, then Create is available, but the transaction typedialog box has to be filtered to show only the allowed transaction types.

o Edit authorization

An editable page must be shown as not available for input (entry fields areinactive) if the user has no edit authorizations. Any process that leads to editingdata will be stopped at the earliest step possible (for example, at click of an Editbutton) so that the user does not have to perform unnecessary tasks.

For example, edit buttons that lead to editing in-place on the overview pageshould have the following behavior: When the user clicks the button, theauthorization is checked. If no edit authorization is available for the user, then acorresponding information message is shown and the assignment block stays indisplay mode.

If an edit button leads to a separate edit page, where more information isavailable than on the overview page, the navigation to the edit page takes place,but the target edit page is shown in read-only mode, in other words, all normallyeditable fields are shown inactive.

These rules apply for all buttons that change an object or parts of it, such as Editbuttons, Edit List buttons, one-click actions, mass changes, and so on.

o Delete authorization

If a user has no delete authorization for an object, he or she cannot delete it. Thisis valid for explicit and implicit deletion if not stated differently by any exception.

16.2. Interface areas affected by AuthorizationsThe following areas of the CRM WebClient are generally affected by authorizations:

o Navigation frame: First-level and second-level navigation bar entries

Independent of the customizing of technical roles, the authorization settingsdetermine which objects are available for a user in the first-level and second-levelnavigation. Assume, for example, a role that is customized to offer access toAccounts. If a specific user assigned to this role does not at least have displayauthorizations for Accounts, then this navigation entry is hidden for this user.

o Navigation frame: Create hyperlinks

Independent of the technical role customizing, the authorization settingsdetermine which Create links are finally available for a user in the Quick Createarea of the navigation bar. Assume, for example, a role that is customized to offer

UI Guidelines for SAP CRM – Chapter 16 Authorizations and User Interface Behavior

_________________________________________________________________________________________________________________________________________________________

Page 95 of 98

a Create Account link. If a specific user does not have Create authorizations forAccounts, then the Create Account link is hidden for this user.

o Navigation frame: Saved searches

Independent of the technical role customizing, the authorization settingsdetermine which saved searches are available for a user in the Saved Searchesdropdown list box. If, for example, pre-defined saved searches for My Accountsare assigned to a role, but a specific user does not at least have displayauthorizations for Accounts, the corresponding searches are hidden for this user.

o Home, work center and reports pages

Links to reports, saved searches or create pages are only shown if the user hasthe corresponding authorizations for the actions triggered by these links.

o Buttons/functions/one-click actions

Any button, function, or one-click action must only trigger its corresponding actionif the user has the authorization to perform this action. If a button, function, orone-click action can be clicked even though the necessary authorization is notavailable, the user has to be informed with a message in the application logabout the missing authorizations.

o Search Result lists of advanced searches and input helps

In principle the result list can be filtered to show only objects for which the userexecuting the search has at least display authorization. But depending on theconcrete business scenario this can have a negative impact on the performanceof the system. Thus, if the authorizations are used to filter the result list or if allobjects which meet the search criteria are shown (even if the user has no displayauthorization for these objects) must be decided case by case.

If links to objects are contained in the search result list for which a user has nodisplay authorization, then the user must be informed about this fact by amessage when he or she clicks on the link.

Special case: Depending on the result list row, several hyperlinks can beavailable leading to different kinds of objects (depending on the authorizations).The leading object (the object that was searched for) determines whether it isdisplayed or not.

o Data in table views on details pages (such as overview pages)

The same principles as for search result lists apply. If the table can be filtered toshow only rows for which the user has at least display authorization this shouldbe the preferred option. If this is due to performance problems not possible, thetable should show all entries and the user should be informed about the missing

display authorization if he or she triggers a navigation to the correspondingobject.

o Hyperlinks navigating to object details

Hyperlinks are always rendered as hyperlinks, independent of the authorizationof the user for the navigation target.

If the user does not at least have display authorizations for the target object, itshould not be possible to navigate. The user stays where he or she currently isand a message is shown in the application log. The text of the message is Youdo not have display authorization.

UI Guidelines for SAP CRM – Chapter 17 UI Texts

_________________________________________________________________________________________________________________________________________________________

Page 96 of 98

17. UI TextsThis chapter contains a collection of the most important rules concerning texts on the userinterface (UI). This collection will be extended by other topics as they are required. The firstcentral topic is capitalization.

17.1. CapitalizationThis is a simplified summary of the most important English capitalization rules at SAP. For acomplete list of capitalization rules, see the SAP Corporate Portal under the quick link/infodev -> Standards and Guidelines -> General Standards and Guidelines for Writing atSAP (General S&G). If you are unsure of capitalization, always ask your author, languageeditor, or translator. A quick question now can save you from a more complex fix later.

Table 17-1.Title Capitalization

Text Type Capitalization Style Examples

Most texts that appear on the UI(exceptions in table below)

Title Created By

Save Template (Default Form)

Maintain Business Partners

Templates and Add-Ins

Including Terms a User IsLikely to Look Up

Title capitalization means:

o As a rule, the first letter of each word is capitalized.

o Do not capitalize small words with four letters or less, such as:

a at for nor or The

an but from of per to

and by in on some with

o Always capitalize the first and last word of the text, even if it is a small word (see listabove).

Table 17-2.Exceptions (Sentence Capitalization)

Text Type Capitalization Style Punctuation at End Examples

Error messages Sentence None Data was not saved;see long text

Status messages Sentence None Order was transferred

Complete sentences orquestions on the UI

Sentence Complete sentenceshave punctuation;fragments do not

Enter a transaction ID,service ticket ID, orreference number.

Do you want to saveyour entries?

Labels of boxes/calloutsin graphics/flowcharts

Sentence None Warehouse request

Run logistics scenario

Sentence capitalization means:

o Only the first letter of the sentence is capitalized. All other words are written in lowercase, except for proper nouns.

o Do not capitalize these words in normal text:

directory folder report table

field menu screen transaction

file program system transaction code

17.2. Message TextsThis is a simplified summary of the most important message text guidelines at SAP. If youare unsure about how to formulate a message text, ask your author, language editor, ortranslator.

UI Guidelines for SAP CRM – Chapter 17 UI Texts

_________________________________________________________________________________________________________________________________________________________

Page 97 of 98

General Guidelines

Category Guideline Example

Word choice Do not use please Enter the company code

Provide assistance instead ofjust declaring what is wrong

Enter conditions in rule &1

Not: Conditions are not maintained

Capitalization/punctuation

Begin the first word with acapital letter

Order is not available; check your entry

No period (.) at the end ofmessages

Use periods (.) followingmessage texts only if a questionfollows

Unsaved data will be lost. Do you want to save?

Separate two sentence partswith a semicolon (;)

Data is not available; define the result areas first

Do not use all capitals orexclamation points (!) foremphasis

All data is deleted

Not: ALL data is deleted!

To emphasize texts that appearon the UI, such as field names,use italics.If italics are not possible, usequotation marks (“”).

To view the contract item you created, go to theContract Overview page

Enter a date in the correct format in the “DateFrom” field

TemplatesUse the following standard formulations to help you create messages correctly.

Category Template Example

Error Cannot display <object>;<reason>

Cannot display revision status; period is alreadycompleted

Error <while/during><operation>; <instruction>

Error while posting; see log

<Error>; contact technicalsupport

Database inconsistency; contact technicalsupport

<Action> is not permitted;<reason>

Deletion is not permitted for user status; relevantauthorization does not exist

<Action> is not possible;<reason>

Deletion is not possible; actual values exist

You cannot <action>; <reason> You cannot save the planning variant; vendoraddress is invalid

Authorization You are not authorized to<action>

You are not authorized to change the contract

Instructions Enter <object> Enter a valid period

Select <object> Select the lines to be deleted

Confirmation Additional <objects> are notselected

Additional status profiles are not selected

<Object> <past participle> Contract created

Not: You havesuccessfully created acontract

<Object> does not exist Business partner does not exist

<Object> is not available;<instruction or reason>

Data is not available; define the result areas first

<Object> already exists Class type already exists

Search results <Object> found 14 documents found

<Object> not found Contract not found

No <objects> found No materials found

UI Guidelines for SAP CRM – Chapter 18 Accessibility

_________________________________________________________________________________________________________________________________________________________

Page 98 of 98

18. Accessibility

18.1. OverviewThe CRM WebClient user interface (UI) has to be compliant with the SAP AccessibilityStandard 3.0 and the relevant international accessibility standards Section 508 and WCAG2.0. Accessibility is mainly guaranteed by the SAP CRM framework.

As long as screens are developed using the UI Configuration Tool, an applicationdeveloper need not worry about accessibility. In this case, the framework guarantees thatthe resulting screen is compliant with accessibility requirements, as long as the applicationdeveloper followed the rules described in this guideline. E.g, the usage of icons is restrictedto the icons, which are predelivered by the framework and for the configuration of a form thecorrect grid is used (for two columns a 16 columns / 2 panels grid should be used, for a onecolumn form a 16 column / 1 panel grid should be used).

For screens that are created outside of the UI Configuration Tool (such as Java-Applets,ActiveX Controls, views that contain native HTML, or views that contain freestyle THTMLB),developers are responsible for making sure that the screen matches all relevantaccessibility requirements. Before starting implementation of such a screen, contact SAPCRM accessibility coordinators for advice.

18.2. Keyboard SupportThe user interface offers full keyboard support. Thus, all interactive elements (links, fields,buttons, and so on) on a screen can be reached and executed using keyboard actions.

The user interface provides special navigational shortcuts to set the cursor focus to certainscreen areas. The defaults for these shortcuts follow a suggestion by the British DisabilityRights Commission for access keys in public Web sites. To avoid conflicts with the shortcutsprovided by assistive technology (screen reader, screen magnifier, and so on) or othersoftware products, the navigational shortcuts can be personalized (in the centralpersonalization screen, which can be reached via the Personalize link in the system links).For detailed documentation on keyboard handling, see the Help Center under NavigatingKeyboard Navigation.

18.3. Support for Visually Impaired UsersTo support users with various types of color blindness, the CRM WebClient UI allows theuser to choose between different skins. A skin defines the colors of the UI elements, the fontsize and font type of textual UI elements, and the spacing between UI elements.

By default, a black high contrast skin is delivered, which supports the most common types ofcolor blindness. An administrator is able to define new skins if required. Such skins can betailored to the needs of users with very special types of color blindness or visualimpairments.

To support users with low vision, it is possible to choose between three font sizes in thepersonalization screen or to use the browser zooming functionality.

18.4. Screen Reader ModeThe CRM WebClient UI has a screen reader mode that is especially designed to supportblind users who rely on a screen reader or a Braille keyboard to access the application. Thismode can be switched on or off in the personalization screen.

At the moment, the application provides extended tool tips for most screen elements in thismode. In addition, some UI elements, such as checkboxes, are rendered differently in thescreen reader mode.

The recommended screen reader to use for the CRM WebClient UI is JAWS with version 9or higher.

https://portal.wdf.sap.corp/irj/go/km/docs/guid/c0379eff-2f5a-2b10-bcaf-858fdf0004ce

https://portal.wdf.sap.corp/irj/go/km/docs/guid/c0379eff-2f5a-2b10-bcaf-858fdf0004ce

http://www.section508.gov/

http://www.w3.org/TR/WCAG20/

http://www.w3.org/TR/WCAG20/

CRM UI Guidelines V1.7

Documents

Transcript of CRM UI Guidelines V1.7