SAP Screen Personas style guide for Fiori Feb 2015

INTERNAL USE ONLY

2015-02-06

SAP Screen Personas Style Guide

Content

1 How to use this document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.1 Screen Size Optimization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.2 Fiori Color Palette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 GENERAL UI CONCEPTS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.1 Simplicity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.2 Consistency. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3 Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

Backstepping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Exit to Homescreen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10Scrolling & Page Fold. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.4 Text & typography. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.5 Images & Iconography. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.6 Meta-functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Help functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Search & Filter functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 PAGE LAYOUTS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.1 LaunchPad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

LaunchPad - Background. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16LaunchPad - Header. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16LaunchPad - Tile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21LaunchPad - Tile Grouping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Launchpad - Footer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.2 BasicPage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30BasicPage - Background. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34BasicPage - Header. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36BasicPage - Footer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3.3 PopupPage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

4 CONTAINERS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554.1 CollapsibleContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

CollapsibleContainer - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .574.2 FioriPanel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

FioriPanel - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61FioriPanel - in TabControl container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

2I N T E R N A L U S E O N L Y© 2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP Screen Personas Style GuideContent

4.3 GroupBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

4.4 ScrollableContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

4.5 SplitterContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69

4.6 StretchableContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

4.7 TabControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

TabControl - Default Value. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

TabControl - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72

TabControl - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

TabControl - inside a CollapsibleContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

5 CONTENT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.1 Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Form - Default Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Form - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Form (with FioriPanel). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Form - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Form - in TabControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

5.2 SystemMessage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

SystemMessage - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

5.3 Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Table - default values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Table - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98

Table - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Table - inside a TabControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

6 CONTROLS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1106.1 Button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110

LaunchButton & ScriptButton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110

6.2 Checkbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Checkbox list (with FioriPanel) - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

6.3 Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Clickable Icons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

6.4 Label. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Label - Default Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113

Label vs TextBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

6.5 OkCodeBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

6.6 StatusBar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

6.7 TextBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

TextBox - Default Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

6.8 Text Editors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

6.9 Toolbar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117


I N T E R N A L U S E O N L Y© 2015 SAP SE or an SAP affiliate company. All rights reserved. 3

6.10 UserArea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117



1 How to use this document

The purpose of this document is to provide guidance for consistent visual design of SAP Screen Personas flavors. It's assumed that the reader has already received adequate training with the tool & understands the basic concepts involved in using SAP Screen Personas to improve the visual appearance of the SAP GUI.

All the non-default values needed for reproducing the desired visual effects are described in tables, using the exact order & terminology that appears in the SAP Screen Personas tool. Most of the required mathematical calculations are already done. The consultant who is implementing the flavors only needs to compare each onscreen UI element with the layout descriptions in this document and type in the non-default values exactly as they are written.

The standard workflow for improving a transaction using this document...

1. Read the GENERAL UI CONCEPTS section before attempting to create any new flavors or edit any of the existing screens.

2. For each transaction / flavor: interview the end-users to develop a detailed understanding of how they use the transaction in their daily work.

3. For each SAP GUI screen: hide any fields, buttons, labels, etc that users have identified as unnecessary or unused.

4. Compare the remaining UI elements on screen with the layout diagrams & example screens to find the closest possible match.

5. Start with the PAGE LAYOUTS section... select the overall page layout that is the best match and use the instructions to recreate the overall page layout.

6. Next, focus on re-locating and re-sizing the large containers using instructions in the CONTAINERS section to create a sturdy framework for organizing the page content.

7. Align and optimize the remaining content on screen by following instructions in the CONTENT section.8. The CONTROLS section provides some detailed recommendations for different types of UI controls and may

help in resolving smaller details of the screen design.

SAP Screen Personas Style GuideHow to use this document


1.1 Screen Size Optimization

The layouts described in this document have been created with a minimum screen resolution of 1280px (width) x 800px (height), also known as WXGA.

The ACTUAL usable screen space for displaying content in a Screen Personas flavor at this resolution is roughly...

● Personas 2.0 = 1200px x 550px● Personas 3.0 = 1248px x 624px (1500pt x 195pt)

This is because a portion of the total screen space is taken up by the web browser that SAP Screen Personas is being displayed inside of (for example, Internet Explorer or Safari). Results will vary depending on the user's web browser and its configuration of toolbars and add-ons.

Notice that for some users with larger display screens, there will be some additional empty space on the right side or bottom of the screen. However, by keeping the content of the flavors inside this smaller "display-safe" area (whenever possible or practical), we can ensure that even the users with smaller screens will not experience any excessive need for extra scrolling. All layouts in this document are designed to easily fit within the "display-safe" area.

Most of the layouts can be made taller than the max height of the "display-safe" area, if necessary - for example, if the original SAP GUI page has an unusually large amount of content. But this should be avoided whenever possible, because users with smaller monitors will need to scroll down to view off-screen content at the bottom of the long page.

The layouts should NEVER be made wider than the max width of the "display-safe" area, because this would add an additional horizontal scroll bar when viewed on smaller screens, making navigation much more difficult for users.

1.2 Fiori Color Palette

An overview of the standard color palette for the SAP Fiori visual style.

The recommended primary colors leverages the uniqueness of SAP Fiori applications. The standard theme colors are chosen to work with the SAP semantic color palettes.

Figure 1: Fiori Color Balance



Table 1: Primary Colors - Fiori

Sample Name RGB Hex

Brand blue 0, 157, 224 #009DE0

Highlight blue 0, 124, 192 #007CC0

Deep gray 54, 62, 67 #363E43

White 255, 255, 255 #FFFFFF

Light gray 242, 242, 242 #F2F2F2

Medium gray 229, 229, 229 #E5E5E5

Greyscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. The darker grays are mainly used for texts.

Table 2: Grayscale - Fiori

Sample RGB Hex

255, 255, 255 #FFFFFF

247, 247, 247 #F7F7F7

242, 242, 242 #F2F2F2

229, 229, 229 #E5E5E5

204, 204, 204 #CCCCCC

191, 191, 191 #BFBFBF

153, 153, 153 #999999



Sample RGB Hex

102, 102, 102 #666666

51, 51, 51 #333333

0, 0, 0 #000000

Accent colors can be used to distinguish or decorate elements. They are a vivid contribution to the overall UI and should be used sparingly.

Table 3: Accent Colors - Fiori

Sample RGB Hex

240, 171, 0 #F0AB00

242, 112, 32 #F27020

171, 33, 142 #AB218E

0, 73, 144 #004990



2 GENERAL UI CONCEPTS

In this section of the style guide, you will find guidelines relating to some veral general UI concepts.

Although this style guide contains some very specific instructions about standard page layouts and the correct size and placement of different types of content, there is still a great deal of flexibility and "artistic interpretation" left to the designer of the individual flavors. Try to keep these general guidelines in mind when making decisions related to each concept in the following chapters.

2.1 Simplicity

Keep it simple!

● Help the user to focus on what is most important.● Make essential functions obvious and easy to use, while removing functions that are irrelevant to the current

user activity.● Rarely used functions or less-important functions that are not directly related to the current user activity

should be consolidated and hidden behind menus or options list, rather than overloading the user by giving too many choices at once.

● Give relevant feedback along the way, but eliminate irrelevant information that competes for the user's attention.

● Be efficient with the UI elements that are displayed on screen.● Avoid needless repetition or re-stating obvious information that the user already knows.

2.2 Consistency

Be consistent!

● Things that look similar should have similar functions. Buttons with similar icons or labels should have similar functions. Text fields with similar icons or labels should have similar content.

● Be aware of patterns and realize that users will evaluate new screens they encounter based on what they already have learned from previous screens.

● Inconsistency causes confusion, because the system doesn't react in the way the end user would expect it to react.

● A natural sequence of events should occur from top to bottom and from left to right. Most important information should be at top of screen. Additional information or task steps should be presented to the user in a logical sequence.

SAP Screen Personas Style GuideGENERAL UI CONCEPTS


2.3 Navigation

Keep navigation simple and logical!

Maintain a task-oriented and user-centered navigation principle that relates to the real-life sequence of events the user must perform in order to accomplish the desired task.

The UI navigation is the method by which the user moves forward and backward in a task sequence. It's imporant for usability that the navigation principles relate to the end user's perception of the task, rather than the underlying UI architecture or technology behind the system.

As a general rule, the main navigation (ie, actions that move forward and back in the normal task sequence) should be placed in the Header bar. Additional navigation that are NOT part of the main task flow (ie, optional steps, settings, shortcuts to other task sequences or additional features) should all be

2.3.1 Backstepping

Backstepping is the act of going backwards in a user scenario, rather than continuing forward towards the intended goal or outcome of the user scenario. Usually, this is done by using an option for Back, Cancel or Exit.

Standard SAP GUI transactions typically have separate buttons for Back, Cancel and Exit on EVERY page. Frequently at least two of these buttons (and sometimes all three) will lead to exactly the same page or have the same end result, even though the logic behind each of them (or, the hidden explanation) is very different.

Guideline: Always strive to eliminate duplicate buttons that lead to the same page or have the same end result.

Design rationale: If the buttons for Back, Cancel and Exit all lead to the same page (ie, have the same end result) then there is NO reason to have all of them... they are duplicates that clutter and confuse the UI.

Tip: The Exit button typically serves the same function as the Home button (in the page header), while the Back & Cancel buttons in SAP GUI frequently have end results that are identical to each other.

2.3.2 Exit to Homescreen

Guideline: It should be possible to exit to Homescreen and cancel the ongoing action from any screen within a flavor.

In the Fiori visual style, this is accomplished with a "Home" button in the top-left corner of every screen (in the page Header element).

Design rationale: The user should never be in a situation where they don't have an "easy way out" or "panic button" to cancel the ongoing process without saving and return to a "safe" and familiar starting point. The user should always be able to find this "panic button" in the same location on every screen.



2.3.3 Scrolling & Page Fold

Guideline: All types of scrolling should be minimized or eliminated if at all possible.

