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

Foundation

Animation  

With SAPUI5 release 1.48, the Animation article is deprecated. Please see the new Motion Design article instead.

Motion Design  New!

This article describes the new motion design language for SAP Fiori 2.0, and replaces the former Animation article.
Check out our new principles for animations and micro interactions.

For more information, see Motion Design.

General Concepts

SAP Fiori Launchpad

Overview

Images have been replaced in order to show navigation menu icon and new links area.
Images of the Me Area have been adapted to reflect the latest UI.

For more information, see SAP Fiori Launchpad – Overview.

App Finder

The interaction for adding and removing tiles has changed. There are no OK and Cancel buttons any more. Users can add and remove tiles directly using the checkbox in the Add to Groups popover.

For more information, see App Finder.

Home Page

• Updates to the Behavior and Interaction section.
• New sections for link area personalization and tab personalization.
• Drag & drop support for apps in the tab bar.
• Numerous images have been updated.

For more information, see SAP Fiori Launchpad Home Page.

Me Area  New!

The Me Area is now described in more detail in a dedicated article. It explains the structure of the Me Area, its main components and functions, and the options for app designers.

For more information, see Me Area.

Shell Bar

New guidelines have been added for the page title.
There is a new section about optional actions in the shell bar. The shell bar can now offer more actions in the top right corner.
We have added more information about the navigation hierarchy in the navigation menu, with examples for each floorplan.

For more information, see Launchpad Shell Bar.

Tile

A new Visual Representation section was added under Layout to explain the difference between tiles and links.

For more information, see Tile.

Other General Concepts

Draft Handling

We simplified the Cancel popover message.

For more information, see Draft Handling.

Manage Objects – Create, Edit, Delete

A new section explains the influence of the different modes (create, edit, display, copy) on the texts for the triggering action, object name, and the title in the shell bar.

For more information, see Manage Objects – Create, Edit, Delete.

Message Handling

Updated Data Loss section, including quick confirmation scenarios.

For more information, see Message Handling.

SAP Fiori Elements, Floorplans & Frameworks

Overview – Layouts, Floorplans, and Frameworks

The article has been restructured to make it clearer and easier to understand, and user feedback has been incorporated.

For more information, see Overview – Layouts, Floorplans, and Frameworks.

Layouts

Dynamic Page Layout

• As of release 1.48, the dynamic page layout replaces the full screen layout. The full screen layout has been deprecated.
• The page can now be opened in collapsed mode. This makes sense for cases where filters are already set and content is shown directly. This is often the case in the overview page floorplan, for example.
• The dynamic page layout is responsive, and has been optimized for use within the flexible column layout. Each column can contain its own dynamic page layout with a different floorplan, based on the use case.
• We have made further enhancements to the guideline article (feedback incorporated, changed wording).

For more information, see Dynamic Page Layout.

Flexible Column Layout

The following terms were changed:

• “Panel” has been replaced by “column”
• “Toggle” has been replaced by “layout arrow”

Additional guidance has been added to the section Two Columns (Master-Detail Mode).

For more information, see Flexible Column Layout.

Full Screen Layout

As of SAPUI5 release 1.48, the full screen layout is deprecated. Please use the dynamic page layout instead for all upcoming applications.

Split-Screen Layout / Master List

As of SAPUI5 release 1.48, the split screen layout is deprecated.

Freestyle applications

Please use the flexible column layout instead for all upcoming freestyle applications, combined with one or more dynamic pages. Both parts are fully responsive and offer additional features, such as a 3-column mode for showing further details, and the option to collapse/expand the header. They can be used in all floorplans.

SAP Fiori elements

The 2-column layout is not yet supported for SAP Fiori elements.

Floorplans

Analytical List Page  New!

Visual filter bar:

• VizFrame charts have been replaced by interactive charts, which overcome the limitations of the VizFrame charts.
• Value help is now available for selecting values other than the top and bottom three, without switching to the compact filter.

ALP now consumes the standard analytical card control.

For more information, see Analytical List Page.

Introduction to SAP Fiori Elements

A new section has been added for mandatory adjustments to default texts.

For more information, see Introduction to SAP Fiori Elements.

List Report

• The usage section has been adapted (additional guidance related to tabs and segmented buttons).
• “Sort by” with object status: Information has been added on what happens automatically and what the app has to do.
• Information was added about using the SAP Fiori element without variant management (including app-specific title texts).
• The navigation indicator is now also available with tree tables.
• Information was added about multiple views in the SAP Fiori element (segmented button, tabs)
• Support for the progress indicator is now also available in UI tables in the SAP Fiori element.
• The article now covers support for break-outs in tree tables.
• Information was added about the default behavior of the expand/collapse state of the header content in the SAP Fiori element.
• A table has been added to the end of the article comparing the features of the freestyle list report and the SAP Fiori element.

For more information, see List Report (Floorplan + SAP Fiori Element).

Object Page

A visual design section was added at the end of the article.

For more information, see Object Page (Floorplan + SAP Fiori Element).

Overview Page

• The counter information (for example, Showing 3 of 35) in list cards, table cards, and bar chart list cards has moved from the footer area into the header area. This has been done to better align it with the navigation to all items. As a result, the title in the header area is able to wrap to a maximum of 3 lines.
• The placeholder card within object stream has a new text: See all [total] [items] in the “[app name]” app, where [items] must be replaced by a more specific text.
• Users can now share variants.
• Cards can be refreshed at predefined intervals.
• The overview page now consumes the collapsed mode of the dynamic page by default.

For more information, see Overview Page (SAP Fiori Element).

Frameworks

Analysis Path Framework

Users now have the option to view and also select hierarchical data in a tree table, where data is structured in rows and columns and grouped into nodes.

For more information, see Analysis Path Framework.

Tool Development

