Page tree
Skip to end of metadata
Go to start of metadata

 Fiori-Inspired General Concepts


 Last Update: Regina Sheynblat

Error rendering macro 'page-info'


Fiori-Inspired General Concepts

Guides - Updated on

Error rendering macro 'page-info'



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)




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


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


Font   size

Font color

Table titles


 Dark gray (#666666)

Tab labels

not editable

 Dark gray (#666666)

System message texts


 Black (#000000)

PopupPage titles

not editable

 White (#FFFFFF)

PopupPage Footer buttons


 White (#FFFFFF)

Page titles


 Dark gray (#666666)

Launchpad Tile - titles


 Black (#000000)

Launchpad Tile - subtext


 Dark gray (#666666)

Launchpad section titles


 White (#FFFFFF)

Form - value descriptions (read-only texts)


 Black (#000000)

Form - section titles


 Dark gray (#666666)

Form - input fields


 Black (#000000)

Form - field labels


 Dark gray (#666666)

Footer buttons


 White (#FFFFFF)

FioriPanel titles


 Dark gray (#666666)

CollapsibleContainer titles


 Dark gray (#666666)


 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




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 




Tip : Make the background of the Status Bar transparent and the texts on it readable




Background   image






Background   image





Center   / Center

Transparency effect         ControlTypeTextBox 
Left 0pt 
Width 1200pt 

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





  • 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












 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)




Search Variant 
 10Dashboard WF Log 
11 Follow-on-Documents 
12 Print 
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   type


Image   file





Center / Cente

Send   backward

 Send to  back this ensures that this control   appears BEHIND all other content


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








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...
  • 1st = 988pt
  • 2nd   = 852pt   
  •  3rd   = 716pt   
  • 4th   = 580pt   
  • 5th   = 444pt   
  • 6th   = 308pt   
  • 7th   =   172pt
 Width 8pt
 Height 13pt




   Fiori Gray

 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









  • No labels