Fiori-Inspired General Concepts
Fiori-Inspired General Concepts
Guides - Updated on
Intro
The followoing will describe general concepts that are to be used across all SAP Screen Personas 3.0 Fiori like design.
Screen Size Optimization
The ACTUAL usable screen space for displaying content in a Screen Personas flavor at this resolution is roughly:
- Personas 3.0 = 1248px x 624px (1200pt x 192pt)
Property | Value |
---|---|
width | 1200pt |
height | 192pt |
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.
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.
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.
Backstepping
Backstepping is the act of going backwards in a user scenario.
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.
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).Iconography
- Icons for buttons are always 2px smaller (both vertically and horizontally) than the buttons they're placed in.
- Icons should be replace by their corresponding Unification GUI Icon available in the assets.
- Assets are named according to the IconId in the Advanced Property Editor
Text & Typography
Default Font: Arial - style "Normal"
The following SAP Screen Personas flavor is inspired by the Fiori List Report Floorplan.
Font Size: 14pt, 13pt, 11pt ( Except: Launchpad)
Font Color: Black, White and Dark Gray
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.
Usage | Font size | Font color |
---|---|---|
Table titles | 14pt | Dark gray (#666666) |
Tab labels | not editable | Dark gray (#666666) |
System message texts | 13pt | Black (#000000) |
PopupPage titles | not editable | White (#FFFFFF) |
PopupPage Footer buttons | 12pt | White (#FFFFFF) |
Page titles | 14pt | Dark gray (#666666) |
Launchpad Tile - titles | 12pt | Black (#000000) |
Launchpad Tile - subtext | 12pt | Dark gray (#666666) |
Launchpad section titles | 20pt | White (#FFFFFF) |
Form - value descriptions (read-only texts) | 11pt | Black (#000000) |
Form - section titles | 14pt | Dark gray (#666666) |
Form - input fields | 11pt | Black (#000000) |
Form - field labels | 13pt | Dark gray (#666666) |
Footer buttons | 12pt | White (#FFFFFF) |
FioriPanel titles | 14pt | Dark gray (#666666) |
CollapsibleContainer titles | 13pt | Dark gray (#666666) |
Labels
All Labels must be followed by a colon:
In Forms, if the labels is above the input field, the label must left aligned. (in case of 3 column layout (or 2 column layout for tablets) the label may be above the input field):
In Forms, if the label is in front of the input field, the label must be right aligned
Basic Layout
Grid
This is a basic grid in order to create a consistent aligmnet throughout the transaction. Due to the limited functionality of SSP this is far from a perfect solution.
Column Grid
Baseline Grid
Important: Remeber to add the 30pt (Title- and Toolbar) from the top to each line.
Single Column Layout
Two Column Layout
Images
Tip : Make the background of the Status Bar transparent and the texts on it readable
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 (control appears BEHIND all other content) |
Basic Page - Header
Property | ValueValueVvvv |
---|---|
width | 1200pt |
height | 15pt |
Primary & Secondary Actions are placed in the toolbar. There should be only one Primary Action.
- All elements are aligned to the right.
- Width of the elements should defined by the amount of characters.
- Elements should not be aligned to the baseline grid
- Padding between actions is similar to the gutter: 24pt
- Margin right and left is 12pt, as in the column grid
- Actions are text only
Property | Value |
---|---|
width | 1200pt |
height | 15pt |
Primary Action
- There should only be a single Primary Action.
- The Primary Action is the first Action on the Right
Secondary Actions
- Secondary Actions are text-links (visually)
Sequence
Sequence | Action |
---|---|
1111 | Execute |
2 | SaveSave |
3 | Cancel |
4 | Delete |
5 | Copy |
6 | Next |
7 | Export |
8 | Search Variant |
9 | Workflow |
10 | Dashboard WF Log |
11 | Follow-on-Documents |
12 | |
13 | Payment Log |
14 | Payment List |
15 | Proposal Log |
16 | Proposal List |
17 | Edit Proposal |
18 | Create Proposal |
19 | Create Report |
20 | DME Administration |
Basic Page - Footer Bar
The Footer element of the BasicPage layout is a container for grouping the most important action buttons together.
It always appears at the bottom of the page, just below the ContentArea
It's impossible to relocate the existing Toolbars from the SAP GUI. So the Footer background must be created from an imported Image control placed directly on the UserArea. The original Toolbars from SAP GUI are to be hidden. Any buttons from the Toolbars that are needed in the final design should be moved to bottom of screen before hiding the original Toolbars.
The controls listed in the following table are to be placed directly on the UserArea. Top and Left coordinates are given in relation to the UserArea.
CONTROL | PROPERTY | VALUE |
Background
| Control type | Image |
Image file | Fiori_Footer_NoMenuButton.png | |
Stretch | Stretch | |
Alignment | Center / Cente | |
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 | |
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 | |
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 |
Image file | Fiori_Divider_Footer_8x40.png | |
Stretch | Stretch | |
Alignment | Center / Center | |
Bring forward | Bring to front | |
Top | Same as TOP value for the Footer background | |
Left | Dividers are added as needed, between buttons or groups of buttons...
| |
Width | 8pt | |
Height | 13pt |
Resources
Extract the mages from the zip files.
Images inlcuded in the Fiori Misc zip file: Fiori_BasicPage_Hdr, Fiori_Divider_Footer, Fiori_Footer, Fiori_Gradient, Fiori_LaunchPad_Hdr, Fiori_Popup, Fiori_White_Square