Sapscreenpersonasstyleguideforfiori2015 Feb 06 150212133243 Conversion Gate02

INTERNAL USE ONLY2015-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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.4 ScrollableContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.5 SplitterContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .694.6 StretchableContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.7 TabControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

TabControl - Default Value. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71TabControl - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72TabControl - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73TabControl - inside a CollapsibleContainer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

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

Form - Default Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Form - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Form (with FioriPanel). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83Form - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Form - in TabControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

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

5.3 Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Table - default values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97Table - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98Table - on PopupPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Table - inside a TabControl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

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

LaunchButton & ScriptButton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1106.2 Checkbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Checkbox list (with FioriPanel) - on BasicPage layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1116.3 Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Clickable Icons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1136.4 Label. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Label - Default Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113Label vs TextBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

6.5 OkCodeBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1146.6 StatusBar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1156.7 TextBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

TextBox - Default Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1156.8 Text Editors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1176.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 OptimizationThe 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 PaletteAn 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 - FioriSample 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 - FioriSample 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 Hex102, 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 - FioriSample 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 NavigationKeep 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 BacksteppingBackstepping 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 HomescreenGuideline: 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 FoldGuideline: 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 & typographyUse 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 AlignmentLaunchpad 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) CenterPopupPage titles not editable White LeftFooter buttons(except Menu button)

14pt White Center



Usage Font size Font color AlignmentPopupPage Footer buttons 13pt (SL)

12pt (HTML)

White Center

CollapsibleContainer titles 14pt (SL)

13pt (HTML)