Guideline: If vertical scrolling beomces necessary, it is better to rely on the internet browser's scrolling mechanism (ie, global scroll bar), rather than allowing user to scroll independently in different containers with separate scroll bars.

Design rationale: One global scroll bar (for the entire page, included as part of the web browser) is simpler to control and easier for user to understand than having multiple separate scroll bars (for the individual containers).

Tip: In the current version of Screen Personas, hidden content that is placed outside of the currently displayed screen area will also cause scrollbars to appear. When you hide unwanted content, keep it inside of the main 1200x550 minimum display area.

2.4 Text & typography

Use clear and simple language to communicate information to the user.

Guideline: The default font for all texts is Arial. Usage of other fonts should be avoided, in order to maintain a consistent user experience with maximum readability.

Guideline: All texts that appear on screen are displayed in "Normal" style. In other words, the italic and bold options for text are typically not used in Fiori styled flavors.

Guideline: In general, important texts or user input are always displayed in black or very dark gray color. Less important text is shown in a more neutral gray color. This ensures that the most important information on the screen has the highest contrast and seems to stand out in foreground, while less important text has lower contrast and seems to fade into the background.

Table 4: Default values for text...

Usage Font size Font color Alignment

Launchpad section titles 24pt (SL)

20pt (HTML)

White Left

Launchpad Tile - titles 16pt (SL)

14pt (HTML)

