Intro

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

General Concepts

SAP Fiori Launchpad

SAP CoPilot New!

We have added a new article on the design of SAP CoPilot. The content reflects SAP CoPilot version 1802.
For more information, see SAP CoPilot.

Other General Concepts

Manage Objects with Subpages – Global Flow

Incorporated feedback after usability testing, including:

  • Line item indication (highlight)
  • Cancel button on subpage

For more information, see Manage Objects with Subpages – Global Flow.

Message Handling

For more information, see Message Handling.

Situation Handling  New!

Maybe your system can already identify situations that affect a user’s current task (like a change in the market that could impact the demand for a product). But can you incorporate this in your apps? The Situation Handling article introduces the concept of situations, and explains how to bring issues to the attention of users as they work, and then guide them towards a solution.

For more information, see Situation Handling.

Layouts, Floorplans & Frameworks

Layouts

Dynamic Page Layout

We’ve made several changes to simplify and enhance the guideline:

  • Additional information on placement of layout actions
  • Additional mandatory element: visual indicator for expanding/collapsing the header area
  • The subtitle is now below the title, rather than next to it
  • Additional information on responsiveness for the title, KPI, and global actions area.
  • Revised introduction, explaining how the dynamic page and semantic page relate to each other.
  • Developer hint on how to prevent the user from collapsing the header unintentionally.

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

Flexible Column Layout (Layout + SAP Fiori Elements)

For more information, see Flexible Column Layout (Layout + SAP Fiori Elements).

Floorplans

Analytical List Page

  • Partial support of responsiveness (KPIs are excluded)
  • Incorporated feedback from the guideline feedback program
  • Semantic colors in the visual filter bar

For more information, see Analytical List Page.

List Report (Floorplan + SAP Fiori Element)

  • Added a point to the “Do not use” section to be consistent with the analytical list page
  • Updated “no data” text guidelines for empty tables
  • Added a guideline for replacing the Add button tooltip (see Actions – SAP Fiori Element List Report)
  • List report SAP Fiori element: Updated information on messaging when an action cannot be applied to all selected items (see Table/Chart Actions).
  • You can now also use row highlighting for new items
  • Added information about chart support in the list report SAP Fiori element.

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

Overview Page (SAP Fiori Element)

  • The content has been restructured to make it easier to consume. Key subsections have been moved into separate articles.
  • All images have been updated to reflect the latest status.
  • List cards can now show images and icons on the left.

The following articles are now available:

Main article:

Related subarticles:

Tool Development

Side Navigation

Additional guideline added: set the initially displayed item to “selected”

For more information, see Side Navigation.

UI Elements

Analytical Card

  • Formatting for amounts in tooltips
  • New chart for analytical cards: vertical waterfall chart
  • You can now show a line chart with both a time axis and another color dimension

For more information, see Analytical Card.

Analytical Table (ALV)

  • Update: Always left-align status information
  • Additional guidelines for row actions: use the row action column only for navigation/deletion (as for responsive table)
  • Do not use alternate row coloring
  • New drag and drop feature

For more information, see Analytical Table (ALV).

Area Micro Chart

The article has been restructured and contains additional information on the layout and components of the chart

For more information, see Area Micro Chart.

Busy Indicator

You now have the option of setting the busy indicator for actions in table rows.

For more information, see Busy Indicator.

Chart – Color Palettes

The qualitative and the sequential color palettes for the VizFrame charts have been updated. The main reason for the change was to improve accessibility.

All images in the chart articles have been updated to reflect the new color palettes.

For more information, see Chart – Color Palettes.

Chart – Reference Lines

The article now includes guidance and examples for using multiple reference lines, reference lines that vary over time, and reference lines with different colors.

For more information, see Reference Lines.

Column Micro Chart

New Components section with additional information on bars and labels.

For more information, see Column Micro Chart.

Comparison Micro Chart

The example chart images now shows both the normal view and the wide view.

For more information, see Comparison Micro Chart.

Feed and Notes

Applications can now define actions that users can perform on individual feed posts. The two most typical actions are edit and delete. Other actions can be introduced as required by the use case.

For more information, see Feed and Notes – Actions on Feed List Items.

Filter Bar / Smart Filter Bar

Additional section to clarify the difference between the filter bar in the sap.m.page and the filter bar in the dynamic page.

For more information, see Filter Bar / Smart Filter Bar.

Gantt Chart

For more information, see Gantt Chart.

Grid Table

  • Update: Always left-align status information
  • Additional guidelines for row actions: use the row action column only for navigation/deletion (as for responsive table)
  • Do not use alternate row coloring
  • New drag and drop feature

For more information, see Grid Table.

Message View

For more information, see Message View.

P13n Dialog

  • We added a guideline on opening the P13n dialog from the toolbar using individual buttons (separate buttons for Sort / Filter / Group / Column Settings). Each button opens the P13n dialog with just the corresponding tab. No other tabs are displayed.
  • Images were updated.

For more information, see P13n Dialog.

Planning Calendar

  • Updated text for the date picker
  • Updated images for planning calendar elements and the interaction with the date picker

For more information, see Planning Calendar.

Process Flow

For more information, see Process Flow.

Range Selector  New!

The range selector enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.

For more information, see Range Selector.

Responsive Table

For more information, see Responsive Table.

Responsive Table – Content Formatting Cheat Sheet

The article has been updated to reflect the change in the alignment of status information (now left-aligned).

For more information, see Responsive Table – Content Formatting Cheat Sheet.

Select

New mobile experience: Option list opens in full screen with title bar and Close action

For more information, see Select.

Smart Table

  • Updated information on “no data” texts for emtpy tables
  • Updated links to visual design specifications
  • Updated information about exporting to a spreadsheet
  • Updated property description for responsiveness with sap.m.Table

For more information, see Smart Table.

Title

Titles can now wrap.

For more information, see Title.

Treemap Chart  New!

Treemaps are one of the most compact and space-efficient options for displaying hierarchies. They are also great for comparing the proportions for categories based on their size. If there is a correlation between the color and size in the tree structure, the user is able to see patterns that would be difficult to spot in other charts.

For more information, see Treemap Chart.

Tree Table

  • Additional guidelines for row actions: use the row action column only for navigation/deletion (as for responsive table)
  • Update: Always left-align status information
  • New drag and drop feature

For more information, see Tree Table.

Variant Management

  • In response to user feedback, we now call variants “views” on the user interface itself. The dialogs VariantsManage Variants, and Save Variant have been renamed to My ViewsManage Views, and Save View respectively. This change affects the UI only. To describe the SAPUI5 control in the design guidelines and technical documentation, we still speak of “variants” and “variant management”.
  • Explanations and images across the article have been revised.
  • Updated Add to Favorites section.

For more information, see Variant Management.

View Settings Dialog

  • Updated guidance for the toolbar buttons that trigger the dialog (Sort, Filter, Group, Columns). If the user presses one of these buttons, the dialog should only show the corresponding tab.
  • Updated images: icons on the toolbar, icons and titles in dialogs

For more information, see View Settings Dialog.