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.
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.
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
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)
- Close and Enter Full Screen / Exit Full Screen actions: These actions are displayed as the last actions in the layout section (or in the global actions toolbar if there is no layout section).
- Two columns (master-detail mode): Only start with two columns if the flexible column layout is used when opening the app.
- SAP Fiori Elements: From SAPUI5 version 1.50, SAP Fiori elements supports starting the application with two columns.
- New section: Footer Toolbar
- New section: Overlapping Header
- New section: Empty Details Column
- New section: Usage After One or Several Pages
For more information, see Flexible Column Layout (Layout + SAP Fiori Elements).
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:
- 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.
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.
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.
- Updated Filtering section: Filtering is offered if there are multiple message (severity) types, but hidden if all messages are of the same type.
- Automatic navigation to the message details if there is only one message to display.
- Updated images for navigation to the second page of a message view and transient message handling.
For more information, see Message View.
- 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.
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 – 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.
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.
- In response to user feedback, we now call variants “views” on the user interface itself. The dialogs Variants, Manage Variants, and Save Variant have been renamed to My Views, Manage 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.