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

• New section: Handling of State Messages
• New section: Handling of Transient Messages

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)

• 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).

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)

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:

• Overview Page (SAP Fiori Element)

Related subarticles:

• Overview Page – Fixed Card Layout
• Overview Page – Card
  • Overview Page – List Card
  • Overview Page – Stack Card | Quick View Card
  • Overview Page – Table Card
• Overview Page – UI Text Guidelines 

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

• Responsiveness: Additional information on the condensed mode.
• App-specific options for the chart settings.
• New section on resizing shapes.

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

• 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.

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

• New section on editing the content for a node.
• Guidelines on naming the UI texts for a node.

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

• Update: Always left-align status information
• New pop-in layout with additional options for pop-in design (see Reponsiveness and Guidelines/Responsiveness)
• Do not use alternate row coloring

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

• Images for size S updated
• New section: Full Screen Title Bar on Size S

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 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.