Tool Header

The article has been updated to cover a new horizontal navigation variant that is available with release 1.48.

• New Navigation Container section under Components.
• New Horizontal Navigation section under Guidelines.

For more information, see Tool Header.

UI Elements

Action Sheet

Usage guidelines have been added.

For more information, see Action Sheet.

Analytical Card

A new property is available for the scatter plot chart: You can now change the marker size (bubble size).

For more information, see Analytical Card.

Analytical Table (ALV)

The analytical table now supports the following additional features:

• Progress indicator
• Rating indicator
• Row highlighting

For more information, see Analytical Table (ALV).

Dialog  

The usage section was updated: Use a dialog only if the object has a small number of fields. If you have more than 10 fields, use an object page instead.

For more information, see Dialog.

Dynamic Date  New!

The dynamic date is a smart control which is currently only available in the smart filter bar. On input, it offers the user suggestions for fixed or dynamic dates. It also contains a value help control for choosing between different time periods and defining them further.

For more information, see Dynamic Date.

Dynamic Side Content

Usage of the dynamic side content control was adapted:

• The option to implement dynamic side content above the main content was removed.
• Usage of the dynamic side content in the list report floorplan was added.
• The dynamic side content control is currently not available in SAP Fiori elements.
• The dynamic side content control should not be used for master-detail scenarios.

For more information, see Dynamic Side Content.

Feed and Notes

A new Styles section on divider lines between feed posts has been added.

For more information, see Feed and Notes.

Form

All images have been updated. Form field labels are now followed by a colon again by default.

For more information, see Form.

Form Field Validation

All images have been updated. Form field labels are now followed by a colon again by default.

For more information, see Form Field Validation.

Grid Table

The grid table now supports the following additional features:

• Progress indicator
• Rating indicator
• Row highlighting

For more information, see Grid Table.

Label

All images have been updated. Form field labels are now followed by a colon again by default.

For more information, see Label.

Line Micro Chart  New!

The line micro chart is a basic type of chart, which displays information as a series of data points connected by a line. The chart is often used to visualize a trend over time.

For more information, see Line Micro Chart.

P13n Dialog

The section Behavior and Interaction – Filter – Option has been updated:

• Corrected operators
• Operators added for boolean values
• Additonal information about operators for “exclude” values

For more information, see P13n Dialog.

PDF Viewer  New!

The PDF Viewer allows you to display and download PDF files consistently across all platforms and devices, either within a modal dialog or embedded directly in your page.

For more information, see PDF Viewer.

Process Flow

• The order of the zooming buttons has been corrected.
• A Highlight Path section has been added. In particular, highlighted paths should never be combined with selected paths.
• More guidance and examples have been added for aggregated notes.

For more information, see Process Flow.

Responsive Table

Guidelines for several object identifiers have been added.

For more information, see Responsive Table.

Rich Text Editor  New!

The rich text editor is a complex control for data input and editing. It allows users to format the text and insert different types of elements within the text. Since SAPUI5 version 1.48, the rich text editor can also use a toolbar built with SAPUI5 controls (as well as with the native TinyMCE toolbar).

For more information, see Rich Text Editor.

Select Dialog

A new List Options section was added.

For more information, see Select Dialog.

Smart Chart

• Description of the drilldown feature under Components was adapted.
• Various images have been updated.

For more information, see Smart Chart.

Text Area

A new text area counter allows you to limit the number of symbols allowed within the text area.

For more information, see Text Area.

Timeline

Major updates were made to the control and guideline with release 1.48.

Enhanced grouping functionality

• New grouping functions (group by day, week, month, or quarter; custom grouping function)
• Grouping works for all layouts (horizontal, vertical, single- and double-sided)
• Groups can be expanded or collapsed
• Infinite scrolling is now supported (users no longer need to click a button to load more posts)

Filtering: Time range filter added

• Full filter and sorting support for model binding
• Double-sided timeline for both orientations (vertical, horizontal)

The text for a post can now be cropped by number of lines instead of number of characters

For more information, see Timeline.

Tree

Indentation for trees has been improved.

Custom tree items are now available.

For more information, see Tree.

Tree Table

The tree table now supports the following additional features:

• Progress indicator
• Row highlighting

For more information, see Tree Table.

Upload Collection

• Improvement: When using clickable values, the label is no longer included in the hyperlink.
• More information has been added on editing additional object attributes.
• Minor change: When renaming, the button texts OK/Cancel have been changed to Rename/Cancel.

For more information, see Upload Collection.

Visual Filter Bar  New!

The visual filter bar offers a unique way of filtering large data sets through visualizations. This helps the user to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances.

The visual filter bar enables users to combine measures or item counts with filter values. The visual filter becomes even more powerful if you match measures to the filter dimension instead of just item counts. Ideally, the filters depend on each other.

For more information, see Visual Filter Bar.

Services and Resources

Design Stencils

Changes to the article:

• The Getting Started section has been updated with a new subsection, Installation Steps.
• A new section on the SAP Business Suite icon font has been added.

Items added or updated in the stencils / download package:

Launchpad

• SAP Fiori Launchpad (update)
• Me Area (update)
• SAP CoPilot (update)

Floorplans 

• Analytical List Page (update)
• Flexible Column Layout (update)
• Overview Page (update)
• Overview Page – Custom Cards (update)

UI Elements

• Comparison Micro Chart (update)
• Harvey Balls Micro Chart (update)
• Line Micro Chart  New!
• Map Container (with specific icon font included)  New!
• Navigation Menu  New!
• Planning Calendar (update + two new stencils)
• Stacked Bar Micro Chart  New!

Fonts

• Business Suite Icon Font (including stencils for the icon set + the icon font zip file)  New!
• SAP Icon Font (update to version 3.8)

For more information, see Design Stencils.