Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

SAP Screen Personas 3.0


 


 

Contents

______________________________

Regina Sheynblat

Jun 24, 2015 20:32

SAP Screen Personas 3.0 Fiori Style Guide


 Guides Updated on Nov 03, 2015 14:41,    

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.

9.     The Fiori icons are available here

Fiori UI Style

This document is based on the SAP Fiori visual UI style.

 

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong

focus on ease of use, the experience is intuitive and simple, across all devices. SAP Fiori was originally created to be used with the

UI5 developer toolkit for HTML5. While SAP Screen Personas represents a completely separate UI technology, this document

attempts to provide clear instructions and best practices for recreating the basic "look-and-feel" of SAP Fiori in the SAP Screen

Personas environment. Even though the full FUNCTIONALITY of SAP Fiori can not be reproduced, this style guide attempts to create

a visual UI style that is CONSISTENT with the SAP Fiori UI, while also upholding the core values and design principles of the SAP Fiori

user experience.

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

 

SampleNameRGBHex
Brand blue0, 157, 224#009DE0
Highlight blue0, 124, 192#007CC0
Deep gray54, 62, 67#363E43
 White255, 255, 255#FFFFFF
Light gray242, 242, 242#F2F2F2
Medium gray229, 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

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

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 (1200pt x 192pt)

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.

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.

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.

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.

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

Backtepping

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.

Exit 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.

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.

Text & typography 

 

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

 

In order to keep the UI as simple as possible and easy to implement with Screen Personas, the number of fonts, font colors

and font sizes are kept to an absolute minimum. 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: Outside of the Launchpad (which is a special case), there are only 3 font sizes used...

  • 14pt

  • 13pt

  • 11pt

Guideline: Only 3 font colors are ever used: Black, White and Dark gray.

Guideline: In general, important texts or user input are always displayed in black text on a white background, while less

important text is shown in dark gray color on light gray background. 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. The UI should always draw the user's attention to what is most important.

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

are typically never used in (standard) Fiori styled flavors.

These "special effects" can be used when necessary, at the flavor designer's discretion, but should be used only rarely.

 

Table 4: Default values for text...

Usage

Font size

Font color

Alignment

Launchpad section titles

 

20pt

 

