Skip to end of metadata
Go to start of metadata

 Fiori-Inspired General Concepts


 


 Last Update: Regina Sheynblat

Error rendering macro 'page-info'

com.atlassian.confluence.user.ConfluenceUserPreferences.getDateFormatter(Lcom/atlassian/confluence/core/FormatSettingsManager;)Lcom/atlassian/confluence/core/DateFormatter;

Fiori-Inspired General Concepts


Guides - Updated on

Error rendering macro 'page-info'

com.atlassian.confluence.user.ConfluenceUserPreferences.getDateFormatter(Lcom/atlassian/confluence/core/FormatSettingsManager;)Lcom/atlassian/confluence/core/DateFormatter;

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)

 

PropertyValue
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         ControlTypeTextBox 
 Top15pt 
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

 

 

PropertyValueValueVvvv
width1200pt
height15pt

 

  • 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

 

 

 

 

 

 

 

 

PropertyValue
width1200pt
height15pt

 

 

 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 

 

 

SequenceAction
1111Execute
2SaveSave
 Cancel
 Delete
 Copy
 Next
Export 
Search Variant 
Workflow 
 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

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

 

 

  Resources

   Fiori Misc.zip Gray 34x34.zip

 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