Last Update: Regina Sheynblat

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)

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.

 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

 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)

Sequence 

  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.

  Resources

   Fiori Misc.zip Gray 34x34.zip

 Extract the  mages from the zip files.