White (#FFFFFF)

 

Not applicable

Launchpad Tile - titles

 

12pt

 

Black (#000000)

 

Not applicable

Launchpad Tile - subtext

 

12pt

 

Dark gray (#666666)

 

Not applicable

Page titles

 

14pt

 

Dark gray (#666666)

 

Not applicable

PopupPage titles

not editable

 

White (#FFFFFF)

 

Not applicable

Footer buttons

 

12pt

 

White (#FFFFFF)

 

Not applicable

PopupPage Footer buttons

 

12pt

 

White (#FFFFFF)

 

Not applicable

CollapsibleContainer titles

 

13pt

 

Dark gray (#666666)

 

Not applicable

FioriPanel titles

 

14pt

 

Dark gray (#666666)

 

Not applicable

Tab labels

not editable

 

Dark gray (#666666)

 

Not applicable

Form - section titles

 

14pt

 

Dark gray (#666666)

 

Not applicable

Form - field labels

 

13pt

 

Dark gray (#666666)

 

Not applicable

Form - input fields

 

11pt

 

Black (#000000)

 

Not applicable

Form - value descriptions

 

(read-only texts)

 

11pt

 

Black (#000000)

 

Not applicable

System message texts

 

13pt

 

Black (#000000)

 

Not applicable

Table titles

 

14pt

 

Dark gray (#666666)

 

Not applicable

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!

Link to Fiori Images & Icons


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)

Buttons in Footer

 

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

30x30 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

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.


Page Layouts

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

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.
    • 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.

 

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

Stretch

Stretch

Alignment

Center / Center

LaunchPad - Header

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

  

Figure 3: Example screenshot in Fiori visual style


 Figure 4: Layout diagram

 

The 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

VALUE

Background

Control type

Insert a new...

 

Image

Image file

Fiori_LaunchPad_Hdr_1200x48.png

 

Stretch

 

Stretch

 

Alignment

Center / Center

Top

 

0pt

Left

 

0pt

Width

 

1200pt

Height

 

15pt

 

Send backward

 

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

 

2pt

Left

 

4pt

Width

 

36pt

Height

 

11pt

 

Fill color

 

No color

 

Border style

 

No border

Tooltip

Log out

CONTROL

PROPERTY

VALUE

Help button

Control type

Edit the existing button...

Add icon

Fiori_34x34_gray_QuestionMark.png

Icon background

Transparent

Top

 

2pt

Left

 

1160pt

Width

 

36pt

Height

 

11pt

 

Fill color

 

No color

 

Border style

 

No border

Tooltip

Help

Additional buttons (if needed)

Left

1.    1116pt

2.   1072pt

3.   1028pt

Additional dividers

 

(between buttons, if needed)

Control type

Image

Image file

Fiori_Divider_Header_8x48.png

 

Stretch

 

Stretch

 

Alignment

Center / Center

Top

 

0pt

Left

1.    1152pt

2.   1108pt

3.   1020pt

Width

 

8pt

Height

 

15pt

Transaction code prompt

Control type

OkCodeBox

 

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

Top

 

4pt

Left

 

540pt

Width

 

96pt

Height

 

8pt

FontSize

12pt

Tooltip

Enter a valid transaction code

 

 

Enter button

Control type

Button

 

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

Add icon

Fiori_22x22_gray_Accept.png

Icon background

Transparent

  

CONTROL

PROPERTY

VALUE

 Enter button

Top

 

4pt

Left

 

636pt

Width

 

24pt

Height

 

8pt

 

Fill color

 

No color

 

Border style

 

No border

 

LaunchPad - Tile Grouping

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

Maintain 8pt gap between Tiles on left and right sides. Maintain 3pt gap between Tiles at top and bottom.

In 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 8:

CONTROL

PROPERTY

VALUE

Container

Control type

UserArea

Section titles (optional)

Control type

Label

Font

Arial

Size

 

20pt

Alignment

 

NA

Top

 

-First section title

First section title, at top of screen...

 

20pt

Top

 

-Second section title

Depending on how many rows of tiles are above this section title...

  • 1 row: 91pt
  • 2 rows: 148pt
  • 3 rows: 206pt
  • 4 rows: 264pt

CONTROL

PROPERTY

VALUE

Section titles (optional) 

Top

 

-Third section title

Depending on how many rows of tiles are above this section title...

  • 2 rows: 161pt
  • 3 rows: 193pt
  • 4 rows: 251pt

Top

 

-Fourth section title

Depending on how many rows of tiles are above this section title...

  • 3 rows: 231pt
  • 4 rows: 263pt

Left

 

32pt

Width

 

800pt

Height

 

NA

 

Font color

White

Tiles

Control type

 

Grouped Objects - Refer to chapter "LaunchPad - Tile"

Top

 

-No section titles

  • 1st row: 25pt
  • 2nd row: 83pt
  • 3rd row: 140pt
  • 4th row: 198pt
  • 5th row: 256pt

Top

 

-After 1st section title

  • 1st row: 30pt
  • 2nd row: 88pt
  • 3rd row: 145pt
  • 4th row: 203pt
  • 5th row: 261pt

Top

 

-After 2nd section title

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

Top

 

-After 3rd section title

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

Top

 

-After 4th section title

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

Left

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

 

LaunchPad - Tile

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

  

Figure 5: Example screenshot in Fiori visual style


The 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).

Top and Left values are given relative to the placement of each individual tile. The values should be added to the Top and Left 

 coordinates of each tile (refer to chapter "LaunchPad - Tile Grouping").

Table 9: Creating the Tile container

CONTROL

PROPERTY

VALUE

Background

Control type

ScriptButton

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

 

Assign image

 

No icon

Label

 

none

Top

 

+0pt

Left

 

+0pt

Width

  • Standard: 184pt
  • Double: 376pt
  • Triple: 568pt

Height

  • Standard: 56pt
  • Double: 113pt
  • Triple: 170pt

 

Font color

 

No color

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

 

Fill color

White

 

Border style

 

No border

CornerRadius

 

4pt

Tooltip

Only if needed - otherwise blank

There 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.

CONTROL

PROPERTY

VALUE

 

Send backward

Send to back

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

Title

Control type

Label

Font

Arial

Size

 

12pt

Alignment

Left

Wrap text

Yes

Top

 

+3pt

Left

 

+8pt

Width

 

166pt

Height

 

NA

 

Font Color

 

#333333

Secondary title (optional)

Control type

Label

Secondary title can only be used if the main Title (for the tile) is only one row of text. If the Title already

contains two rows of text, then the op­ tional secondary title can NOT be used.

Font

Arial

Size

 

11pt

Alignment

 

NA

Wrap text

No

Top

 

+10pt

Left

 

+8pt

Width

 

166pt

Height

 

NA

 

Font Color

 

#666666

Icon

Control type

Image

CONTROL

PROPERTY

VALUE

 

(optional)

 

Stretch

 

Stretch

 

Alignment

Center / Center

Top

 

+32pt

Left

 

+10pt

Width

 

48pt

Height

 

15pt

Subtext (optional)

Control type

Label

Font

Arial

Size

 

12pt

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

 

+45pt

Left

 

+124pt

Width

 

60pt

Height

 

NA

 

Font Color

 

#666666

FontSize

 

12pt

Refer to section "BasicPage - Footer"

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

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 7: BasicPage layout in Fiori visual style

 

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 8: Single-column layout (one ContentArea)

 

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

Figure 9: Two-column layout (two ContentAreas)

 

The 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.


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 10:

CONTROL

PROPERTY

VALUE

Background image

ControlType

UserArea

Background image

Fiori_Gradient.png

 

Stretch

Stretch

 

Alignment

Center / Center

Transparency effect

ControlType

TextBox

Top

 

15pt

Left

 

0pt

Width

 

1200pt

Height

Variable, as needed...

 

minimum: 148pt

 

Fill color

 

White - 0.85 transparency

 

Border style

 

White - 0.85 transparency

 

Formatting options

 

Read only

 

Send backward

 

Send to back

this ensures that this control appears BEHIND all other content

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 10: Example screenshot in Fiori visual style

 



Figure 11: Layout diagram

Table 11:

CONTROL

PROPERTY

VALUE

Background

Control type

Image

Image file

Fiori_BasicPage_Hdr_1200x48.png

 

Stretch

 

Stretch

 

Alignment

Center / Center

Top

 

0pt

Left

 

0pt

Width

 

1200pt

Height

 

15pt

 

Send backward

 

Send to back

this ensures that this control appears BEHIND all other content

"Home" button

Control type

Script button

The "Home" button is available from most screens other than Launch­ pad 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

Script

session.findById("wnd[0]/tbar[0]/okcd").text = "/n"; session.findById("wnd[0]/tbar[0]/btn[0]").press();

This command terminates the current transaction (ie, closes the cur­ rently viewed page without saving

changes) and returns to the Launch­ pad. It is equivalent to typing the transaction code "/n" into

the OKCo­ deField and pressing "Enter".

Tooltip

Home


 

CONTROL

PROPERTY

VALUE

"Back" button

Control type

Button (inherited from SAP GUI)

 

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

The "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)

The "Help" button is only used when contextual help is available. If pressing the button would only

result in a "No Help text available" mes­ sage, then the button will NOT be visible to end user. When

used, it al­ ways 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

Additional navigation buttons can be added to the Header bar. Naviga­ tion buttons typically navigate

forward or backwards through the MAIN process steps for the user task. Buttons in the Header bar

should apply to the contents of the WHOLE screen and represent frequently used or necessary

actions for the current user task (they are not shortcuts to OTHER tasks or rarely used / advanced features).

They are typically easy to represent with a simple, standardized icon / symbol or a single word (for example,

"Create", "Edit", "Execute", "Save", "Cancel", "Con­ firm", "Reject").

Alignment

Icon only

CONTROL

PROPERTY

VALUE

 

Image file

A few of the most commonly used icons / commands that would appear in the Header bar...

  • Create (a new item) = Fiori_34x34_gray_Create.png
  • Add (to an existing list) = Fiori_34x34_gray_Add.png
  • Accept / Execute = Fiori_34x34_gray_Accept.png
  • Cancel = Fiori_34x34_gray_Cancel.png
  • Save = Fiori_34x34_gray_Save.png
  • Display = Fiori_34x34_gray_Display.png
  • Edit = Fiori_34x34_gray_Edit.png

Top

 

2pt

Left (for left grouping)

  • 1st button: 4pt
  • 2nd button: 48pt
  • 3rd button: 92pt
  • 4th button: 136pt

Left (for right grouping)

  • 1st button: 1160pt
  • 2nd button: 1116pt
  • 3rd button: 1072pt
  • 4th button: 1028pt

Width

 

36pt

Height

 

11pt

 

Font color

 

No color

 

Fill color

 

No fill

 

Border style

 

No border

Dividers

Control type

Image

Image file

Fiori_Divider_Header_8x48.png

 

Stretch

 

Stretch

 

Alignment

Center / Center

Top

 

0pt

Left (left grouping)

  1. 40pt
  2. 88pt

3.   128pt

Left (right grouping)

1.    1152pt

2.   1108pt

3.   1064pt

Width

 

8pt

CONTROL

PROPERTY

VALUE

 

Height

 

15pt

Page title

Control type

Label

Font

Arial

Size

16pt

Alignment

 

NA

Text

  • Default: "Page title"
  • On page launch event: Use a script to copy the SAP GUI page title from

ses[0]/wnd[0]/title

Left

 

176pt

Top

 

4pt

Width

 

848pt

Height

 

NA

 

Font color

 

#666666

 

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.

Figure 12: Example screenshot in Fiori visual style


Figure 13: Layout diagram


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 12:

CONTROL

PROPERTY

VALUE

Background

Control type

Image

Image file

 

Fiori_Footer_NoMenuButton.png

 

Stretch

 

Stretch

 

Alignment

Center / Center

 

Send backward

 

Send to back

this ensures that this control appears BEHIND all other content

Top

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

Left

 

0pt

Width

 

1200pt

Height

 

13pt

 

 Table 13:

CONTROL

PROPERTY

VALUE

Action buttons

Control type

Buttons (inherited from SAP GUI), ScriptButtons and LaunchButtons

The 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.

Alignment

Text only

Text

a descriptive label for the button, preferrably with verb-noun format (maxi­ mum 14 letters long)

Top

+1pt below top edge of Footer background

Left

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

●    1st = 1064pt

●    2nd = 928pt

●    3rd = 792pt

●    4th = 656pt

●    5th = 520pt

●    6th = 384pt

●    7th = 248pt

CONTROL

PROPERTY

VALUE

 

Width

128pt

Height

9pt

Font color

White (#FFFFFF)

Fill color

No fill

Border style

No border

FontSize

12pt

"Settings" button

Control type

Button (inherited from SAP GUI)

The "Settings" button appears only when there are useful settings avail­ able 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

Alignment

Image only, no text

Image

Fiori_30x30_white_Settings.png

Top

2px

+2pt below top edge of Footer background

Left

4pt

Width

32pt

Height

9pt

Font color

No color

Fill color

No fill

Border style

No border

Dividers (optional)

Control type

Image

Dividers can be used to separate Action buttons if there are readability concerns (text might be

too close together), if there's a desire to show a hierarchy between the buttons, or if certain buttons

logically belong to­ gether as a group.

Image file

Fiori_Divider_Footer_8x40.png

CONTROL

PROPERTY

VALUE

 

Stretch

Stretch

Alignment

Center / Center

Bring forward

Bring to front

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

Top

Same as TOP value for the Footer background

Left

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

●    1st = 988pt

●    2nd = 852pt

●    3rd = 716pt

●    4th = 580pt

●    5th = 444pt

●    6th = 308pt

●    7th = 172pt

Width

8pt

Height

13pt

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 14: SAPGUI System message

Figure 15: SAPGUI Transactional popup


 

PopupPage layout

 

 

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



 

Figure 16: Half-width layout


 

Figure 17: Full-width layout with two columns

Figure 18: Full-width layout with one column

 

The 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 14:

CONTROL

PROPERTY

VALUE

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.

In effect, the size of the ModalWindow control is defined by the size & placement of the Footer

element which must be created in Screen Per­ sonas. The Footer appears at bottom of the page,

stretching the Modal­ Window out to the desired size.

Font color

(=page title color)

White

Fill color

 

(=content area color)

  • System message: default
  • All other popups: Light blue = #D8E7EC

This color simulates the basic effect of a 85% opacity overlay on top of the FioriGradient in

the BasicPage layout.

Border style

(=title bar color)

Dark gray = #333333

Background

Control type

UserArea

Fill color

No fill

Background image

None

Footer

Control type

Image

Image file

  • Fiori_Popup_HalfWidth.png
  • Fiori_Popup_FullWidth.png

Stretch

Stretch

Position

Center / Center

Top

variable, depending on amount of content

But, always 32px / 10pt below bottom edge of ContentArea

Left

0pt

Width

  • Half-width: 584pt
  • Full-width: 1168pt

CONTROL

PROPERTY

VALUE

 

Height

10pt

Send backward

Send to back

This ensures that the Footer background always appears BEHIND any buttons, text or

dividers that might be placed on top of it.

Buttons

Control type

Button

Alignment

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

Half-width...

  • 1st button: 504pt
  • 2nd button: 424pt
  • 3rd button: 344pt

Full-width...

  • 1st button: 1088pt
  • 2nd button: 1008pt
  • 3rd button: 928pt

Width

80pt

Height

9pt

Font color

White

Fill color

No fill

Border style

No border

FontSize

12pt

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)

Before hiding the Toolbar, remember to move any buttons you wish to reuse. Hiding the

Toolbar should always be saved for last.

 

CONTAINERS

 

This section will define and explain the concept of Containers.

 

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 19: CollapsibleContainer in the "collapsed" state (from CATSXT transaction)



Figure 20: 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.

 

When 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.

CollapsibleContainer - on BasicPage layout

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

 

Table 15:

CONTROL

PROPERTY

VALUE

Container

Control type

ScrollableContainer (BUT, with some additional features added)

Top

  • Topmost container: 23pt
  • Additional containers: +8pt below bottom edge of previous content

Left

16pt

Width

1168pt

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

Height

  • 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 Border­ Color should NEVER be white or transparent)

BackColor

Transparent

Toggle button (col­ lapse / expand)

Control type

Button

Top

1pt

Left

4pt

Width

24pt

Height

8pt

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 Collapsi­ bleContainer)

Font

Arial

Size

13pt

Style

none

Top

0pt

Left

28pt

 

 

CONTROL

PROPERTY

VALUE

 

Width

300pt

Height

8pt

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. Ide­ ally, we want identical Labels for Both states.

Font color

#666666

Background color

No color

 

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).

The FioriPanel is basically a GroupBox (see separate section) placed directly on the UserArea. It will have a slightly 

 different appearance from "normal" GroupBoxes.

 

Table 16: Default values for FioriPanels in all layouts

CONTROL

PROPERTY

VALUE

Title

Control type

Label

Font

Arial

Size

 

14pt

Alignment

 

NA

 

 

CONTROL

PROPERTY

VALUE

 Title

Font color

#666666

Height

NA

Background

Control type

Image (1x1 px) - use resize usig Strech > Fill

Fill color

White

Border style

White

Height

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

Formatting options

Read only

Send backwards

Send to back

this ensures that this control appears BEHIND all other content

 

FioriPanel - on BasicPage layout

 

Figure 21: Half-width and Full-width layouts

Table 17: Creating the FioriPanel container (SL)

 

CONTROL

PROPERTY

VALUE

Title

Control type

Label

Top

  • 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

  • Left ContentArea: 16pt
  • Right ContentArea: 608pt

Width

  • Half-width: 576pt
  • Full-width: 1168pt

Background

Control type

Image (1x1 px) - use resize usig Strech > Fill

Top

Top of title +8pt

The top edge of the TextBox control (background) is aligned with the bottom edge of the Label control (title).

Left

Same as the LEFT value of the Title

Width

Same as the WIDTH value of the Title


 

 Table 18: Adding buttons to the FioriPanel

CONTROL

PROPERTY

VALUE

Container

Control type

FioriPanel

Buttons

Control type

  • Button
  • ScriptButton
  • LaunchButton

 

 

CONTROL

PROPERTY

VALUE

Buttons

Top

Same as the Top value of Title

Left

 

(half-width FioriPanel)

 

If the FioriPanel is in LEFT ContentArea...

  • 1st button: 568pt
  • 2nd button: 544pt
  • 3rd button: 520pt
  • 4th button: 496pt
  • 5th button: 472pt
  • 6th button: 448pt
  • 7th button: 424pt
  • 8th button: 400pt
  • 9th button: 376pt

 

If the FioriPanel is in RIGHT ContentArea...

  • 1st button: 1160pt
  • 2nd button: 1136pt
  • 3rd button: 1112pt
  • 4th button: 1088pt
  • 5th button: 1064pt
  • 6th button: 1040pt
  • 7th button: 1016pt
  • 8th button: 992pt
  • 9th button: 968pt

Left

  • 1st button: 1160pt

(full-width FioriPanel)

  • 2nd button: 1136pt
  • 3rd button: 1112pt
  • 4th button: 1088pt
  • 5th button: 1064pt
  • 6th button: 1040pt
  • 7th button: 1016pt
  • 8th button: 992pt
  • 9th button: 968pt

Width

24pt

Height

8pt

  

FioriPanel - in TabControl container

  

How to place a FioriPanel inside of a TabControl container.


Figure 22: Half-width and Full-width layouts

Table 19: Creating the FioriPanel container

 

CONTROL

PROPERTY

VALUE

Title

Control type

Label

Top

  • 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

  • Left ContentArea: 0pt
  • Right ContentArea: 580pt

Width

  • Half-width: 572pt
  • Full-width: 1152pt

Background

Control type

Image (1x1 px) - use resize usig Strech > Fill

Top

Top of title +8pt

The top edge of the TextBox control (background) is aligned with the bottom edge of the Label control (title).

Left

Same as the Top value of Title

Width

Same as the Top value of Title


 

 Table 20: Adding buttons to the FioriPanel

 

CONTROL

PROPERTY

VALUE

Container

Control type

FioriPanel

 

CONTROL

PROPERTY

VALUE

Buttons

Control type

  • Button
  • ScriptButton
  • LaunchButton

Top

 

Same as the Top value of Title

Left

 

(half width)

Add the following values to the Left value of the Title...

  • 1st button: +548pt
  • 2nd button: +524pt
  • 3rd button: +500pt
  • 4th button: +476pt
  • 5th button: +452pt
  • 6th button: +428pt
  • 7th button: +404pt
  • 8th button: +380pt
  • 9th button: +356pt

Left

 

(full width)

Add the following values to the Left value of the Title...

  • 1st button: +1128pt
  • 2nd button: +1104pt
  • 3rd button: +1080pt
  • 4th button: +1056pt
  • 5th button: +1032pt
  • 6th button: +1008pt
  • 7th button: +984pt
  • 8th button: +960pt
  • 9th button: +936pt

Width

24pt

Height

8pt

 

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 23: 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.


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 24: 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.

 

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

 

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.


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 25: 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.


TabControl - Default Value

 

 

 

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

 

Figure 26: Full-width TabControl in Fiori style

  

A 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 21:

CONTROL

PROPERTY

VALUE

Container

Control type

TabControl

 

Fill color

White

 

Border style

White

Height

Depending on the amount of content inside the container... refer to sepa­ rate sections for various types of content.

Width

  • Half-width: 576pt
  • Full-width: 1168pt

Tab labels

Control type

TabItem

 

Font color

 

#666666 (dark gray)

 

Fill color

 

No color

 

Border style

 

No border

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

CONTROL

PROPERTY

VALUE

 

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.

 

Fill color

 

No color

 

Border style

 

No border

 

TabControl - on BasicPage layout

 

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

 

 

Table 22:

CONTROL

PROPERTY

VALUE

Container

Control type

TabControl

Top

  • At top of page: 23pt
  • Underneath other content: 8pt below bottom edge of previous con­ tent / container

Left

  • Left ContentArea: 16pt
  • Right ContentArea: 608pt

 

 

TabControl - on PopupPage layout

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


Table 23:

CONTROL

PROPERTY

VALUE

Container

Control type

TabControl

Top

 

  • At top of page: 5pt
  • Underneath other content: 8pt below bottom edge of previous con­ tent / container

Left

 

0pt

TabControl - inside a CollapsibleContainer

How to optimize a TabControl inside a CollapsibleContainer

The 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 24:

CONTROL

PROPERTY

VALUE

Container

Control type

TabControl

Top

  • At top of page: 11pt
  • Underneath other content: 8pt below bottom edge of previous con­ tent / container

Left

 

8pt

 

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.

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).


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.


The 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 25:

CONTROL

PROPERTY

VALUE

Section titles (optional)

Control type

Label

Font

Arial

Font size

 

13pt

Style

none

Alignment

 

NA

Width

 

800pt

Height

 

NA

 

Font color

 

Dark gray (#666666)

Text labels

Control type

Label

Font

Arial

Font size

 

13pt

Alignment

 

NA

Width

 

188pt

Height

 

NA

 

Font color

 

Dark gray (#666666)

 

Fill color

 

No color

 

Border style

 

No border

ProporationalFont

 

NA

User input fields

Control type

TextBox

CONTROL

PROPERTY

VALUE

 

Width

Variable, depending on max length of input...

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

Height

 

8pt

Font size

 

11pt

 

Font color

 

Black (#000000)

 

Fill color

 

White (#FFFFFF)

 

Border style

 

Light gray (#DDDDDD)

ProportionalFont

 

NA

Buttons

 

(that affect a specific input field)

Control type

  • Button
  • LaunchButton
  • ScriptButton

The button should be placed immediately to the right of the input field it affects. Usually, these

type of buttons are related to making multiple se­ lections, or looking up a value from another

transaction (for example, finding an address).

Top

Same as Top value for the input field

Left

 

+4pt from input field

Width

 

24pt

Height

 

8pt

 

Assign image

Center icon / no text

Icon size

22x22 px

Value description texts (read-only)

Control type

TextBox

These read-only descriptive texts should be placed immediately to the right or underneath

the input field that they describe. Usually, these texts give the user a useful explanation

of a short code they have just entered / selected in an input field.

 

 

CONTROL

PROPERTY

VALUE

 

Width

Variable, depending on max length of text...

  • 60pt (minimum)
  • 188pt (default)
  • 380pt (maximum - on separate row by itself)

Height

 

8pt

Font size

 

11pt

 

Font color

 

Black (#000000)

 

Fill color

 

No color

 

Border style

 

No border

ProportionalFont

 

NA

Buttons related to input fields

Control type

Button

Alignment

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

 

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

 

24pt

Height

 

8pt

 

Fill color

 

No color

 

Border style

 

No border

 

Form - on BasicPage layout

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


Figure 27: Example screenshot in Fiori visual style

 

 

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).

  

 

Figure 28: Two-column layout diagram

 

 

 

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 26:

CONTROL

PROPERTY

VALUE

Container

Control type

UserArea

Section title (optional)

Control type

Label

Top

  • 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

Left

  • Left ContentArea: 20pt
  • Right ContentArea: 608pt

Text labels

Control type

Label

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 20pt
  • Right ContentArea: 608pt

User input fields

Control type

TextBox

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 212pt
  • Right ContentArea: 800pt

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

Read-only status texts

Control type

TextBox

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 404pt
  • Right ContentArea: 992pt

 

 

Form (with FioriPanel)


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

 

 

Figure 29: Two-column layout diagram

 

 

 

 

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 27:

 

CONTROL

PROPERTY

VALUE

Container

Control type

FioriPanel

Section titles (optional)

Control type

Label

Top

  • 1st row: 15pt
  • 2nd row: 25pt
  • 3rd row: 35pt
  • 4th row: 45pt
  • 5th row: 55pt
  • 6th row: 65pt
  • 7th row: 75pt
  • 8th row: 85pt
  • 9th row: 95pt
  • 10th row: 105pt
  • 11th row: 115pt
  • 12th row: 125pt

Left

Left value of FioriPanel +4pt


CONTROL

PROPERTY

VALUE

Text labels

Control type

Label

Top

same as for Section Titles (see above)

Left

Add the following values to the Left value of the FioriPanel...

  • Left ContentArea: +4pt
  • Right ContentArea: +592pt

Input fields

Control type

TextBox

Top

same as for Section Titles (see above)

Left

Add the following values to the Left value of the FioriPanel...

  • Left ContentArea: +196pt
  • Right ContentArea: +784pt

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

Value description texts (read-only)

Control type

TextBox

Top

same as for Section Titles (see above)

Left

Add the following values to the Left value of the FioriPanel...

  • Left ContentArea: +388pt
  • Right ContentArea: +976pt

 

Form - on PopupPage layout

 

 

 

 

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

 

Figure 30: Two-column layout diagram

 

 

 

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 28:

CONTROL

PROPERTY

VALUE

Container

Control type

UserArea

Section title (optional)

Control type

Label

Top

  • 1st row: 0pt
  • 2nd row: 10pt
  • 3rd row: 20pt
  • 4th row: 30pt
  • 5th row: 40pt
  • 6th row: 50pt
  • 7th row: 60pt
  • 8th row: 70pt
  • 9th row: 80pt
  • 10th row: 90pt
  • 11th row: 100pt
  • 12th row: 110pt

Left

  • Left ContentArea: 20pt
  • Right ContentArea: 608pt

CONTROL

PROPERTY

VALUE

Text labels

Control type

Label

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 8pt
  • Right ContentArea: 596pt

User input fields

Control type

TextBox

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 200pt
  • Right ContentArea: 788pt

When 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

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 392pt
  • Right ContentArea: 980pt

 

Form - in TabControl

 

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


 

Figure 31: Two-column layout diagram

 

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 29:

CONTROL

PROPERTY

VALUE

Container

Control type

  • TabItemContent
  • FioriPanel

The measurements and coordinates will be exactly the same, regard­ less

of whether the Form is created directly on top of the TabItemCon­ tent area or is

placed inside of an optional FioriPanel.

Section titles

(optional)

Control type

Label

 

 

 

CONTROL

PROPERTY

VALUE

 

Top

  • 1st row: 0pt
  • 2nd row: 10pt
  • 3rd row: 20pt
  • 4th row: 30pt
  • 5th row: 40pt
  • 6th row: 50pt
  • 7th row: 60pt
  • 8th row: 70pt

Left

 

0pt

Text labels

Control type

Label

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 0pt
  • Right ContentArea: 580pt

Input fields

Control type

TextBox

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 192pt
  • Right ContentArea: 772pt

When more than one input field appears on the same row, maintain a 4px / 5pt

gap between input fields

Value descrip­ tion texts (read- only)

Control type

TextBox

Top

same as for Section Titles (see above)

Left

  • Left ContentArea: 384pt
  • Right ContentArea: 964pt

 

 SystemMessage

  

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


Figure 32: Information message


SystemMessage - on PopupPage layout

 

 

 

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


Figure 33: Layout diagram

 

 Table 30:

CONTROL

PROPERTY

VALUE

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

It's impossible to directly select the Image control or to stretch / re­ size / change the embedded

icon. Instead, you must resize the TextBox or Label that the image is inside of.

Top

0pt

Left

0pt

Width

24pt

Height

8pt

Message texts

Control type

TextBox

Each 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 individ­ ually for each of them.

Top

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

Left

32pt

Width

544pt

Height

8pt

FontSize

12pt

Font color

Black

Background color

No color

Footer

Control type

Image

Image file

Fiori_Popup_HalfWidth.png

Stretch

Stretch

Top

28pt

 

 

 

 

CONTROL

PROPERTY

VALUE

 

Left

0pt

Width

576pt

Height

10pt

Buttons

Control type

Button

Top

28pt

Left

  • 1st button: 496pt
  • 2nd button: 416pt
  • 3rd button: 336pt

Width

80pt

Height

9pt

Font color

White

Background color

No color

 

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 34: 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 35: SAPGUI GridView

 

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


 

Figure 36: SAPGUI TableTreeView

 

Buttons 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.

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 31:

CONTROL

PROPERTY

VALUE

Title (optional)

Control type

Label

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 ti­ tle bar directly above the Table.

CONTROL

PROPERTY

VALUE

 

Height

8pt

Font color

#666666

FontSize

14pt

Alignment

NA

Buttons (optional)

Control type

Button, LaunchButton or ScriptButton

Width

24pt

Height

8pt

Alignment

Icon only

Assign image

Center / no label

Icon size

(determined by size of source image file)

22x22 px

Icon background color

Transparent (#00FFFFFF)

Fill color

No color

Border style

No border

Dividers between but­ tons

(optional)

Control type

Image

Image file

Fiori_Divider_Content_24x24

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

Width / Height / Left / Top

Same as for buttons

Table - on BasicPage layout

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

Figure 37: Example screenshot in Fiori visual style

 

 Table 32:

CONTROL

PROPERTY

VALUE

Title (optional)

Control type

Label

Top

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

This is a larger offset than for most other types of content. This is an in­ tentional

design decision to ensure the Title and Buttons are under­ stood to relate only to the

Table underneath and are not related to any other content shown above the Table.

Left

  • Left ContentArea: 16pt
  • Right ContentArea: 608pt

Buttons (optional)

Control type

Button, LaunchButton or ScriptButton

Top

  • At top of page: 23pt
  • Below other content: +8pt below bottom edge of previous content

 

 

CONTROL

PROPERTY

VALUE

 

Left

  • 1st button: 568pt

(left ContentArea)

  • 2nd button: 544pt
  • 3rd button: 520pt
  • 4th button: 496pt
  • 5th button: 472pt
  • 6th button: 432pt
  • 7th button: 408pt
  • 8th button: 384pt
  • 9th button: 360pt
  • 10th button: 336pt
  • 11th button: 312pt
  • 12th button: 288pt

Left

  • 1st button: 1160pt

(right ContentArea)

  • 2nd button: 1136pt
  • 3rd button: 1112pt
  • 4th button: 1088pt
  • 5th button: 1064pt
  • 6th button: 1040pt
  • 7th button: 1016pt
  • 8th button: 992pt
  • 9th button: 968pt
  • 10th button: 944pt
  • 11th button: 920pt
  • 12th button: 896pt

Content

Control type

  • Calendar
  • GridView
  • TableView
  • TableTreeView

Top

  • No title / no buttons: 23pt
  • Buttons, but no title: 30pt
  • If title is implemented as the "Title" property: 23pt
  • If title is a separate "Label" control: 30pt

Left

  • Left ContentArea: 16pt
  • Right ContentArea: 608pt

Width

  • Half-width: 576pt
  • Full-width: 1168pt

Height

Variable, depending on amount of content to be shown


Table - on PopupPage layout

 

 

 

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

 

Figure 38: Example screenshot in Fiori visual style

 

 

 

 

Table 33:

 

CONTROL

PROPERTY

VALUE

Title

(optional)

Control type

Label

 

CONTROL

PROPERTY

VALUE

 

Top

  • At top of page: 8pt
  • Below other content: +10pt below bottom edge of previous content

This is a larger offset than for most other types of content. This is an in­ tentional

design decision to ensure the Title and Buttons are under­ stood to relate only to the

Table underneath and are not related to any other content shown above the Table.

Left

  • Left ContentArea: 8pt
  • Right ContentArea: 592pt

Buttons (optional)

Control type

Button, LaunchButton or ScriptButton

Top

Same as for Title

Left

  • 1st button: 552px

(left ContentArea)

  • 2nd button: 528px
  • 3rd button: 504px
  • 4th button: 480px
  • 5th button: 456px
  • 6th button: 432px
  • 7th button: 408px
  • 8th button: 384px
  • 9th button: 360px
  • 10th button: 336px
  • 11th button: 312px
  • 12th button: 288px
  • 1st button: 552pt
  • 2nd button: 528pt
  • 3rd button: 504pt
  • 4th button: 480pt
  • 5th button: 456pt
  • 6th button: 432pt
  • 7th button: 408pt
  • 8th button: 384pt
  • 9th button: 360pt
  • 10th button: 336pt
  • 11th button: 312pt
  • 12th button: 288pt

 

CONTROL

PROPERTY

VALUE

 

Left

  • 1st button: 1136px

(right ContentArea)

  • 2nd button: 1112px
  • 3rd button: 1088px
  • 4th button: 1064px
  • 5th button: 1040px
  • 6th button: 1016px
  • 7th button: 992px
  • 8th button: 968px
  • 9th button: 944px
  • 10th button: 920px
  • 11th button: 896px
  • 12th button: 872px
  • 1st button: 1136pt
  • 2nd button: 1112pt
  • 3rd button: 1088pt
  • 4th button: 1064pt
  • 5th button: 1040pt
  • 6th button: 1016pt
  • 7th button: 992pt
  • 8th button: 968pt
  • 9th button: 944pt
  • 10th button: 920pt
  • 11th button: 896pt
  • 12th button: 872pt

Content

Control type

  • Calendar
  • GridView
  • TableView
  • TableTreeView

Top

  • 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

Width

  • Half-width: 576pt
  • Full-width: 1168pt

Height

Variable, depending on amount of content to be shown

 

Table - inside a TabControl

 

 

 

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

 

Figure 39: Two-column layout diagram

 

 

 

 

 

Table 34:

 

CONTROL

PROPERTY

VALUE

Title

(optional)

Control type

Label

 

 

CONTROL

PROPERTY

VALUE

 

Top

  • At top of page: 0pt
  • Below other content: +10pt below bottom edge of previous content

This is a larger offset than for most other types of content. This is an in­ tentional

design decision to ensure the Title and Buttons are under­ stood to relate only to

the Table underneath and are not related to any other content shown above the Table.

Left

  • Left ContentArea: 16pt
  • Right ContentArea: 584pt

Buttons (optional)

Control type

Button, LaunchButton or ScriptButton

Top

0pt

Left

  • 1st button: 544pt

(left ContentArea)

  • 2nd button: 520pt
  • 3rd button: 496pt
  • 4th button: 472pt
  • 5th button: 448pt
  • 6th button: 424pt
  • 7th button: 400pt
  • 8th button: 376pt
  • 9th button: 352pt
  • 10th button: 328pt
  • 11th button: 304pt
  • 12th button: 280pt

Left

  • 1st button: 1112pt

(right ContentArea)

  • 2nd button: 1088pt
  • 3rd button: 1064pt
  • 4th button: 1040pt
  • 5th button: 1016pt
  • 6th button: 992pt
  • 7th button: 968pt
  • 8th button: 944pt
  • 9th button: 920pt
  • 10th button: 896pt
  • 11th button: 872pt
  • 12th button: 848pt

Content

Control type

  • Calendar
  • GridView
  • TableView
  • TableTreeView

CONTROL

PROPERTY

VALUE

 

Top

  • 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

Left

  • Left ContentArea: 16pt
  • Right ContentArea: 584pt

Width

  • Half-width: 552pt
  • Full-width: 1120pt

Height

Variable, depending on content

 

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.

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).

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.

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.

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?).


Checkbox list (with FioriPanel) - on BasicPage layout

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


 

Figure 40: Example of a checkbox list inside a FioriPanel

 

 Table 35:

 

CONTROL

PROPERTY

VALUE

Container

Control type

FioriPanel

(half-width)

Checkboxes

Control type

Checkbox

 

 

CONTROL

PROPERTY

VALUE

 

Top

Add the following values to the TOP value of the FioriPanel title (label)...

  • 1st row: +15pt
  • 2nd row: +25pt
  • 3rd row: +35pt
  • 4th row: +45pt
  • 5th row: +55pt
  • 6th row: +65pt
  • 7th row: +75pt
  • 8th row: +85pt
  • 9th row: +95pt
  • 10th row: +105pt
  • 11th row: +115pt
  • 12th row: +125pt

Left

Add the following values to the LEFT value of the FioriPanel title (label)...

  • Left column: +32pt
  • Right column: +304pt

Height

8pt

Width

240pt

 

Image

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

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.

 

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).

Label - Default Values

 

Table 36:

PROPERTY

VALUE

Font

Arial

Size

12pt

Style

None

Alignment

Left

Font color

Dark gray (#666666)

Fill color

No color

ProporationalFont

True

FontFamily

Arial

FontSize

13pt

FontWeight

Normal

FontStyle

Normal

TextDecorations

None

TextAlignment

Left

 

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.

 

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.

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.

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.


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.

TextBox

- Default Values

 

Table 37: TextBox used as an input field

PROPERTY

VALUE

Width

Depending on max length of text

Height

8pt

Font color

Black (#000000)

Fill color

White (#FFFFFF)

Border style

Light gray (#DDDDDD)

FontSize

11pt

 

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

PROPERTY

VALUE

Width

Depending on max length of text

Height

24px

Font color

Dark gray (#666666)

Fill color

No color

Border style

No border

 

Formatting options

 

Read only

FontSize

 

11pt

 

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

PROPERTY

VALUE

Tooltip

none

Font color

No color

Fill color

#FFFFFF

Border style

#FFFFFF

Formatting options

Read only

 

 

 

PROPERTY

VALUE

FontSize

NaN

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.)

 

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 Samples

  

Any 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.

 

 

 

Accessibility

 

The 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 Language

  

As 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.

 

 The 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).

 

 

 

 

 

 

 

 

 

 

 

 


  • No labels