This article provides an overview of the topics that have been added or changed with the guideline version 1.54. The content is based on the controls available with SAPUI5 version 1.54.

Foundation

Typography New!

This article has been fully revised to describe “72”, SAP’s proprietary typeface that is now part of SAP Fiori.

For more information, see Typography.

General Concepts

Formatting Data

SAPUI5 now provides a formatter for rendering comma-separated lists correctly in different locales.

For more information, see Formatting Data – Comma-Separated Lists.

Form Field Validation

Additional section on error prevention.

For more information, see Form Field Validation.

Manage Objects

To distinguish more clearly between the labels of the triggering button and the finalizing action, the column Label of Finalizing Action was added to the table under Naming Guidelines.

For more information, see Manage Objects – Naming Guidelines.

Message Handling

Updated guidance on:

• Best practices for preventing error situations
• Best practices for visualizing errors
• When not to use the message popover control (in dialogs, popovers, or partial editing areas)

For more information, see Message Handling.

Layouts, Floorplans & Frameworks

Layouts

Dynamic Page Layout

• Dynamic page can now also be used for the object page and initial page (replacing the snapping header)
• The width for global actions is no longer limited.

For more information, see Dynamic Page (Layout + SAP Fiori Elements).

Floorplans

General: Floorplan Implementations in SAP Fiori Elements

As of release 1.54, the following floorplan articles contain only general guidelines for all implementations:

• List report floorplan
• Object page floorplan
• Worklist floorplan

These guidelines also apply for implementations using SAP Fiori elements. However, the exact features supported by the SAP Fiori elements implementation are no longer included in the design guidelines.

For the latest information on SAP Fiori elements, see the documentation and SAP Community wiki.

You can still refer to the corresponding floorplan articles for guideline version 1.52, which include the main features of the SAP Fiori elements implementation. However, this content will no longer be updated.

Analytical List Page

• Setting the visual filter bar as the default is no longer mandatory.
• There doesn’t always have to be a 1:1 relationship between visual and compact filters:
  a) Every visual filter must have a corresponding compact filter.
  b) You don’t need a visual filter for every compact filter (there can be a reduced set of visual filters)
• Synchronization between visual filters is mandatory.

For more information, see Analytical List Page.

Initial Page Floorplan

As of SAPUI5 version 1.54 the initial page layout can be implemented using the object page with the dynamic header. We recommend using this layout for all new apps.

If you’ve already started using the former full screen layout, you can continue to do so for release 1.54. With guideline version 1.56, the former initial page layout will be deprecated.

For more information, see Initial Page Floorplan – Structure.

Object Page Floorplan

The object page now uses the dynamic page header instead of the snapping header.

For more information, see Object Page Floorplan – Header.

Wizard Floorplan

There is now a visual indicator for optional steps.

For more information, see Wizard Floorplan.

Tool Development

Info Label  New!

The info label is a non-interactive, text-based control for highlighting a characteristic of an object or item (such as a state, type, quantity, or condition). You can use it in tables, headers, custom tiles, and display forms.

Note: This control has been designed specifically for the tool landscape for the SAP Cloud Platform. It is not intended for use in regular SAP Fiori applications.

For more information, see Info Label.

UI Elements

Analytical Table (ALV)

• New sections have been added for:
  • Context menus in the analytical table (see Behavior and Interaction and Guidelines)
  • The use of tables in object pages
• Displaying errors: Use additional row highlighting to draw attention to modified items with errors (see Item States)

For more information, see Analytical Table (ALV).

Chart – Reference Lines

All images have been updated to reflect the new visual design of the reference lines labels.

For more information, see Chart – Reference Lines.

Checkbox

• Wrapping: Long checkbox labels can now wrap within the content holder.
• Forms: A new “display only” property has been added for forms.
• Usage: Checkboxes always require confirmation before they take effect. This has now been made clearer in the article.

For more information, see Checkbox.

Choosing the Correct Chart Type

For each chart type, you can now also see the relevant charts (new “Use” row in each section).

For more information, see Choosing the Correct Chart Type.

Date Picker

App teams can now set the predefined focus date “today” to another date. This can help reduce the number of clicks needed to create events.

For more information, see Date Picker.

Dialog

It is now mandatory to emphasize the main action in the footer of a dialog. However, you should never emphasize Cancel.

For more information, see Dialog.

Form / Simple Form

• A new Error Prevention section has been added under Guidelines.
• Smart forms are no longer included (also see Smart Controls below).

For more information, see Form / Simple Form.

Grid Table

• New sections have been added for:
  • Context menus in the grid table (see Behavior and Interaction and Guidelines)
  • The use of tables in object pages
• Text examples for empty tables have been updated.
• Displaying errors: Use additional row highlighting to draw attention to modified items with errors (see Item States).

For more information, see Grid Table.

Group Feed Component

To avoid confusion between the similar group feed and timeline controls, the two controls are now covered in separate guideline articles:

Group Feed Component (new article): Social timeline with built-in SAP Jam integration.

Timeline (existing article): Flexible timeline control that can also be configured to include collobaration features, but does not come with collaboration platform integration out of the box.

Icon Tab Bar

Users working in a desktop environment can now reorder tabs at runtime using drag and drop. This works directly on the tab bar and in the overflow menu.