Dark grey (#666666) Left

FioriPanel titles 16pt Dark grey (#666666) LeftTab labels not editable Dark grey (#666666) CenterForm - section titles 14pt (SL)

16pt (HTML)

Dark grey (#666666) Left

Form - field labels 14pt Dark grey (#666666) RightForm - input fields 12pt Black LeftForm - value descriptions(read-only texts)

12pt Black Left

System message texts 14pt Black LeftTable titles 14pt Dark grey (#666666) Left

2.5 Images & IconographyUse 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 ColorLaunchpad tiles 48x48 px Blue (#007cc0)Buttons in Header(36x36 buttons)

34x34 px Dark gray (#666666)



Usage Size ColorButtons 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 functionsHelp 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[??? missing introduction ???][??? missing explanation ???]



3 PAGE LAYOUTS

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

3.1 LaunchPadThe 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 - BackgroundHow to define the background image for the LaunchPad layout...Table 6:CONTROL PROPERTY VALUEScreen background (pattern)

ControlType UserAreaBackground image Fiori_Gradient.pngMode (SL) StretchStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / Center

3.1.2 LaunchPad - HeaderHow 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:CONTROL PROPERTY VALUEBackground Control type Insert a new...

Image

Image file Fiori_LaunchPad_Hdr_1200x48.pngMode (SL) NoneStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / CenterTop 0px (SL)

0pt (HTML)

Left 0px (SL)

0pt (HTML)

Width NaN (SL)

1500pt (HTML)



CONTROL PROPERTY VALUEHeight NaN (SL)

15pt (HTML)

HorizontAlignment (SL)

Center

VerticalAlignment (SL) CenterZindex (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.pngIcon background TransparentTop 6px (SL)

2pt (HTML)

Left 4px (SL)

5pt (HTML)

Width 36px (SL)

45pt (HTML)

Height 36px (SL)

12pt (HTML)

BackColor (SL) TransparentFill color (HTML) No colorBorderColor (SL) TransparentBorder style (HTML) No borderTooltip Log out

Help button Control type Edit the existing...Button

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

Add icon Fiori_34x34_gray_QuestionMark.pngIcon background Transparent



CONTROL PROPERTY VALUETop 6px (SL)

2pt (HTML)

Left 1160px (SL)

1450pt (HTML)

Width 36px (SL)

45pt (HTML)

Height 36px (SL)

12pt (HTML)

BackColor (SL) TransparentFill color (HTML) No colorBorderColor (SL) TransparentBorder style (HTML) No borderTooltip 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 ImageImage file Fiori_Divider_Header_8x48.pngMode (SL) noneStretch (HTML) nonePosition (SL) Center / CenterAlignment (HTML) Center / CenterTop 0px (SL)

0pt (HTML)



CONTROL PROPERTY VALUELeft Silverlight version...

1. 1152px2. 1108px3. 1020px


Width NaN (SL)

10pt (HTML)

Height NaN (SL)

15pt (HTML)


Center

Stretch (SL) NoneVerticalAlignment (SL) Center

Transaction code prompt

Control type OkCodeBoxses[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 12ptTooltip Enter a valid transaction code

Enter button Control type Buttonses[0]/wnd[0]/tbar[0]/btn[0]

Add icon Fiori_22x22_gray_Accept.pngIcon background Transparent




4pt (HTML)

Left 636px (SL)

795pt (HTML)

Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt (HTML)

BackColor (SL) TransparentFill color (HTML) No colorBorderColor (SL) TransparentBorder style (HTML) No border

3.1.3 LaunchPad - TileHow 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 containerCONTROL PROPERTY VALUEBackground Control type ScriptButton

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



CONTROL PROPERTY VALUEAlignment (SL) Text onlyAssign image (HTML) No iconLabel .

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) WhiteFill color (HTML) White



CONTROL PROPERTY VALUEBorderColor (SL) TransparentBorder style No borderCornerRadius 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 LabelFont ArialSize 16pt (SL)

14pt (HTML)

Style NoneAlignment LeftWrap text YesTop 8px (SL)

3pt (HTML)

Left 8px (SL)

10pt (HTML)

Width 166px (SL)

210pt (HTML)

Height (SL) 40px (SL)

13pt (HTML)

ForeColor (SL) #FF333333Font Color (HTML) #333333



CONTROL PROPERTY VALUEFontFamily (SL) ArialFontStyle (SL) NormalFontWeight (SL) NormalTextAlignment (SL) LeftTextDecorations (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 TileCONTROL PROPERTY VALUEIcon(optional)

Control type ImageMode (SL) NoneStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / CenterTop 102px (SL)

30pt (HTML)

Left 8px (SL)

10pt (HTML)

Width NaNHeight NaNHorizontalAlignment (SL)

Center

Stretch (SL) NoneVerticalAlignment (SL) Center

Subtext(optional)

Control type LabelFont Arial



CONTROL PROPERTY VALUESize 14pt (SL)

12pt (HTML)

Style NoneAlignment RightText 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) 20pxForeColor (SL) #FF666666Font Color (HTML) #666666FontFamily ArialFontSize 14pt (SL)

12pt (HTML)

FontStyle (SL) NormalFontWeight (SL) NormalTextAlignment (SL) RightTextDecorations (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

[??? missing explanation ???]



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:CONTROL PROPERTY VALUEContainer Control type UserAreaSection titles (optional) Control type Label

Font ArialSize 24pt (SL)

20pt (HTML)

Style noneAlignment (SL) LeftTop First section title, at top of screen...

64px (SL)

20pt (HTML)

Left 32px (SL)

40pt (HTML)

Width 800px (SL)

1000pt (HTML)

Height (SL) 32pxForeColor (SL) WhiteFont color (HTML) White

Tiles Control type (SL) ScrollableContainerControl type (HTML) Group (Personas)

Refer to chapter "LaunchPad - Tile"



CONTROL PROPERTY VALUETop-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

Silverlight version... 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

Silverlight version... 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

Silverlight version... 3rd row: 544px 4th row: 728px 5th row: 912px

HTML version... 3rd row: 170pt 4th row: 228pt 5th row: 285pt



CONTROL PROPERTY VALUETop-After 4th section title

Silverlight version... 4th row: 768px 5th row: 952px

HTML version... 4th row: 240pt 5th row: 298pt

Left Silverlight version... 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 - FooterRefer to section "BasicPage - Footer"The Footer element for Launchpad layout is identical to the Footer element for the BasicPage layout.

3.2 BasicPageThe 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 - BackgroundHow 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:CONTROL PROPERTY VALUEBackground image ControlType UserArea

Background image Fiori_Gradient.pngMode (SL) StretchStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / Center

Transparency effect ControlType TextBoxTop 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% transparencyBorderColor (SL) #99FFFFFF (=60% white)Border style (HTML) No borderIsReadOnly TrueZindex (SL) -10



Send to back



3.2.3 BasicPage - HeaderThe 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:CONTROL PROPERTY VALUEBackground Control type Image

Image file Fiori_BasicPage_Hdr_1200x48.pngMode (SL) NoneStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / CenterTop 0px (SL)

0pt (HTML)

Left 0px (SL)

0pt (HTML)

Width NaN (SL)

1500pt (HTML)




15pt (HTML)


Center

Stretch (SL) NoneVerticalAlignment (SL) CenterZindex (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.pngTransaction /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.pngTooltip Back



CONTROL PROPERTY VALUE"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.pngTooltip Help

Navigation buttons Control type ButtonAlignment Icon onlyTop 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



CONTROL PROPERTY VALUEFont color (HTML) No colorBackColor (SL) TransparentFill color (HTML) No colorBorderColor (SL) TransparentBorder style (HTML) No border

Dividers Control type ImageImage file Fiori_Divider_Header_8x48.pngMode (SL) noneStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / CenterTop 0px (SL)

0pt (HTML)

Left (left grouping) Silverlight version...1. 40px2. 88px3. 128px


Left (right grouping) Silverlight version1. 1152px2. 1108px3. 1064px


Width NaN (SL)

10pt (HTML)

Height NaN (SL)

15pt (HTML)

Stretch (SL) NoneHorizontAlignment (SL)

Center



CONTROL PROPERTY VALUEVerticalAlignment (SL) Center

Page title Control type LabelFont ArialSize 16ptStyle NormalAlignment CenterText Default: "Page title"

On page launch: copy the SAP GUI page title from ses[0]/wnd[0]/titleLeft 176px (SL)

220pt (HTML)

Top 14px (SL)

4pt (HTML)

Width 848px (SL)

1060pt (HTML)

Height (SL) 24pxForeColor (SL) #FF666666Font color (HTML) #666666FontSize (SL) 16ptFontWeight (SL) NormalTextAlignment (SL) Center

3.2.4 BasicPage - FooterThe 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:CONTROL PROPERTY VALUEBackground Control type Image

Image file Fiori_Footer_1200x40.pngMode (SL) NoneStretch (HTML) StretchPosition Center / CenterZIndex -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)




13pt (HTML)

VerticalAlignment CenterHorizontAlignment 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 NoneTop +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 WhiteBackColor TransparentBorderColor TransparentText MenuFontSize Because the Menu button is defined as a unique button type in the SAP

GUI, 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



CONTROL PROPERTY VALUEAction 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 SettingsTop +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:CONTROL PROPERTY VALUEAction buttons Control type Button

Alignment Text onlyText a descriptive label for the button, preferrably with verb-noun format (maxi

mum 14 letters long)Top 2px (SL)

1pt (HTML)



CONTROL PROPERTY VALUELeft 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 WhiteBackColor TransparentBorderColor TransparentIconId (SL) none (text only)FontSize 14pt

Dividers Control type ImageImage file Fiori_Divider_Footer_8x40.pngMode (SL) NoneStretch (HTML) StretchPosition (SL) Center / CenterAlignment (HTML) Center / CenterZIndex (SL) 100

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

Bring forward (HTML) Bring to front




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)

VerticalAlignment (SL) CenterHorizontAlignment (SL)

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 layoutHow 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:CONTROL PROPERTY VALUEContainer 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 UserAreaBackColor (SL) TransparentFill color (HTML) No fillBackground image None

Footer Control type Image



CONTROL PROPERTY VALUEImage file Fiori_Popup_HalfWidth.png

Fiori_Popup_FullWidth.pngMode (SL) NoneStretch (HTML) StretchPosition (SL) Center / CenterPosition (HTML) Center / CenterTop variable, depending on amount of content

But, always 32px below bottom edge of ContentArea

Left 0px (SL)

0pt (HTML)

Width Silverlight version... 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) NoneVerticalAlignment (SL) CenterZIndex (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



CONTROL PROPERTY VALUEAlignment (SL) Text onlyText If no text was provided already in SAP GUI, then make it the same as the

Tooltip text.Top Same value as FooterLeft (SL) Half-width...

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

Full-width... 1st button: 1088px 2nd button: 1008px 3rd button: 928px

Left (HTML) Half-width... 1st button: 630pt 2nd button: 530pt 3rd button: 430pt

Full-width... 1st button: 1360pt 2nd button: 1260pt 3rd button: 1160pt

Width 80px (SL)

100pt (HTML)

Height 30px (SL)

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

9pt (HTML)

ForeColor (SL) WhiteFont color (HTML) WhiteBackColor (SL) transparentFill color (HTML) No fillBorderColor (SL) transparentBorder style (HTML) No borderFontSize 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.



CONTROL PROPERTY VALUEToolbar 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 ???][??? missing explanation ???]

4.1 CollapsibleContainerA 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 layoutHow to align a CollapsibleContainer to fit the BasicPage layout...Table 16:CONTROL PROPERTY VALUEContainer Control type ScrollableContainer (BUT, with some additional features added)

Top Silverlight version... 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)

BackColor TransparentToggle button (collapse / expand)

Control type ButtonTop 4px (SL)

1pt (HTML)

Left 4px (SL)

5pt (HTML)



CONTROL PROPERTY VALUEWidth 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 ArialSize 14pt (SL)

13pt (HTML)

Style noneAlignment (SL) LeftTop 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.

ForeColor (SL) #FF666666Font color (HTML) #666666BackColor (SL) TransparentBackground color (HTML)

No color

Proportional font (SL) TrueFontSize (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 layoutsCONTROL PROPERTY VALUETitle Control type Label

Font ArialSize 16ptStyle NormalAlignment LeftForeColor (SL) #FF666666Font color (HTML) #666666TextAlignment (SL) LeftHeight 24px (SL)

8pt (HTML)

Background Control type TextBoxBackColor (SL) #99FFFFFF (white - 60% opacity)Fill color (HTML) White - 60% opacityBorderColor (SL) #99FFFFFF (white - 60% opacity)Border style (HTML) White - 60% opacity



CONTROL PROPERTY VALUEHeight (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 TrueZIndex (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



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 18: Creating the FioriPanel container (SL)CONTROL PROPERTY VALUETitle Control type Label

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



Background Control type TextBoxTop 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 createdWidth 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 FioriPanelCONTROL PROPERTY VALUEContainer Control type FioriPanelButtons Control type Button

ScriptButton LaunchButton

Top 0px



CONTROL PROPERTY VALUELeft(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)




Width 24pxHeight 24px



4.2.2 FioriPanel - in TabControl containerHow to place a FioriPanel inside of a TabControl container.



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 20: Creating the FioriPanel container (SL)CONTROL PROPERTY VALUETitle Control type Label

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)




Left ContentArea: 0px Right ContentArea: 580px




Background Control type TextBoxTop 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 createdWidth 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 21: Adding buttons to the FioriPanelCONTROL PROPERTY VALUEContainer Control type FioriPanelButtons Control type Button

ScriptButton LaunchButton

Top 0px



CONTROL PROPERTY VALUELeft(half width) (SL)


Left(half width) (HTML)






Width 24px (SL)

30pt (HTML)

Height 24px (SL)

8pt (HTML)



4.3 GroupBoxA 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 ScrollableContainerA 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 SplitterContainerA 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 StretchableContainerA 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 TabControlA 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:CONTROL PROPERTY VALUEContainer Control type TabControl

BackColor (SL) #99FFFFFF (white - 60% opacity)Fill color (HTML) White - 60% opacityBorderColor (SL) #99FFFFFF (white - 60% opacity)Border style (HTML) White - 60% opacityHeight Depending on the amount of content inside the container... refer to sepa

rate sections for various types of content.Width Silverlight version...

Half-width: 576px Full-width: 1168px


Tab labels Control type TabItemForeColor (SL) #FF666666 (dark gray)Font color (HTML) #666666 (dark gray)BackColor (SL) TransparentFill color (HTML) No color



CONTROL PROPERTY VALUEBorderColor (SL) TransparentBorder style (HTML) No border

Tab label texts Control type TabItemHeaderText 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 TabItemContentWidth 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.

BackColor (SL) TransparentFill color (HTML) No colorBorderColor (SL) TransparentBorder style (HTML) No border

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




Top Silverlight version... At top of page: 72px Underneath other content: 24px below bottom edge of previous con

tent / containerHTML version... At top of page: 23pt Underneath other content: 8pt below bottom edge of previous con

tent / container

Left Silverlight version... Left ContentArea: 16px Right ContentArea: 608px


4.7.3 TabControl - on PopupPage layoutHow to optimize a TabControl to fit inside the full-width PopupPage layout...




Top Silverlight version... At top of page: 16px Underneath other content: 24px below bottom edge of previous con

tent / container

HTML version... At top of page: 5pt Underneath other content: 8pt below bottom edge of previous con

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.




CONTROL PROPERTY VALUETop Silverlight version...

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

tent / container

HTML version... At top of page: 11pt Underneath other content: 8pt below bottom edge of previous con

tent / container

Left 8px (SL)

10pt (HTML)



Documents

Sapscreenpersonasstyleguideforfiori2015 Feb 06 150212133243 Conversion Gate02