Very dark gray (#333333) Left

Launchpad Tile - subtext 14pt (SL)

12pt (HTML)

Dark grey (#666666) Right

Page titles 16pt Dark grey (#666666) Center

PopupPage titles not editable White Left

Footer buttons

(except Menu button)

14pt White Center



Usage Font size Font color Alignment

PopupPage Footer buttons 13pt (SL)

12pt (HTML)

White Center

CollapsibleContainer titles 14pt (SL)

13pt (HTML)

Dark grey (#666666) Left

FioriPanel titles 16pt Dark grey (#666666) Left

Tab labels not editable Dark grey (#666666) Center

Form - section titles 14pt (SL)

16pt (HTML)

Dark grey (#666666) Left

Form - field labels 14pt Dark grey (#666666) Right

Form - input fields 12pt Black Left

Form - value descriptions

(read-only texts)

12pt Black Left

System message texts 14pt Black Left

Table titles 14pt Dark grey (#666666) Left

2.5 Images & Iconography

Use clear and simple iconography to communicate information to the user.

Icons used in Fiori styled flavors should be based on the SAP UI5 Icon Font. These icons are simple, highly stylized and monocolor.

Guideline: Use easily recognizable, generic icons when possible (for example, a simple plus sign for "Add New", rather than trying to find / create a unique icon for "Add new customer to personal contact list").

Guideline: Avoid using the same icon for multiple buttons in the same toolbar or same button grouping.

Design rationale: Icons for buttons are always 2px smaller (both vertically and horizontally) than the buttons they're placed in. This is because Screen Personas reserves a 1px border around the edge of the button surface, in which content can not be placed. If the icon were identical size as the button, the icon would have to be resized to fit the smaller display area and would appear blurry. If you ever encounter an icon inside a button that appears blurry, it's probably because the icon has been rescaled and is not being shown at original size!

Table 5: Default values for icons...

Usage Size Color

Launchpad tiles 48x48 px Blue (#007cc0)

Buttons in Header

(36x36 buttons)

34x34 px Dark gray (#666666)



Usage Size Color

Buttons in Footer

("Settings" is the only icon allowed in Footer. All other buttons are text-only)

38x38 px White (#000000)

Buttons in ContentArea

(24x24 buttons)

22x22 px Very dark gray (#4d4d4d)

System message icons can't be edited can't be edited

2.6 Meta-functions

[??? missing introduction ???]

[??? missing explanation ???]

2.6.1 Help functions

Help functions provide 1) additional information, 2) about a relevant topic, 3) for novice users.

Guideline: The global Help button (Application Help) is located consistently in the Header bar at top right corner of the page. Refer to the chapter "BasicPage - Header".

Guideline: Other, more specific help functions (Hint, or ValueHelp) should be placed as close as possible to the content or grouping that the function is most closely related to. The button should appear either immediately above or to the right side of the content.

Guideline: Avoid using jargon or technical terminology in Help texts. Help texts should be written in terms that a novice user can easily understand.

Guideline: Help buttons should be hidden, if they do not offer any useful information in the current situation. Avoid providing "Help" buttons to users that only go to empty pages or generic text that doesn't relate to the current situation.

Guideline: The tooltip for a button should be hidden, if it only repeats the text which already appears on the button. In this case, the tooltip does not add any new information. So, there is no point in having the tooltip text pop up. It only adds complexity to the screen.

Guideline: The tooltip for an input field should be hidden, if it only repeats the text of the label for the input field. In this case, the tooltip does not add any new information. So, there is no point in having the tooltip text pop up. It only adds complexity to the screen.



2.6.2 Search & Filter functions





3 PAGE LAYOUTS

In this section, you will find detailed instructions about how to organize the overall structure of a screen.

3.1 LaunchPad

The LaunchPad is the first page the user sees when opening SAP GUI using Screen Personas. In the LaunchPad the user can find links to freqently used transactions displayed as a grid of clickable tiles.

The LaunchPad is built on the SMEN transaction from the SAP GUI backend. It uses the same Background and Footer elements as the BasicPage layout, but has a unique Header element that sets it apart from other pages.

Figure 2: Example of a typical LaunchPad

Typical first steps...

1. Hide all existing content in the UserArea.

○ The exact number of containers and amount of content depends on how the default start page for each user profile or role.

○ Begin with the largest possible container, before moving on to smaller containers or content. This helps to avoid unnecessary work.

SAP Screen Personas Style GuidePAGE LAYOUTS


○ Make sure that you have also hidden all empty containers. The empty containers are not visible for end users in run-time mode, but can cause extra work when you begin to add new content of the UserArea.

2. Move the following controls from the default Toolbar onto the main UserArea, for reuse in the new LaunchPad...

○ "Execute" button○ Transaction code input field (=OKCodeField)○ "Log off" button○ "Help" button

3. Hide the default Toolbars and Titlebar.

○ The default Toolbar does not contain any functions that are typically used by end users in a Fiori styled LaunchPad.

○ The remaining functions in the default Toolbar will be accessible from the Menu button in the new LaunchPad.

3.1.1 LaunchPad - Background

How to define the background image for the LaunchPad layout...

Table 6:

CONTROL PROPERTY VALUE

Screen background (pattern)

ControlType UserArea

Background image Fiori_Gradient.png

Mode (SL) Stretch

Stretch (HTML) Stretch

Position (SL) Center / Center

Alignment (HTML) Center / Center

3.1.2 LaunchPad - Header

How to create the PageHeader element for the LaunchPad layout...

Figure 3: Screenshot of a PageHeader in the Fiori visual style



Figure 4: Silverlight version

Figure 5: HTML version

NoteThe SAP logo used in the Fiori style flavors is actually part of the background image for the Header element and does NOT need to be imported as a separate image file.

Table 7:


Background Control type Insert a new...

Image

Image file Fiori_LaunchPad_Hdr_1200x48.png

Mode (SL) None




Top 0px (SL)

0pt (HTML)

Left 0px (SL)

0pt (HTML)

Width NaN (SL)

1500pt (HTML)




Height NaN (SL)

15pt (HTML)

HorizontAlignment (SL)

Center

VerticalAlignment (SL) Center

Zindex (SL) -10

Notethis ensures that this control appears BEHIND all other content

Send backward (HTML)

Send to back

"Log off" button Control type Edit the existing button...

ses[0]/wnd[0]/tbar[0]/btn[15]

Add icon Fiori_34x34_gray_Log.png

Icon background Transparent

Top 6px (SL)

2pt (HTML)

Left 4px (SL)

5pt (HTML)

Width 36px (SL)

45pt (HTML)

Height 36px (SL)

12pt (HTML)

BackColor (SL) Transparent

Fill color (HTML) No color

BorderColor (SL) Transparent

Border style (HTML) No border

Tooltip Log out

Help button Control type Edit the existing...

Button


Add icon Fiori_34x34_gray_QuestionMark.png





Top 6px (SL)

2pt (HTML)

Left 1160px (SL)

1450pt (HTML)

Width 36px (SL)

45pt (HTML)

Height 36px (SL)

12pt (HTML)





Tooltip Help

Additional buttons

(if needed)

Left Silverlight version...

1. 1116px2. 1072px3. 1028px

HTML version...

1. 1395pt2. 1340pt3. 1285pt

Additional dividers

(between buttons, if needed)

Control type Image

Image file Fiori_Divider_Header_8x48.png

Mode (SL) none

Stretch (HTML) none



Top 0px (SL)

0pt (HTML)





1. 1152px2. 1108px3. 1020px

HTML version...

1. 1440pt2. 1385pt3. 1330pt

Width NaN (SL)

10pt (HTML)

Height NaN (SL)

15pt (HTML)


Center

Stretch (SL) None


Transaction code prompt

Control type OkCodeBox

ses[0]/wnd[0]/tbar[0]/okcd

Top 12px (SL)

4pt (HTML)

Left 540px (SL)

675pt (HTML)

Width 96px (SL)

120pt (HTML)

Height 24px (SL)

8pt (HTML)

FontSize 12pt

Tooltip Enter a valid transaction code

Enter button Control type Button


Add icon Fiori_22x22_gray_Accept.png





Top 12px (SL)

4pt (HTML)

Left 636px (SL)

795pt (HTML)

Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt (HTML)





3.1.3 LaunchPad - Tile

How to create the clickable bookmark tiles for the ContentArea of the LaunchPad layout...





NoteThe Launchpad Tile is basically a group of related controls grouped together inside of a ScrollableContainer. A single large ScriptButton is used as the background. This ScriptButton is used to execute the link to the desired transaction. The ScrollableContainer is created automatically when at least two controls are grouped together (for example, the ScriptButton and the Label for the title of the Tile).

The controls listed in the following table are to be placed directly on the UserArea. Top and Left coordinates are given in relation to the UserArea of the whole page.

Table 8: Creating the Tile container


Background Control type ScriptButton

Notethe script assigned to this button should link to the desired transaction




Alignment (SL) Text only

Assign image (HTML) No icon

Label .

NoteIt's currently not possible to create a ScriptButton without text or icon, so you MUST add a period ( . ) as text for the button.

Top 0px (SL)

0pt (HTML)

Left 0px (SL)

0pt (HTML)

Width Silverlight version...

● 184px (default)● 376px

HTML version...

● 230pt (default)● 470pt

Height Silverlight version...

● 176px (default)● 360px

HTML version...

● 56pt (default)● 113pt

ForeColor (SL) transparent

NoteThis ensures that the mandatory text title of the button (centered in the tile) will not be visible to users.

Font color (HTML) No color

NoteThis ensures that the mandatory text title of the button (centered in the tile) will not be visible to users.

BackColor (SL) White

Fill color (HTML) White





Border style No border

CornerRadius 4px (SL)

5pt (HTML)

Tooltip Only if needed - otherwise blank

NoteThere should only be maximum one tooltip per tile and this should only be attached to the ScriptButton element of the FioriTile. Avoid having Tooltips for other elements in a FioriTile.

ZIndex (SL) -5

NoteThis ensures that the clickable button remains BEHIND any text or icons that might be placed on top of it.


Send to back

Title Control type Label

Font Arial

Size 16pt (SL)

14pt (HTML)

Style None

Alignment Left

Wrap text Yes

Top 8px (SL)

3pt (HTML)

Left 8px (SL)

10pt (HTML)

Width 166px (SL)

210pt (HTML)

Height (SL) 40px (SL)

13pt (HTML)

ForeColor (SL) #FF333333

Font Color (HTML) #333333




FontFamily (SL) Arial

FontStyle (SL) Normal

FontWeight (SL) Normal

TextAlignment (SL) Left

TextDecorations (SL) None

Creating the Tile container

Control type (SL) ScrollableContainer

NoteTo create the ScrollableContainer, select all the controls created in the previous steps and press the "Group selected controls" button from the Screen Personas toolbar (or, use the keyboard shortcut = Ctrl+Alt+G)

Group objects (HTML) To group the elements of the Tile together as a single object, select all the controls created in the previous steps and press the "Group objects" button from the Screen Personas toolbar.

The controls listed in the following table are to be placed inside the ScrollableContainer (the Tile) created in the previous steps. Top and Left coordinates are given in relation to the Tile container.

Table 9: Adding additional details to the Tile


Icon

(optional)

Control type Image

Mode (SL) None




Top 102px (SL)

30pt (HTML)

Left 8px (SL)

10pt (HTML)

Width NaN

Height NaN

HorizontalAlignment (SL)

Center

Stretch (SL) None


Subtext

(optional)

Control type Label

Font Arial




Size 14pt (SL)

12pt (HTML)

Style None

Alignment Right

Text In most cases, this should be the transaction code for the screen the user arrives at after the script has been executed (ie, the destination screen)

Top 144px (SL)

45pt (HTML)

Left 8px (SL)

10pt (HTML)

Width 166px (SL)

210pt (HTML)

Height (SL) 20px


Font Color (HTML) #666666

FontFamily Arial

FontSize 14pt (SL)

12pt (HTML)

FontStyle (SL) Normal


TextAlignment (SL) Right

TextDecorations (SL) None

3.1.4 LaunchPad - Tile Grouping

How to group FioriTiles together in the ContentArea of the LaunchPad layout...

[??? missing diagram ???]

Figure 8: LaunchPad with no section titles

[??? missing diagram ???]

Figure 9: LaunchPad with section titles




Note(SL) Maintain 8px gap between Tiles on all sides.

Note(HTML) Maintain 10pt gap between Tiles on all sides.

NoteIn order to avoid vertical scrolling on smaller display hardware, you should avoid having more than approximately 3 rows of tiles in LaunchPad. After the 3rd row of tiles, the users will need to scroll down to find the Menu button in the Footer element when using smaller displays.

Table 10:


Container Control type UserArea

Section titles (optional) Control type Label

Font Arial

Size 24pt (SL)

20pt (HTML)

Style none

Alignment (SL) Left

Top First section title, at top of screen...

64px (SL)

20pt (HTML)

Left 32px (SL)

40pt (HTML)

Width 800px (SL)

1000pt (HTML)

Height (SL) 32px

ForeColor (SL) White

Font color (HTML) White

Tiles Control type (SL) ScrollableContainer

Control type (HTML) Group (Personas)

Refer to chapter "LaunchPad - Tile"




Top

-No section titles

Silverlight version...

● 1st row: 80px● 2nd row: 264px● 3rd row: 448px● 4th row: 632px● 5th row: 816px

HTML version...

● 1st row: 25pt● 2nd row: 83pt● 3rd row: 140pt● 4th row: 198pt

Top

-After 1st section title


● 1st row: 96px● 2nd row: 280px● 3rd row: 464px● 4th row: 648px● 5th row: 832px

HTML version...

● 1st row: 30pt● 2nd row: 88pt● 3rd row: 145pt● 4th row: 203pt

Top

-After 2nd section title


● 2nd row: 320px● 3rd row: 504px● 4th row: 688px● 5th row: 872px

HTML version...

● 2nd row: 100pt● 3rd row: 158pt● 4th row: 215pt● 5th row: 273pt

Top

-After 3rd section title


● 3rd row: 544px● 4th row: 728px● 5th row: 912px

HTML version...

● 3rd row: 170pt● 4th row: 228pt● 5th row: 285pt




Top

-After 4th section title


● 4th row: 768px● 5th row: 952px

HTML version...

● 4th row: 240pt● 5th row: 298pt


● 1st column: 32px● 2nd column: 224px● 3rd column: 416px● 4th column: 608px● 5th column: 800px● 6th column: 992px

HTML version...

● 1st column: 40pt● 2nd column: 280pt● 3rd column: 520pt● 4th column: 760pt● 5th column: 1000pt● 6th column: 1240pt

3.1.5 Launchpad - Footer

Refer to section "BasicPage - Footer"

The Footer element for Launchpad layout is identical to the Footer element for the BasicPage layout.

3.2 BasicPage

The BasicPage is the common layout that most normal transaction pages are built on. It is essentially the empty canvas or template that all full-screen flavors are built on.

Guideline: The minimum total height of a page is 512px / 160pt. This ensures that most standard screens, which do not contain a large amount of content will all be uniform in both width and height.



Figure 10: BasicPage layout in Fiori visual style

3.2.1 BasicPage layout

Layout for BasicPage with one main ContentArea is shown below. In this version of the layout, all content or containers (fx, GroupBoxes, Tables, TabControl, forms, etc) are "full-width" & are stacked on top of each other (in the single ContentArea) down the length of the page...



Figure 11: Silverlight version...



Figure 12: HTML version...

Layout for BasicPage with two ContentAreas (split into left & right sides) is shown below. In this version of the layout, all content or containers (fx, GroupBoxes, tables, tabs, Forms, etc) are "half screen width" & are stacked on top of each other (in either the left or right ContentArea) down the length of the page...







NoteThe ContentArea borders represent the MAXIMUM area in which content or containers MIGHT be placed on the screen. They are intended to be used only as guidelines, not as fixed coordinates. Different types of containers and content might need to be offset from these borders, for various reasons. Refer to relevant chapters to determine the EXACT placement and size of the various types of content and containers.

3.2.2 BasicPage - Background

How to define the background image for the BasicPage layout...

Guideline: The gradient pattern (background image) is intended to fill the entire UserArea, regardless of the size of the current page or the screen the page is being displayed on.

Guideline: The transparency effect is intended to fill the entire area between the Header and Footer, thereby improving readability of any content placed on top of it. It must always extend from the bottom edge of the Header to the top edge of the Footer. It has a fixed width identical to the width of the Header and Footer. However, its height will vary depending on amount of content on the page (ie, height of current page).



Table 11:


Background image ControlType UserArea

Background image Fiori_Gradient.png

Mode (SL) Stretch




Transparency effect ControlType TextBox

Top 48px (SL)

15pt (HTML)

Left 0px (SL)

0pt (HTML)

Width 1200px (SL)

1500pt (HTML)

Height Variable, as needed...

minimum: 472px (SL)

minimum: 148pt (HTML)

BackColor (SL) #99FFFFFF (=60% white)

Fill color (HTML) White - 60% transparency

BorderColor (SL) #99FFFFFF (=60% white)


IsReadOnly True

Zindex (SL) -10



Send to back



3.2.3 BasicPage - Header

The Header element of the BasicPage layout is the bar across the top of the screen. It is used to display the page title and the main navigation buttons.

Figure 15: Screenshot of a PageHeader in the Fiori visual style



Table 12:


Background Control type Image

Image file Fiori_BasicPage_Hdr_1200x48.png

Mode (SL) None




Top 0px (SL)

0pt (HTML)

Left 0px (SL)

0pt (HTML)

Width NaN (SL)

1500pt (HTML)




Height NaN (SL)

15pt (HTML)


Center

Stretch (SL) None


Zindex (SL) -10



Send to back

"Home" button Control type Launch button

NoteThe "Home" button is available from most screens other than Launchpad and popup windows. It always appears in the 1st button position of the LEFT button group (ie, closest to the left side of screen).

Add icon Fiori_34x34_gray_Home.png

Transaction /n

NoteThis command terminates the current transaction (ie, closes the currently viewed page without saving changes) and returns to the HomePage.

Tooltip Home

"Back" button Control type Button (inherited from SAP GUI)

Whenever possible re-use the original Back button from the SAP GUI. Alternatively, the Cancel button can be used.

NoteThe "Back" button is only used when the previous screen (the screen the user wants to go "Back" to) is NOT the Launchpad screen. If a "Back" button would have identical end result as the "Home" button, then the "Back" button will not be visible to the end user. When used, it always appears in the 2nd button position of the LEFT button group (ie, immediately to the right of the "Home" button).

Add icon Fiori_34x34_gray_Back.png

Tooltip Back




"Help" button Control type Button (inherited from SAP GUI)

NoteThe "Help" button is only used when contextual help is available. If pressing the button would only result in a "No Help text available" message, then the button will NOT be visible to end user. When used, it always appears in the 1st button position of the RIGHT button group (ie, closest to the right side of screen).

Add icon Fiori_34x34_gray_QuestionMark.png

Tooltip Help

Navigation buttons Control type Button

Alignment Icon only

Top 6px (SL)

2pt (HTML)

Left (for left grouping) Silverlight version...

● 1st button: 4px● 2nd button: 48px● 3rd button: 92px● 4th button: 136px

HTML version...

● 1st button: 5pt● 2nd button: 60pt● 3rd button: 115pt● 4th button: 170pt

Left (for right grouping) Silverlight version

● 1st button: 1160px● 2nd button: 1116px● 3rd button: 1072px● 4th button: 1028px

HTML version...

● 1st button: 1450pt● 2nd button: 1395pt● 3rd button: 1340pt● 4th button: 1285pt

Width 36px (SL)

45pt (HTML)

Height 36px (SL)

12pt (HTML)

ForeColor (SL) NaN




Font color (HTML) No color





Dividers Control type Image

Image file Fiori_Divider_Header_8x48.png

Mode (SL) none




Top 0px (SL)

0pt (HTML)

Left (left grouping) Silverlight version...

1. 40px2. 88px3. 128px

HTML version...

1. 50pt2. 105pt3. 160pt

Left (right grouping) Silverlight version

1. 1152px2. 1108px3. 1064px

HTML version...

1. 1440pt2. 1385pt3. 1330pt

Width NaN (SL)

10pt (HTML)

Height NaN (SL)

15pt (HTML)

Stretch (SL) None


Center





Page title Control type Label

Font Arial

Size 16pt

Style Normal

Alignment Center

Text ● Default: "Page title"● On page launch: copy the SAP GUI page title from ses[0]/wnd[0]/title

Left 176px (SL)

220pt (HTML)

Top 14px (SL)

4pt (HTML)

Width 848px (SL)

1060pt (HTML)

Height (SL) 24px


Font color (HTML) #666666

FontSize (SL) 16pt


TextAlignment (SL) Center

3.2.4 BasicPage - Footer

The Footer element of the BasicPage layout is a container for grouping the most important action buttons together. It always appears at the bottom of the page, just below the ContentArea.





It's impossible to relocate the existing Toolbars from the SAP GUI. So the Footer background must be created from an imported Image control placed directly on the UserArea.

The original Toolbars from SAP GUI are to be hidden. Any buttons from the Toolbars that are needed in the final design should be moved to bottom of screen before hiding the original Toolbars.

The controls listed in the following table are to be placed directly on the UserArea. Top and Left coordinates are given in relation to the UserArea.

Table 13:


Background Control type Image

Image file Fiori_Footer_1200x40.png

Mode (SL) None


Position Center / Center

ZIndex -10



Send to back

Top Silverlight version...

● Minimum: 520px● Otherwise, 40px below bottom edge of the last content on the page

HTML version...

● Minimum: 163pt● Otherwise, 12pt below bottom edge of the last content on the page

Left 0px (SL)

0pt (HTML)

Width NaN (SL)

1500pt (HTML)




Height NaN (SL)

13pt (HTML)

VerticalAlignment Center

HorizontAlignment Center

"Menu" button Control type MainMenuButton (from SAP GUI global toolbar)

NoteThe "Menu" button appears only when there are valid menu options available. If no valid menu options are available for a screen, then the Menu button should be hidden.

Tooltip None

Top +2px below top edge of Footer background (created in previous step)

Left 1132px (SL)

1415pt (HTML)

Width 64px (SL)

80pt (HTML)

Height 30px (SL)

9pt (HTML)

ForeColor White

BackColor Transparent

BorderColor Transparent

Text Menu

FontSize Because the Menu button is defined as a unique button type in the SAPGUI, it is currently not possible to change the font size. Therefore, the Menu button always appears with default font size (12pt), rather than the FontSize used by the rest of the buttons in the Footer.

IconId None

NoteThis removes the small triangle at the bottom right of the Menu button.

OnIconId None




Action buttons Control type Buttons (inherited from SAP GUI), ScriptButtons and LaunchButtons

NoteThe action buttons for the Footer bar should ONLY perform functions that apply to the whole screen. If any action applies to content of just one container on the screen (for example, a table), or only applies to one item out of many shown on the screen, then the button should be placed in the ContentArea (close to the content it affects), rather than in the Footer bar.

"Settings" button Control type Button (inherited from SAP GUI)

NoteThe "Settings" button appears only when there are useful settings available for the current transaction. If no useful settings are available, then the Settings button should be hidden. Whenever possible, re-use the appropriate button (for example, "Settings" or "Services for object") from the previously existing SAP GUI screen.

Tooltip Settings

Top +2px below top edge of Footer background (created in previous step)

Left 4px (SL)

5pt (HTML)

Creating the Footer container

Control type ScrollableContainer

NoteTo create the ScrollableContainer, select all of the controls that were just created and then press the "Group selected controls" button in the Screen Personas toolbar (or, use the keyboard shortcut = Ctrl+Alt+G)

The controls listed in the following table are to be placed inside the ScrollableContainer which was created in the previous steps. Top and Left coordinates are given in relation to the ScrollableContainer.

Table 14:


Action buttons Control type Button

Alignment Text only

Text a descriptive label for the button, preferrably with verb-noun format (maximum 14 letters long)

Top 2px (SL)

1pt (HTML)




Left Additional buttons are added as needed, starting from the right...

Silverlight version:

● 1st = 996px● 2nd = 860px● 3rd = 732px● 4th = 604px● 5th = 476px● 6th = 348px● 7th = 220px

HTML version:

● 1st = 1245pt● 2nd = 1075pt● 3rd = 915pt● 4th = 755pt● 5th = 595pt● 6th = 435pt● 7th = 275pt

Width 128px (SL)

160pt (HTML)

Height 30px (SL)

9pt (HTML)

ForeColor White


BorderColor Transparent

IconId (SL) none (text only)

FontSize 14pt

Dividers Control type Image

Image file Fiori_Divider_Footer_8x40.png

Mode (SL) None




ZIndex (SL) 100

Notethis ensures that this control appears IN FRONT OF all other content

Bring forward (HTML) Bring to front




Top 0px (SL)

0pt (HTML)

Left Dividers are added as needed, between buttons or groups of buttons...

Silverlight version:

● 1st = 988px● 2nd = 852px● 3rd = 716px● 4th = 580px● 5th = 444px● 6th = 308px● 7th = 172px

HTML version:

● 1st = 1235pt● 2nd = 1065pt● 3rd = 895pt● 4th = 725pt● 5th = 555pt● 6th = 385pt● 7th = 215pt

Width NaN (SL)

10pt (HTML)

Height NaN (SL)

13 pt (HTML)



Center

3.3 PopupPage

A PopupPage (or ModalWindow) is a page that does not fill the entire UserArea and opens directly on top of an already existing page. The previous page becomes dimmed in the pabkground, while the new page (the "pop up") appears to float above it.

In technical terms, a PopupPage is a ModalWindow control from the SAP GUI. It is currently impossible to create a new ModalWindow control in SAP Screen Personas. But, it is fully supported to edit already existing ModalWindows from the original SAP GUI.

It is impossible to directly assign the size or placement of a ModalWindow on the UserArea. The window is always centered inside the current UserArea borders and its height & width adjust automatically to fit the content. So,



changing the size, location or amount of content will automatically adjust the size of the ModalWindow. This is the only way to resize a ModalWindow.

Figure 20: SAPGUI System message

Figure 21: SAPGUI Transactional popup

3.3.1 PopupPage layout

How to define the layout for a PopupPage (ModalWindow control), in either the half-width or full-width variant.

Standard layout for a half-width PopupPage with only one ContentArea is shown below...







Standard layout for a full-width PopupPage with two ContentAreas...





Standard layout for a full-width PopupPage with only one ContentArea...





NoteThe ContentArea borders represent the MAXIMUM area in which content or containers MIGHT be placed on the screen. They are intended to be used only as guidelines, not as fixed coordinates. Different types of containers and content might need to be offset from these borders, for various reasons. Refer to relevant chapters to determine the EXACT placement and size of the various types of content and containers.



Table 15:


Container Control type ModalWindow

Left / Top It's impossible to assign a specific location for the ModalWindow to display. Instead, it will always be centered automatically in screen when launched.

Width / Height It's impossible to directly assign a fixed size for the ModalWindow. Instead, it expands or contracts automatically to fit the content being displayed.

NoteIn effect, the size of the ModalWindow control is defined by the size & placement of the Footer element which must be created in Screen Personas. The Footer appears at bottom of the page, stretching the ModalWindow out to the desired size.

ForeColor (SL)

(=page title color)

White

Font color (HTML)

(=page title color)

White

BackColor (SL)

(=content area color)

● System message: default● All other popups: Light blue = #FFA6D4DA

NoteThis color simulates the basic effect of a 60% transparent overlay on top of the FioriGradient in the BasicPage layout.

Fill color (HTML)

(=content area color)

● System message: default● All other popups: Light blue = #A6D4DA

NoteThis color simulates the basic effect of a 60% transparent overlay on top of the FioriGradient in the BasicPage layout.

BorderColor (SL)

(=title bar color)

Dark gray = #FF666666

Border style (HTML)

(=title bar color)

Dark gray = #666666

Background Control type UserArea


Fill color (HTML) No fill

Background image None

Footer Control type Image




Image file ● Fiori_Popup_HalfWidth.png● Fiori_Popup_FullWidth.png

Mode (SL) None



Position (HTML) Center / Center

Top variable, depending on amount of content

But, always 32px below bottom edge of ContentArea

Left 0px (SL)

0pt (HTML)


● Half-width: 584px● Full-width: 1168px

HTML version...

● Half-width: 730pt● Full-width: 1460pt

Height 32px (SL)

NoteYou should set Width & Height manually in the Properties panel (instead of leaving it default value, as you might for some other pre-sized images). There are some cases in which the ModalWindow doesn't resize properly if you leave the Width or Height value empty or "NaN".

10pt (HTML)

HorizontalAlignment (SL)

Center

Stretch (SL) None


ZIndex (SL) -10

NoteThis ensures that the Footer background always appears BEHIND any buttons, text or dividers that might be placed on top of it.


Send to back

Buttons Control type Button




Alignment (SL) Text only

Text If no text was provided already in SAP GUI, then make it the same as the Tooltip text.

Top Same value as Footer

Left (SL) Half-width...

● 1st button: 504px● 2nd button: 424px● 3rd button: 344px

Full-width...


Left (HTML) Half-width...

● 1st button: 630pt● 2nd button: 530pt● 3rd button: 430pt

Full-width...


Width 80px (SL)

100pt (HTML)

Height 30px (SL)

NoteThis is 2px shorter than the Height of the Footer background.

9pt (HTML)



BackColor (SL) transparent

Fill color (HTML) No fill

BorderColor (SL) transparent


FontSize 13pt (SL)

12pt (HTML)

Tooltip None, put the text on the button itself... avoid having Tooltips that simply repeat the already visible text label of the button.




Toolbar Control type Toolbar

Visibility Hidden (The previously-existing toolbar for the popup window should be hidden and any buttons that are still needed in the finished design should be placed directly on the UserArea)

NoteBefore hiding the Toolbar, remember to move any buttons you wish to reuse. Hiding the Toolbar should always be saved for last.



4 CONTAINERS

This section will define and explain the concept of Containers [??? missing introduction ???]


4.1 CollapsibleContainer

A CollapsibleContainer control, commonly known in internet chat forums as a "spoiler", is a type of container used to temporarily hide a large amount of content and thereby eliminate excessive clutter on an otherwise crowded screen.

Figure 28: CollapsibleContainer in the "collapsed" state (from CATSXT transaction)

SAP Screen Personas Style GuideCONTAINERS


Figure 29: CollapsibleContainer in the "expanded" state (from CATSXT transaction)

The CollapsibleContainer is actually a ScrollableContainer control from SAP GUI with some additional features added in the back-end to support collapsing and expanding the entire container along with its content. The collapse function is controlled by a single toggle button added in the top left corner of the container. When the user presses this button, the entire contents of the container become hidden. When the user presses again, the contents become visible again. The CollapsibleContainer will also frequently include a group title that is only visible when the container is in its collapsed state.

NoteWhen content is placed inside a CollapsibleContainer, the Top and Left coordinates for the content must be calculated relative to the upper left corner of the CollapsibleContainer, rather than upper left corner of the UserArea.

Guideline: DO NOT DELETE the large uppermost ScrollableContainer that contains both the toggle button and all the collapsible content controlled by the button ! In most cases, the collapse / expand functionality will still work, even if the top-level ScrollableContainer is deleted (thereby ungrouping the content), but it becomes very difficult to separate the potentially collapsible content from the rest of the content on screen. When in Editing Mode, this top-level container indicates all the content that will become hidden when the user presses teh Collapse button, thereby ensuring that the page is easy to edit / maintain.



4.1.1 CollapsibleContainer - on BasicPage layout

How to align a CollapsibleContainer to fit the BasicPage layout...

Table 16:


Container Control type ScrollableContainer (BUT, with some additional features added)


● Topmost container: 72px● Additional containers: +24px below bottom edge of previous content

HTML version...

● Topmost container: 25pt● Additional containers: +8pt below bottom edge of previous content

Left 16px (SL)

20pt (HTML)

Width 1168px (SL)

1460pt (HTML)

NoteUnlike GroupBoxes, CollapsibleContainers should ALWAYS be full-width and are NEVER half-width.

Height Silverlight version...

● Collapsed: 32px● Expanded: Variable, depending on amount of content (add 24px

empty space below bottom edge of content)

HTML version...

● Collapsed: 10pt● Expanded: Variable, depending on amount of content (add 8pt empty

space below bottom edge of content)

BorderColor Default (the color of the border also affects color of scroll bars, so BorderColor should NEVER be white or transparent)


Toggle button (collapse / expand)

Control type Button

Top 4px (SL)

1pt (HTML)

Left 4px (SL)

5pt (HTML)




Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt (HTML)

Add icon ● Fiori_22x22_gray_Expand● Fiori_22x22_gray_Collapse

Title Control type Label (if no other title or introductory navigation controls already exist in SAP GUI, add a text label that describes the contents of the whole CollapsibleContainer)

Font Arial

Size 14pt (SL)

13pt (HTML)

Style none

Alignment (SL) Left

Top 0px (SL)

0pt (HTML)

Left 28px (SL)

35pt (HTML)

Width 300px (SL)

375pt (HTML)

Height 24px (SL)

8pt (HTML)

Text If a Label is added to the expanded version, the text should be the same as for the Label of the collapsed version. In the SAP GUI, it's frequently the case that there's only a text label (title) existing for the collapsed state. Ideally, we want identical Labels for Both states.




Background color (HTML)

No color

Proportional font (SL) True

FontSize (SL) 14pt



4.2 FioriPanel

A FioriPanel is a custom-made ScrollableContainer with title text, translucent background and an area for context-specific buttons. The FioriPanel is used in Screen Personas projects as a replacement for the SAP GUI's GroupBox controls, in order to more closely match the look and feel of the Fiori UI style (HTML5 / UI5 controls).

NoteThe FioriPanel is basically a GroupBox (see separate section) placed directly on the UserArea. It will have a slightly different appearance from "normal" GroupBoxes.

Table 17: Default values for FioriPanels in all layouts



Font Arial

Size 16pt

Style Normal

Alignment Left



TextAlignment (SL) Left

Height 24px (SL)

8pt (HTML)

Background Control type TextBox

BackColor (SL) #99FFFFFF (white - 60% opacity)

Fill color (HTML) White - 60% opacity

BorderColor (SL) #99FFFFFF (white - 60% opacity)

Border style (HTML) White - 60% opacity




Height (SL) Depending on number of rows in the form...

● 1 row: 72px● 2 rows: 104px● 3 rows: 136px● 4 rows: 168px● 5 rows: 200px● 6 rows: 232px● 7 rows: 264px● 8 rows: 296px● 9rows: 328px● 10rows: 360px● 11rows: 392px● 12rows: 424px

Height (HTML) Depending on number of rows in the form...

● 1 row: 23pt● 2 rows: 33pt● 3 rows: 43pt● 4 rows: 53pt● 5 rows: 63pt● 6 rows: 73pt● 7 rows: 83pt● 8 rows: 93pt● 9rows: 103pt● 10rows: 113pt● 11rows: 123pt● 12rows: 133pt

IsReadOnly True

ZIndex (SL) -10

Notethis ensures that this control appears BEHIND all other content.

Send backwards (HTML)

Send to back

Creating the FioriPanel container





4.2.1 FioriPanel - on BasicPage layout




Table 18: Creating the FioriPanel container (SL)



Top (SL) ● Topmost container: 72px● Additional containers: 24px below previous content (in other words,

calculate the bottom edge of any previously existing content and then add 24px empty space)

Top (HTML) ● Topmost container: 23pt● Additional containers: 8pt below previous content (in other words, cal

culate the bottom edge of any previously existing content and then add 8pt empty space)





● Left ContentArea: 16px● Right ContentArea: 608px

HTML version...

● Left ContentArea: 20pt● Right ContentArea: 760pt



HTML version...



Top Top of Label control +24px (SL)

Top of Label control +8pt (HTML)

NoteThe top edge of the TextBox control is aligned with the bottom edge of the Label control.

Left Same value as the Label you just created

Width Same value as the Label you just created




The controls listed in the following table are to be placed inside the ScrollableContainer of a FioriPanel. Top and Left coordinates are given in relation to the ScrollableContainer of the FioriPanel and NOT relevant to the UserArea of the whole page.

Table 19: Adding buttons to the FioriPanel


Container Control type FioriPanel

Buttons Control type ● Button● ScriptButton● LaunchButton

Top 0px




Left

(half width) (SL)

● 1st button: 552px● 2nd button: 528px● 3rd button: 504px● 4th button: 480px● 5th button: 456px● 6th button: 432px● 7th button: 408px● 8th button: 384px● 9th button: 360px

Left

(half width) (HTML)

● 1st button: 690pt● 2nd button: 660pt● 3rd button: 630pt● 4th button: 600pt● 5th button: 570pt● 6th button: 540pt● 7th button: 510pt● 8th button: 480pt● 9th button: 450pt

Left

(full width) (SL)


Left

(full width) (SL)


Width 24px

Height 24px



4.2.2 FioriPanel - in TabControl container

How to place a FioriPanel inside of a TabControl container.




Table 20: Creating the FioriPanel container (SL)



Top (SL) ● Topmost FioriPanel: 0px● Additional containers: 24px below previous content (in other words,

calculate the bottom edge of any previously existing content and then add 24px empty space)

Top (HTML) ● Topmost FioriPanel: 0pt● Additional containers: 8pt below previous content (in other words, cal

culate the bottom edge of any previously existing content and then add 8pt empty space)






HTML version...




HTML version...



Top Top of Label control +24px (SL)

Top of Label control +8pt (HTML)

NoteThe top edge of the TextBox control is aligned with the bottom edge of the Label control.

Left Same value as the Label you just created

Width Same value as the Label you just created





Table 21: Adding buttons to the FioriPanel



Buttons Control type ● Button● ScriptButton● LaunchButton

Top 0px




Left

(half width) (SL)


Left

(half width) (HTML)


Left

(full width) (SL)


Left

(full width) (SL)


Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt (HTML)



4.3 GroupBox

A GroupBox is a specialized container used to group related UI controls together, under a title text that explains their purpose or describes the relationship between them.

Figure 34: Example of a GroupBox from the BasicView

The original SAP GUI GroupBox control has several limitations that make it very difficult to incorporate into the Fiori UI style.

● It is not possible to remove the blue line under the title.● It is not possible to change font size of the title.● It is not possible to remove the bold text effect from the title.● It is not possible to give the title a transparent background.● It is not possible to place buttons directly on top of the title bar (ie, top right corner of the group box, above

the blue line).

Because of these limitations, the original SAP GUI GroupBox control is not used in the Fiori style guide. Instead, refer to the chapter describing the FioriPanel container, which is preferred.



4.4 ScrollableContainer

A ScrollableContainer is a very simple (usually invisible) container for grouping related UI controls. If the contents of the container are too large to be displayed in the space provided by the container, then the container will allow the user to scroll to view the contents.

Figure 35: Example of a ScrollableContainer taken from the BasicView

In SAP Screen Personas, ScrollableContainers can be created or deleted using the Group / Ungroup buttons in the SAP Screen Personas toolbar.

TIP: The pre-existing ScrollableContainers from SAP GUI are almost never needed in SAP Screen Personas. Most of them should be deleted by selecting them and then pressing the Ungroup button in the SAP Screen Personas toolbar.

The one exception to this rule is a CollapsibleContainer. In CollapsibleContainers the uppermost (highest level) ScrollableContainer which includes both the content and the "collapse" button should never be deleted or hidden. Instead, it is used to create a white background for the entire container.



4.5 SplitterContainer

A SplitterContainer is a container used for grouping two or more StretchableContainers together with a moveable "sash" separating them from each other at a common border. The user is allowed to move the borders of the linked containers by dragging the sash... when one container is made larger, the other becomes smaller.

4.6 StretchableContainer

A StretchableContainer is a simple container used for displaying one or more UI controls that change their size under different circumstances. This type of container stretches automatically to accommodate the size of the content being displayed, without scrolling.

StretchableContainers are never visible to end users, because they do not have background color and no visible borders.



4.7 TabControl

A TabControl is a container with fixed height and width that is broken into separate "pages" or"tabs". The content of the various tabs can be navigated by the end-user simply clicking on the TabHeaders at the top of the TabControl.

Figure 36: SAPGUI TabControl container

GUIDELINE: TabControl should almost ALWAYS be full page width, although the half page width can be used if absolutely necessary.

GUIDELINE: When switching between tabs, the TabControl container should remain constant height... no changes in height when switching between tabs.

GUIDELINE: TabControls should NEVER be placed inside of FioriPanels or GroupBoxes. They are intended to be placed directly on the UserArea.



4.7.1 TabControl - Default Value

These values are the same for all TabControls, regardless of what type of layout they are used with.

Figure 37: Full-width TabControl in Fiori style

NoteA TabControl is always the same width, no matter what type of container or page layout it is placed in. This greatly simplifies the sizing and positioning of the content for TabControls.

Table 22:


Container Control type TabControl

BackColor (SL) #99FFFFFF (white - 60% opacity)

Fill color (HTML) White - 60% opacity

BorderColor (SL) #99FFFFFF (white - 60% opacity)

Border style (HTML) White - 60% opacity

Height Depending on the amount of content inside the container... refer to separate sections for various types of content.



HTML version...


Tab labels Control type TabItem

ForeColor (SL) #FF666666 (dark gray)

Font color (HTML) #666666 (dark gray)








Tab label texts Control type TabItemHeader

Text There should be a text label for every tab.

If no text was provided already in SAP GUI, then make it the same as the Tooltip text.

Content area Control type TabItemContent

Width Width of each TabItemContent (= page of content) needs to be set to the same value as width of the TabControl (= the overall container). This must be done separately in Edit Mode for each tab.





4.7.2 TabControl - on BasicPage layout

How to place a TabControl on the full-width or half-width BasicPage layout.



Table 23:




● At top of page: 72px● Underneath other content: 24px below bottom edge of previous con

tent / container

HTML version...

● At top of page: 23pt● Underneath other content: 8pt below bottom edge of previous con

tent / container



HTML version...


4.7.3 TabControl - on PopupPage layout

How to optimize a TabControl to fit inside the full-width PopupPage layout...



Table 24:





tent / container

HTML version...


tent / container

Left 0px (SL)

0pt (HTML)

4.7.4 TabControl - inside a CollapsibleContainer

How to optimize a TabControl inside a CollapsibleContainer

NoteThe CollapsibleContainer is actually NOT visible to the end user. To end users this appears to be a normal TabControl with a Collapse/Expand icon added just above the top left corner.

Table 25:








tent / container

HTML version...


tent / container

Left 8px (SL)

10pt (HTML)



5 CONTENT

This section will define and explain the concept of Content, when creating Fiori styled flavors.

Content consists of various controls that display or capture some important information to/from end users. These controls have to be grouped together in some logical way that gives meaning and context to them. Typically, the controls are grouped together using Containers which further illustrates how the controls are related to each other.

5.1 Form

A Form is a vertical list of related user input fields. The Form also contains all the labels & descriptive texts necessary to help users understand the purpose and correct function of the input fields.

Forms are frequently built inside a half-width GroupBox, but might also be put directly on the UserArea or inside other types of containers. The input fields are all related to the same topic, which is described in the GroupBox title.

Forms are used for capturing user input, either by creating a new record or by displaying a saved record for the user to edit.

By putting all the Form fields inside a GroupBox (rather than directly on the UserArea), the content will stand out visually from the colored background (because the GroupBox background is always white or translucent) and will be easier to maintain by the developer.

Forms can be half-width, with a single column of input fields in each GroupBox. This is the most common layout for forms, because it's the easiest for users to read.

Or, Forms can be full-width, with two separate columns of input fields in each GroupBox.

The full-width layout is usually only used if there is only one Form (for example, a Header section), which is immediately followed by a full-width Table or TabControl.

The full-width layout can also be used on rare occasions if there is only one Form which is very large (more than 12 rows) and could not have been easily broken up into smaller topics (=multiple GroupBoxes).


SAP Screen Personas Style GuideCONTENT

5.1.1 Form - Default Values

The following values are true for all Forms, regardless of what type of container the Form is placed inside of, or if the Form is placed directly on the BasicPage layout without any additional container.

NoteThe choice of container which the Form is placed inside of will affect the Top and Left property values for every control in the Form. However, ALL the other properties (Height, Width, Font size, Color, Alignment, etc) will be IDENTICAL for all Forms, regardless of their container.

Table 26:


Section titles

(optional)

Control type Label

Font Arial

Font size 14pt (SL)

16pt (HTML)

Style none

Alignment Left

Width 800px (SL)

1000pt (HTML)

Height (SL) 24px



Text labels Control type Label

Font Arial

Font size 14pt

Style Normal

Alignment Right

Width 188px (SL)

235pt (HTML)

Height (SL) 24px










ProporationalFont (SL) True

TextAlignment (SL) Right

User input fields Control type TextBox

Width (SL) Variable, depending on max length of input...

● 60px (minimum - 1/3 column width)● 92px (half column width)● 124px (2/3 column width)● 188px (default - full column width)● 380px (maximum - 2 columns wide)

Width (HTML) Variable, depending on max length of input...

● 75pt (minimum - 1/3 column width)● 115pt (half column width)● 155px (2/3 column width)● 235pt (default - full column width)● 475pt (maximum - 2 columns wide)

Height 24px (SL)

8pt (HTML)

Font size 12pt

ForeColor (SL) Black

Font color (HTML) Black

BackColor (SL) White

Fill color (HTML) White

BorderColor (SL) Light gray = #FFCCCCCC

Border style (HTML) Light gray = #CCCCCC

AlignmentRight (SL) False

ProportionalFont (SL) True

Value description texts (read-only)

Control type TextBox

Width (SL) Variable, depending on max length of text...

● 60px (minimum)● 188px (default)● 380px (maximum - on separate row by itself)

Width (HTML) Variable, depending on max length of text...

● 75pt (minimum)● 235pt (default)● 475pt (maximum - on separate row by itself)




Height 24px (SL)

8pt (HTML)

Font size 12pt







AlignmentRight (SL) False

ProportionalFont (SL) True

Buttons related to input fields

Control type Button

Alignment (SL) Icon only

Top The button should be displayed on the same row (same "Top" value) as any input fields that are affected by it

Left (SL) The button should be displayed on right side of any input fields affected by it, with an +8px gap between the button and the input field

(HTML) The button should be displayed on right side of any input fields affected by it, with an +10pt gap between the button and the input field

Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt (HTML)







5.1.2 Form - on BasicPage layout

How to optimize a Form to fit the BasicPage layout...

This version of the Form layout is typically used to separate the (mostly) read-only "Header data" for a complicated screen, or for screens that only have a few user input fields (ie, no need for separate groupings or panels).





The controls listed in the following table are to be placed directly on the UserArea of the BasicPage layout. Top and Left coordinates are given in relation to the UserArea (ie, without any container).

Table 27:



Section title (optional) Control type Label

Top (SL) ● 1st row: 72px● 2nd row: 104px● 3rd row: 136px● 4th row: 168px● 5th row: 200px● 6th row: 232px● 7th row: 264px● 8th row: 296px● 9th row: 328px● 10th row: 360px● 11th row: 392px● 12th row: 424px




Top (HTML) ● 1st row: 23pt● 2nd row: 33pt● 3rd row: 43pt● 4th row: 53pt● 5th row: 63pt● 6th row: 73pt● 7th row: 83pt● 8th row: 93pt● 9th row: 103pt● 10th row: 113pt● 11th row: 123pt● 12th row: 133pt



HTML version...



Top same as for Section Titles (see above)



HTML version...






HTML version...


NoteWhen more than one input field appears on the same row, maintain a 4px / 5pt gap between input fields.

Read-only status texts Control type TextBox







HTML version...


5.1.3 Form (with FioriPanel)

How to create a Form (inside a FioriPanel container) on the BasicPage or PopupPage layouts.






Table 28:



Section titles

(optional)

Control type Label






Left 4px (SL)

5pt (HTML)





HTML version...


Input fields Control type TextBox




HTML version...











HTML version...


5.1.4 Form - on PopupPage layout

How to optimize a Form to fit the PopupPage layout...





The controls listed in the following table are to be placed directly on the UserArea of the PopupPage layout. Top and Left coordinates are given in relation to the UserArea (ie, without any container).

Table 29:



Section title (optional) Control type Label








HTML version...






HTML version...






HTML version...



Read-only status texts Control type TextBox







HTML version...


5.1.5 Form - in TabControl

How to create a Form (with or without FioriPanel) inside a TabControl container.





The controls listed in the following table are to be placed inside a TabControl. Top and Left coordinates are given in relation to the TabControl container, rather than the UserArea of the whole page. Because TabControls have a consistent width, these coordinates can be used for TabControls on PopupPage layout, as well as on BasicPage layout.

Table 30:


Container Control type ● TabItemContent● FioriPanel

NoteThe measurements and coordinates will be exactly the same, regardless of whether the Form is created directly on top of the TabItemContent area or is placed inside of an optional FioriPanel.

Section titles

(optional)

Control type Label

Top (SL) ● 1st row: 0px● 2nd row: 32px● 3rd row: 64px● 4th row: 96px● 5th row: 128px● 6th row: 160px● 7th row: 192px● 8th row: 224px




Top (HTML) ● 1st row: 0pt● 2nd row: 40pt● 3rd row: 80pt● 4th row: 120pt● 5th row: 160pt● 6th row: 200pt● 7th row: 240pt● 8th row: 280pt

Left 0px (SL)

0pt (HTML)





HTML version...


Input fields Control type TextBox




HTML version...








HTML version...




5.2 SystemMessage

This section will explain what a SystemMessage is and give some visual examples.

Figure 46: Information message


5.2.1 SystemMessage - on PopupPage layout

How to fit a SystemMessage into the half-width PopupPage layout...





Table 31:


Container Control type ModalWindow

Toolbar Control type Toolbar (inherited from SAP GUI)

Visibility Hidden (move the buttons directly onto the UserArea of the popup)

Message icon Control type TextBox or Label

NoteIt's impossible to directly select the Image control or to stretch / resize / change the embedded icon. Instead, you must resize the TextBox or Label that the image is inside of.

Top 0px (SL)

0pt (HTML)

Left 0px (SL)

0pt (HTML)

Width 24px (SL)

30pt (HTML)




Height 24px (SL)

8pt (HTML)

Message texts Control type TextBox

NoteEach row of text is a separate TextBox control. There could be as many as 3 separate TextBoxes and the property values need to be set individually for each of them.


● 1st row: 0px● 2nd row: 24px● 3rd row: 48px

HTML version...

● 1st row: 0pt● 2nd row: 8pt● 3rd row: 16pt

Left 32px (SL)

40pt (HTML)

Width 544px (SL)

680pt (HTML)

Height 24px (SL)

8pt (HTML)

FontSize 14pt





No color

Footer Control type Image

Image file Fiori_Popup_HalfWidth.png

Mode (SL) None


Top 88px (SL)

28pt (HTML)




Left 0px (SL)

0pt (HTML)

Width NaN (SL)

710pt (HTML)

Height NaN (SL)

10pt (HTML)

Buttons Control type Button

Top 88px (SL)

28pt (HTML)





Width 80px (SL)

100pt (HTML)

Height 30px (SL)

9pt (HTML)





No color

5.3 Table

A Table is either a TableView or TableTreeView SAP GUI control, plus any additional text labels, buttons or other controls related to the TableView or TableTreeView.

TableView, GridView and TableTreeView are different varieties of tables found in the original SAPGUI. Throughout this style guide, these different screen elements will be referred to collectively as "Tables".

TableView is a type of table typically used for displaying large amounts of data from a database.



Figure 49: SAPGUI TableView

GridView is another variety of table used in SAPGUI, which from the viewpoint of SAP Screen Personas is almost identical with TableView.

Figure 50: SAPGUI GridView

TableTreeView is a type of table typically used for expandable hierarchies, such as menu trees or search results.

Figure 51: SAPGUI TableTreeView

NoteButtons and title for the Table are optional. Not every Table will have a title or table-specific buttons. When working with Tables that include a title text and multiple buttons, it can often be convenient to use the "Group selected controls" feature (in the Personas toolbar) so the elements can be moved around on the UserArea as if they were a single object.



5.3.1 Table - default values

These values are the same for all Table controls, regardless of what type of container or page layout they are placed inside of.

Table 32:


Title

(optional)

Control type Label

Note(SL) It is also possible to assign a title text to a Table, by using the "Title" attribute in the Properties panel. However, when using this method, options for customizing the position, size & appearance of the text are very limited. It is recommended that users always implement the title as a separate Label control, whenever possible.

Width Variable. Stretch the Label out as wide as possible, without allowing it to overlap any buttons, icons or other controls that are being shown in the title bar directly above the Table.

Height 24px (SL)

8pt (HTML)



FontSize 14pt

Alignment Left

Buttons

(optional)

Control type Button, LaunchButton or ScriptButton

Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt

Alignment (SL) Icon only

Assign image (HTML) Center / no label

Icon size

(determined by size of source image file)

22x22 px

Icon background color (SL)

Transparent (#00FFFFFF)

BackColor (SL) Transparent (#00FFFFFF)


BorderColor (SL) Transparent (#00FFFFFF)





Dividers between buttons

(optional)

Control type Image

Image file Fiori_Divider_Content_24x24

NoteThe divider icon is designed to occupy exactly the same amount of space as a standard button.

Width / Height / Left / Top

Same as for buttons

5.3.2 Table - on BasicPage layout

How to optimize a Table (full-width or half-width) to fit the BasicPage layout...





Table 33:


Title

(optional)

Control type Label


● At top of page: 72px● Below other content: +32px below bottom edge of previous content

HTML version...

● At top of page: 23pt● Below other content: +10pt below bottom edge of previous content

NoteThis is a larger offset than for most other types of content. This is an intentional design decision to ensure the Title and Buttons are understood to relate only to the Table underneath and are not related to any other content shown above the Table.



HTML version...


Buttons

(optional)




HTML version...


Left

(left ContentArea - SL)

● 1st button: 568px● 2nd button: 544px● 3rd button: 520px● 4th button: 496px● 5th button: 472px● 6th button: 432px● 7th button: 408px● 8th button: 384px● 9th button: 360px● 10th button: 336px● 11th button: 312px● 12th button: 288px




Left

(left ContentArea - HTML)

● 1st button: 710pt● 2nd button: 680pt● 3rd button: 650pt● 4th button: 620pt● 5th button: 590pt● 6th button: 560pt● 7th button: 530pt● 8th button: 500pt● 9th button: 470pt● 10th button: 440pt● 11th button: 410pt● 12th button: 380pt

Left

(right ContentArea - SL)


Left

(right ContentArea - HTML)


Content Control type ● Calendar● GridView● TableView● TableTreeView





● No title / no buttons: 72px● Buttons, but no title: 96px● If title is implemented as the "Title" property: 73px● If title is a separate "Label" control: 96px

HTML version...



HTML version...




HTML version...


Height Variable, depending on amount of content to be shown



5.3.3 Table - on PopupPage layout

How to optimize a Table (half-width or full-width) to fit the PopupPage layout.



Table 34:


Title

(optional)

Control type Label






HTML version...





HTML version...


Buttons

(optional)


Top Same as for Title

Left






Left



Left



Left









HTML version...

● No title / no buttons: 8pt● Buttons, but no title: 15pt● If title is implemented as the "Title" property: 9pt● If title is a separate "Label" control: 15pt

Left Same as for Title



HTML version...


Height Variable, depending on amount of content to be shown

5.3.4 Table - inside a TabControl

How to optimize a Table (half-width or full-width) to fit inside a full-width TabControl...







Table 35:


Title

(optional)

Control type Label



HTML version...





HTML version...


Buttons

(optional)


Top 0px (SL)

0pt (HTML)

Left






Left



Left



Left









HTML version...

● No title / no buttons: 0pt● Buttons, but no title: 8pt● If title is implemented as the "Title" property: 1pt● If title is a separate "Label" control: 8pt



HTML version...




HTML version...


Height Variable, depending on content



6 CONTROLS

The Controls section discusses special requirements and recommendations for specific types of UI controls used in SAP Screen Personas. Here you will find very detailed guidelines about how to use the different controls, which are the building blocks for creating the UI.


6.1 Button

In SAP Screen Personas, a Button is a certain type of control which performs a specific function when pressed. The Button has a label (text, icon or both) and will become highlighted when hovering over it with a mouse (to indicate that it is pressable).

6.1.1 LaunchButton & ScriptButton

A LaunchButton is a SAP Screen Personas control that launches a transaction or menu command when pressed.

A ScriptButton is a SAP Screen Personas control that launches a script when pressed.

Below, you can see examples of a LaunchButton and ScriptButton, as they appear when first created and placed on the UserArea (before any customization is done)...

Guideline: Don't use the standard button icons... either hide the icon or replace it with a more meaningful function-specific icon that informs the user about what the button actually does in the current context.

Design rationale: Users don't care if the button is a LaunchButton or a ScriptButton or a normal Button control from the SAP GUI screens. Users only care about what the button DOES for them. So, the default button icons are meaningless to end users and needlessly clutter the screen. It is better to simplify the visual complexity of the screen, so teh meaningful information is easily noticed & consumed by users.

6.2 Checkbox

A Checkbox is a control used to toggle a setting between two different states: "active" (box is checked) and "not active" (box is not checked).

It is currently not possible to move the text label for a Checkbox to the left side of the box.

Guideline: There is some flexibility about where and how to place checkboxes, depending on the surrounding context. But in general, they should be placed directly beneath any other content they are closely related to.


SAP Screen Personas Style GuideCONTROLS

Guideline: When placing Checkboxes in a Form, they should be aligned with the column of user input fields (TextBoxes).

Design rationale: A Checkbox is technically also a user input field for capturing user input. All the controls that are editable (user can manipulate them) should be kept in the same column, while the text labels (which are read-only) are kept in a separate column on the left of the input fields.

Guideline: When there is more than one Checkbox, they should be arranged as a vertical column (one on top of the other) and NEVER arranged as a horizontal row (one beside the other).

Design rationale: When Checkboxes are set side-by-side in a row, it can become difficult for users to identify which label belongs to which box (the one on the left or the one on the right?).

6.2.1 Checkbox list (with FioriPanel) - on BasicPage layout

How to place a list of multiple checkboxes inside a FioriPanel container.

Figure 58: Example of a checkbox list inside a FioriPanel

Table 36:



(half-width)

Checkboxes Control type Checkbox







● Left column: 32px● Right column: 304px

HTML version...

● Left column: 40pt● Right column: 380pt

Height 24px (SL)

8pt (HTML)

Width 240px (SL)

300pt (HTML)

6.3 Image

An Image is a graphics file (in PNG format) which has been inserted into a SAP Screen Personas flavor.



6.3.1 Clickable Icons

A Clickable Icon is an uploaded Image that performs a certain function when the user clicks on it, just as if the image was a Button control.

The functionality linked to the clickable icon is controlled by the PushOnClick property for the Image. Usually the PushOnClick property is populated by the unique control ID of a button that performs the desired functionality. When the user clicks on the icon, it simulates a push on the linked Button in the back end.

Tip: Clickable icons are generally not as intuitive as actual "buttons", because the user might not recognize that it is possible to click on the image / icon. If you have a mix of traditional buttons an dclickable images / icons all on the same page, the user will probably NOT realize that clicking on the images will actually accomplish anything. Instead, the user will have a tendency to only use the traditional (easily recognized) buttons which are OBVIOUSLY meant to be clicked. Clickable images that do NOT look like a button should only be used in very special cases, where the function behind the button is not critical to main task being performed.

6.4 Label

A Label is a control that displays a read-only text. Labels are usually used in conjunction with other linked controls (most commonly, TextBoxes) to communicate a name, title or other descriptive information for the linked control.

A Label should always be placed above or to the left of the object that it is referring to (such as a TextBox or other type of user input field).

6.4.1 Label - Default Values

Table 37:

PROPERTY VALUE

Font Arial

Size 14pt

Style None

Alignment Left

ForeColor #FF666666


ProporationalFont True

FontFamily Arial

FontSize 14pt

FontWeight Normal

FontStyle Normal



PROPERTY VALUE

TextDecorations None

TextAlignment Left

6.4.2 Label vs TextBox

Sometimes in the SAP GUI, you will encounter what appear to be text Labels (read-only introductory texts used to label another control or group of controls) that were actually implemented in the legacy software as TextBox controls.

As a general rule, Labels are read-only OUTPUT fields, while TextBoxes are user INPUT fields. The main differences between these two types of UI controls in SAP Screen Personas tool are...

● Labels are ALWAYS read-only, while TextBoxes are USUALLY editable but OCCASIONALLY made read-only.● Labels can be given bold or italic font, while the font options for TextBoxes are much more limited.

[??? missing illustration ???]

Easy solution: treat the existing control as if it were a Label (instead of a TextBox), but you will NOT be able to set the font style to "bold" (not supported by TextBoxes). This easy solution frequently will work without end users ever noticing the inconsistency, as long as all the other "labels" on the same page also happen to be TextBoxes.

Difficult solution: Create a new Label control and link it to the display text of the hidden TextBox (so it displays the same text). Move the old TextBox out of the way (to an empty space on screen) and hide it. Put the new Label in the same location that was previously occupied by the (now hidden) TextBox.

6.5 OkCodeBox

The OkCodeBox, or Transaction Code Prompt is a user input field which allows users to input the name of a transaction and jump directly to it from the current transaction.

The OkCodeBox is inherited from the SAP GUI backend and it is currently not possible to create one in SAP Screen Personas.

Guideline: It should be hidden in all transaction pages outside of the LaunchPage / Dashboards. Instead users will be required to return to teh LandingPage or Dashboard if they need to jump to another transaction.

Design rationale: In SAP Screen Personas, the OkCodeBox is almost never needed. It provides a shortcut that circumvents the normal prescribed UI flow in a user scenario. Shortcuts to any relevant or useful functions are usually provided through the available Buttons or contextual menu options. The OkCodeBox only provides additional access to completely unrelated transactions and functionalities.



6.6 StatusBar

The StatusBar is a SAP GUI control used to communicate important system status messages to the user. It is permanently located in a fixed location at the bottom of the screen.

StatusBars are inherited from the SAP GUI backend and it is currently not possible to create a StatusBar in SAP Screen Personas.

It is currently not possible to move the StatusBar to another location or change its size. Instead, it has an infinite width (to fill the entire width of the screen) and fills a height of approximately 24px at the very bottom of the screen, below the bottom edge of the UserArea.

It is currently not possible to change the font size or style of the texts displayed in the StatusBar.

Guideline: The StatusBar (BackColor and BorderColor) is always colored using the primary brand-specific color. The text shown inside the StatusBar (ForeColor) will always be set to Default color.

Design rationale: Some types of status message are shown with colored texts. Setting the ForeColor to a non-default color will interfere with this color-coding of system messages.

6.7 TextBox

A TextBox is a user input field intended for capturing text or numerical input.

Tip: TextBoxes are easily created in SAP Screen Personas and can be assigned a permanent BackColor and BorderColor, even when there is no text being displayed inside them. This makes read-only TextBoxes a good method of creating simple colored shapes, instead of importing graphics files as Images.

6.7.1 TextBox - Default Values

Table 38: TextBox used as an input field

PROPERTY VALUE

ZIndex Irrelevant, as long as it is a positive value

IsEnabled True

Width Depending on max length of text...

●

Height 24px (SL)

8pt (HTML)

ForeColor Black

BackColor White



PROPERTY VALUE

BorderColor #FF666666

ProportionalFont True (for phone numbers or other long numbers with special characters, this property can be set to FALSE, but only if it improves readability)

AlignmentRight False

FontSize 14pt

Table 39: TextBox used as a read-only status text for another input field

PROPERTY VALUE

ZIndex Irrelevant, as long as it is a positive value

IsEnabled True

Width Depending on max length of text...

●

Height 24px

ForeColor #FF666666

BackColor transparent

BorderColor transparent

ProportionalFont True

IsReadOnly True


FontSize 12pt

Table 40: TextBox used as a colored background for other content

PROPERTY VALUE

ZIndex -10 (this ensures that this control appears BEHIND whatever content is placed on top of it)

Tooltip none

IsEnabled True

ForeColor transparent

BackColor #99FFFFFF

BorderColor #99FFFFFF

ProportionalFont True

IsReadOnly True


FontSize NaN



6.8 Text Editors



6.9 Toolbar

A Toolbar is a container control, inherited from the SAP GUI back end, that's used to group buttons together.

There are usually at least two standard Toolbars in every transaction page (one for global functions and one for application-specific functions) and one Toolbar at the bottom of every popup page.

It is currently impossible to create a Toolbar in SAP Screen Personas.

Guideline: In most cases, the Toolbars from the original SAP GUI screens should be hidden. Any buttons or content from the Toolbars that is necessary or DIRECTLY relevant for the user scenario can be moved into the UserArea as part of the page layout.

Design rationale: Toolbars currently offer limited options for aligning the buttons placed inside them. Usually, the buttons are simply pushed as far to the left as possible (left-aligned) with only a minimal spacing between them (approximately 4px). It's difficult to make the buttons align with the overall page layout or to show subgroupings, hierarchies or relationships between the buttons in the Toolbars.

Tip: The hidden Toolbars from the SAP GUI are useful containers for gathering together any buttons that need to be hidden from users in SAP Screen Personas flavors (for example ScriptButtons that are used to link automated fucntionality to an event or to other controls.)

6.10 UserArea

The UserArea is inherited from the SAP GUI back end and is an infinite empty area for displaying content between the Toolbar (at the top of the screen) and the StatusBar (at the bottom of the screen).

There is always only one UserArea in each SAP Screen Personas screen. It is impossible to ever hide or resize the UserArea with SAP Screen Personas, or to create a new UserArea.



Important Disclaimers and Legal Information

Coding SamplesAny software coding and/or code lines / strings ("Code") included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended to better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, unless damages were caused by SAP intentionally or by SAP's gross negligence.

AccessibilityThe information contained in the SAP documentation represents SAP's current view of accessibility criteria as of the date of publication; it is in no way intended to be a binding guideline on how to ensure accessibility of software products. SAP in particular disclaims any liability in relation to this document. This disclaimer, however, does not apply in cases of wilful misconduct or gross negligence of SAP. Furthermore, this document does not result in any direct or indirect contractual obligations of SAP.

Gender-Neutral LanguageAs far as possible, SAP documentation is gender neutral. Depending on the context, the reader is addressed directly with "you", or a gender-neutral noun (such as "sales person" or "working days") is used. If when referring to members of both sexes, however, the third-person singular cannot be avoided or a gender-neutral noun does not exist, SAP reserves the right to use the masculine form of the noun and pronoun. This is to ensure that the documentation remains comprehensible.

Internet HyperlinksThe SAP documentation may contain hyperlinks to the Internet. These hyperlinks are intended to serve as a hint about where to find related information. SAP does not warrant the availability and correctness of this related information or the ability of this information to serve a particular purpose. SAP shall not be liable for any damages caused by the use of related information unless damages have been caused by SAP's gross negligence or willful misconduct. All links are categorized for transparency (see: http://help.sap.com/disclaimer).


SAP Screen Personas Style GuideImportant Disclaimers and Legal Information

http://help.sap.com/disclaimer/

SAP Screen Personas Style GuideImportant Disclaimers and Legal Information


www.sap.com/contactsap

© 2015 SAP SE or an SAP affiliate company. All rights reserved.No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. The information contained herein may be changed without prior notice.Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary.These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.Please see http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

http://www.sap.com/contactsap

http://www.sap.com/corporate-en/legal/copyright/index.epx

http://www.sap.com/corporate-en/legal/copyright/index.epx

Technology

SAP Screen Personas style guide for Fiori Feb 2015