For more information, see Icon Tab Bar – Changing the Order of Tabs.

Input Field

• Types: Examples for usage of mask input were added.
• Properties: “Required” property was added.
• Guidelines: Use a maximum of 4 columns.

For more information, see Input Field.

List

• You can now offer a context menu for each row in the list.
• Drag and drop is now supported for lists.

For more information, see List.

Mask Input

• Components: Additional clarification on the use of mask input vs. label and placeholder texts.
• Behavior and Interaction: Updated image gallery for entering text.

For more information, see Mask Input.

Menu Button

• New section on width and truncation.
• Examples were added for different menu button styles (positive, negative, emphasised, transparent, ghost).

For more information, see Menu Button.

Message Page

You can now apply rich text formatting to the message text and description. This allows you to give users more comprehensive information in an easily consumable format (for example, in a bulleted list).

For more information, see Message Page.

Micro Chart

• The article now includes more information on choosing the correct chart type.
• The two options for handling responsiveness (automatic or using the size property) are explained in more detail.

For more information, see Micro Chart.

Micro Process Flow  New!

The micro process flow control enables you to visualize the state of individual items in a linear workflow, and is suitable for embedding into a list or a table.

For more information, see Micro Process Flow.

Object Display Components

• The object status now has a click event, and can be used as a link.
• The “title” property for the object status should no longer be used.
• References to the (deprecated) object header have been removed. This has been replaced by the dynamic page header.

For more information, see Object Display Components.

Planning Calendar

• Drag and drop is now enabled for the planning calendar.
• You can now configure the header to snap to top when the user scrolls down.

For more information, see Planning Calendar.

Popover

The Layout section now includes information about the different placement types and the modal mode of the popover.

For more information, see Popover.

Progress Indicator

The Usage section has been enhanced.

For more information, see Progress Indicator.

Radial Micro Chart

The Usage section now goes into more detail on when to use the radial micro chart, and when a progress indicator or status indicator would be better.

For more information, see Radial Micro Chart.

Responsive Table

• New sections have been added for:
  • Context menus in the responsive table (see Behavior and Interaction and Guidelines)
  • Drag and drop (see Behavior and Interaction and Guidelines)
  • The use of tables in object pages
• Displaying errors: Use additional row highlighting to draw attention to modified items with errors (see Item States)
• Empty tables: Examples for “no data” texts have been updated (see Content Formatting).
• Filtering: Addtional developer hint about the new list formatter that can be used for the filter info bar (see View Settings – Sort, Filter, Group)
• Grouping: A standard text was defined for blank groups: (Not Available). See View Settings – Sort, Filter, Group.

For more information, see Responsive Table.

Rich Text Editor

• The order of the actions in the toolbar of the rich text editor has changed.
• Users can now insert, edit, and remove links.
• Users can now insert and edit images.
• The interaction for applying text and background colors has been enhanced.

For more information, see Rich Text Editor.

Smart Controls

As of guideline release 1.54, the SAP Fiori Design Guidelines contain only general guidelines for all implementations. These guidelines also apply for implementations using smart controls.

You can still use the smart controls, but the exact features supported by the smart controls will no longer be updated in the design guidelines.

Status Indicator

• A new Layout section was added, describing the use of either a shape or a shape and label.
• Responsiveness: Examples were added for the different sizes (S, M, L, XL).
• The Types section has been enhanced and improved.
• Guidelines:
  • The status indicator can also be embedded in a micro process flow.
  • Additional guidance on creating new shapes
  • Guidance on the animation duration.

For more information, see Status Indicator.

Step Input

• You can now show a description or unit next to the input field.
• You can now adjust the calculation mode for larger steps (available via the keyboard Page Up and Page Down keys).

For more information, see Step Input.

Switch

Usage: Better differentiation between the usage of the switch and checkbox controls

Time Picker

• You can now set a predefined time as the initial value – users can always overwrite it manually.
• It is now possible to switch off the mask input. However, this only makes sense for rare use cases (such as time formatting in Korea).

For more information, see Time Picker.

Toolbar Overview

• Actions and Layout: Updated examples for placement of actions
• Styles: New toolbar style property.

For more information, see Toolbar Overview.

Tree

• New sections have been added for:
  • Context menus in the tree (see Behavior and Interaction and Guidelines)
  • Drag and drop (see Behavior and Interaction and Guidelines)
• Displaying errors: Use additional row highlighting to draw attention to modified items with errors (see Item States).

For more information, see Tree.

Tree Table

New sections have been added for:

• Context menus in the tree table (see Behavior and Interaction and Guidelines)
• The use of tables in object pages

For more information, see Tree Table.

Value Help Dialog

• Usage: Don’t use the value help dialog if there are only a few selection options.
• Components: Updated information on the basic search and advanced search.

For more information, see Value Help Dialog.

Variant Management

A new Components section was added, including more detailed explanations of the different types of views (default view, standard filters, favorite views, public views).

For more information, see Variant Management.

Services and Resources

Design Stencils

“72”, SAP’s proprietary typeface, is now part of the (internal) stencil download packages for Axure RP and PowerPoint. To install the “72” typeface, see the installation steps.

For more information, see Design Stencils.