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

Foundation

Get Started

New to the design guidelines? You’ve come to the right place! This page has been updated to include a comprehensive overview of the most important guideline topics. This update also includes two new articles: SAP Fiori and A Beginner’s Guide to the Design Guidelines that aim to give newbies some background on SAP Fiori and an introduction to using these guidelines.

For more information, see Get Started.

SAP Fiori

New article! Curious about the evolution of SAP Fiori? Want to know more about SAP Fiori 2.0? This article gives you an introduction to SAP Fiori, the new user experience for SAP enterprise software.

For more information, see SAP Fiori.

A Beginner’s Guide to the Design Guidelines

New article! If this is your first visit, or if you’re curious to learn more about the purpose of the SAP Fiori Design guidelines, this article is for you. You’ll find out how the guidelines fit into the larger scheme of SAPUI5 technology, what advantages using the guidelines bring you, and find valuable resources.

For more information, see A Beginner’s Guide to the Design Guidelines.

Letterboxing

While in the past letterboxing could be switched on or off for an entire application only, apps now have the flexibility to change the width at runtime for different views. Note: This should only be used in specific cases.

For more information, see letterboxing.

General Concepts

SAP Fiori Launchpad

Home Page

• A new group transparency now helps to better differentiate which groups are hidden on the launchpad home page and which are not.
• The functions Hide and Show are now displayed as buttons for better visibility and accessibility. Note: Other functions in edit mode, such as Add Group or Reset, are similarly displayed.

For more information, see SAP Fiori launchpad home page.

App Finder

Responsiveness section: On size S the width of the app box adapts to fit the screen size.

For more information, see SAP Fiori launchpad app finder.

Shell Bar

The navigation menu was extended with the All My Apps” feature. All My Apps provides access to the main assigned applications (apps from the home page and the app finder (catalog only)) from anywhere in SAP Fiori.

For more information, see SAP Fiori launchpad shell bar.

Draft Handling

Based on user feedback, the saving indicator has been placed closer to the finalizing action. Guidelines for draft handling within the flexible layout have also been added.

For more information, see draft handling.

Form Field Validation

Images have been updated to reflect that colons are no longer added automatically to forms.

For more information, see form field validation.

Formatting Numbers

The article now covers formatting numbers as a percentage.

For more information, see formatting numbers.

SAP Fiori Elements, Floorplans & Frameworks

Analysis Path Framework

Users now have the option to view 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.

Flexible Column Layout

New article! The new flexible column layout is a layout control that displays multiple floorplans on a single page. This allows for a faster and more fluid navigation between multiple floorplans compared to the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (panels). It behaves responsively, which makes it suitable for mobile devices as well as for desktops.

For more information, see flexible column layout.

List Report (Floorplan + SAP Fiori Element)

Article Merge

The existing articles List Report Floorplan and List Report (SAP Fiori Element) have been merged into a single article: List Report (Floorplan + SAP Fiori Element).

Content Updates:

The following new features are now available with the list report SAP Fiori element:

• Line item navigation for grid tables and analytical tables: You can now place a navigation indicator within an item (as for responsive tables).
• Tree tables are now supported.
• Links can now open a contact Quick View; direct navigation (without pop-up) is also possible.

For more information, see list report (floorplan + SAP Fiori element).

Object Page (SAP Fiori Element)

Usage

• The usage section has been extended to make it clearer when to use the object page and when to use the list report or the analytical page.

Snapping Header

• The snapping header article can now be found directly under the object page (SAP Fiori element) article in the menu navigation.
• New developer hints were added to the form facet, plain text facet, and key value facet.

For more information, see snapping header.

Overview Page

Improved Visual Design

• The width of the smart filter bar is now always aligned with the width of the cards.
• Improvements to spacing on the cards.

For more information, see overview page (SAP Fiori element).

UI Elements

Analytical Card

Axis scaling was added for line, bubble and scatter charts. There are 3 options for scaling: default state, adjust scale, and min-max state.

For more information, see analytical card.

Analytical Table (ALV)

• A new navigation option is available for sap.ui.table.
• Autoresize has been improved for sap.ui.table.

For more information, see analytical table (ALV).

Avatar

New article! The avatar is a new control that uses various display options to represent images, icons and initials.

For more information, see avatar.

Chart (VizFrame)

Chart Types

Two additional chart types now included in the overview: the vertical chart with a categorial axis and the vertical chart with a time axis, and the multiple series (periodic) chart.

For more information, see chart types.

Cumulation (Waterfall Chart)

The section Orientation has been renamed Chart Types and completely rewritten to introduce the waterfall chart with a time series.

For more information, see cumulation (waterfall chart).

Interactive

Combo Box

In a two-column layout, users can now filter for both columns showing only matching entries.

For more information, see combo box.

Form

Images and Guidelines section updated to reflect that colons are no longer added automatically to forms.

For more information, see form.

Grid Table

• A new navigation option is available for sap.ui.table.
• Autoresize has been improved for sap.ui.table.

For more information, see grid table.

Message Box

While it was previously only possible to display plain text when clicking on Show Details, it’s now possible to display formatted text as well, allowing for a better user experience.

For more information, see message box.

Message View

New article! The message view (sap.m.MessageView) control can handle multiple messages within SAP Fiori and makes up the content of the message popover. Applications are now able to use all the features of the message popover inside other containers, such as inside the dialog, with increased flexibility. The message view brings all the features from the message popover with it, such as the connection between the backend short and long text, filtering the messages by severity, and more.

For more information, see message view.

Planning Calendar

A new “month” view has been added to the Calendar View subsection.

For more information, see planning calendar.

Process Flow

Additional information and corrections have been added from the development documentation to give better guidance for implementation.

For more information, see process flow.

Range Slider

A new sectionTick Marks and Labels was added.

For more information, see range slider.

Responsive Table

Minor clarifications have been added across the article.

For more information, see responsive table.

Slider

A new section Slider with Tick Marks and Labels was added.

For more information, see slider.

Smart Chart

New article! The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualisation based on the underlying OData service plus corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities.

For more information, see smart chart.

Smart Table

• Highlighting has been enabled for rows.
• Support for tree tables has been improved.

For more information, see smart table.

Tree Table

• A new navigation option is available for sap.ui.table.
• Autoresize has been improved for sap.ui.table.

For more information, see tree table.

Upload Collection

Drag and drop is now supported for uploading files.

For more information, see upload collection (section Behavior and Interaction, subsection: Uploading Files).

Wizard Floorplan

There is now an additional header above the toolbar with the steps in the wizard. The header lets users know where they are and what they are doing (for example Create Sales Order or Edit Sales Order 4815162342).

For more information, see wizard floorplan.