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.
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.
SAP Fiori Launchpad
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.
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.
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.
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.
Other General Concepts
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.
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.
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.
Split-Screen Layout / Master List
As of SAPUI5 release 1.48, the split screen layout is deprecated.
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.
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.
- 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).
- 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).
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.
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.
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.
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.
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.
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.
- 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
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:
- SAP Fiori Launchpad (update)
- Me Area (update)
- SAP CoPilot (update)
- Analytical List Page (update)
- Flexible Column Layout (update)
- Overview Page (update)
- Overview Page – Custom Cards (update)
- 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!
- 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.