This article provides an overview of the topics that have been added or changed with the guideline version 1.28.

General Concepts

SAP Fiori Launchpad

• Launchpad personalization: The following features have been added:
  • Different icon for accessing the personalization mode
  • In-place editing, with generic functions for static and dynamic tiles (move, remove, settings)
  • Functions to rearrange groups and perform specific group actions (reset, delete)
• User preferences: The design has been renewed. A new API lets stakeholders extend the dialog with global settings (such as a personalized search).
• Save as Tile action: The title is now prefilled, and the user sees a preview of the tile.

Read more

Global Search

• Result list: After the top 3 business objects, the result list now shows the apps found by the search. The apps are displayed as a row of tiles.
• Facets: This is a new feature. A separate filter area on the left enables users to filter the search results.

Read more

Navigation

• Split-Screen Layout: Navigation for master-detail scenarios has been further clarified.
• Deep Links: Behavior of deep link navigation has been added, with rules for master-detail scenarios.

Read more

Locking

• Locks in tables: The guidance on how to display locks in a responsive table has been updated.
• User details: The guidance on how to display the user details in tables has been updated.
• Feature: The object list item control (sap.m.ObjectListItem) has a new property for setting the state of a list item to “locked” (property:  markLocked).

Read more

Floorplans

List Report Floorplan

• Filter bar: The visual design has changed to a transparent background.
• Table toolbar: The order of the actions in the toolbar has been corrected (sort, filter, group).

Read more

UI Elements

Chart | sap.viz.ui5.controls.VizFrame

Zoom

• Feature: Charts are now zoomable. In other words, the 24/48 px limitation no longer applies. If necessary, a chart can display an entire dataset, and users can zoom in to see more details, or interact using click or touch controls.
• Accessibility: Users can zoom using buttons on the chart toolbar, but also using CTRL + mouse wheel, or the pinch and spread gestures.
• Advantage: This zooming feature also solves the problem of overlapping bubbles in bubble charts.

Read More

Legend

• Position: The legend can now also be displayed at the bottom of a chart.
• Responsiveness: When the legend is displayed on the right, it now moves to the bottom on small screens.

Read More

Popovers

• Behavior: Labels in popovers no longer truncate, but wrap instead.
• Position: Popovers are better positioned, depending on the type of chart.

Icon Tab Bar | sap.m.IconTabBar

• Tabs in the Object View Floorplan: There is now specific guidance on which tabs to use.

Read more

Message Page | sap.m.MessagePage

• New control: The message page control replaces the empty page, and shows an icon, a message text, and an optional tagline.
• Use cases: More use cases can be covered. For example, you can now display an error page.
• Flexible: The control allows you to change the icon, and the two text lines can also be used for links.

Read more

Message Popover | sap.m.MessagePopover

• New control: The message popover can handle multiple messages (for example, if an action involves several validations).
• Usability: Users can attend to messages at their own pace. The message popover can be accessed at any time from the footer toolbar.
• Automated: Messages are handled by the message manager. This means much less manual work for development.

Read more

Multi Input | sap.m.multiinput

• New property: The multi input control now supports a multiline mode (property: enableMultiLineMode).  If you enable this mode, the control expands and displays hidden tokens. If you disable this mode,  the control displays the last token and a counter for the hidden tokens.

Read more

Object Header (Responsive) | sap.m.ObjectHeader

• Feature: You can now make better use of the screen real estate by turning on the responsive flag. This will distribute your attributes and status evenly on the screen in 1 to 4 columns, depending on the screen size.
  If you enable the responsive mode, the flagged/favorite icons are no longer part of the status area, but right next to the title.
• Recommendation: Set the responsive flag for the object header to “true”. If you are building a full-screen app, turn on the FullScreenOptimized flag as well.
• Visual design: The layout of the object header has been updated. The attributes and status are now distributed differently.

Read more

Overflow Toolbar | sap.m.OverflowToolbar

• Replacement: The overflow toolbar replaces the scaffolding toolbar.
• Overflow: The toolbar provides automatic overflow behavior.
• Order of buttons: The order of the buttons has been changed slightly.

Read more

Table Toolbar | sap.m.OverflowToolbar

• New article: The guideline for the table toolbar is now available.
• Generic actions: The article provides information about generic actions, such as Search, Add, Sort, Filter, and Group.
• Guidelines: The article also covers how to order buttons in the table, UI text guidelines, and much more.

Read more

Upload Collection | sap.m.UploadCollection

Although the control itself hasn’t changed much since SAPUI5 1.26, some additional information is now provided:

• File type restriction: We recommend using MIME file types.
• Usage: The guideline provides more examples of when to use the upload collection control.
• Usage: The distinction between the upload collection control and the file uploader (sap.ui.unified.FileUploader) is now clearer .

Read more

New articles

Message Handling

General Concept

The messaging guidelines describe how to display various types of message to the user (errors, warnings, success messages, information messages, and confirmation prompts). Different controls are available for the different types of message.

Read more

Overview (Toolbar)

UI Element

Toolbars enable the user to change the UI or trigger an action. The table and chart toolbars always appear above the table or chart, and have a transparent background. They are used for global actions that impact the whole table. Please be aware that this toolbar scrolls away. The footer toolbar has a dark background, and appears at the bottom of the page. The footer toolbar remains fixed when scrolling.

Read more

Analysis Path Framework

App Type

Analysis Path Framework (APF) is a framework for creating interactive, chart-oriented analytical drilldown applications by configuration. APF-based apps enable the user to view and analyze the data of several key performance indicators (KPIs) from different data sources.

Read more

Analytical Table (ALV)

UI Element

An analytical table (also known as ALV or ULV) provides several powerful options for working with the data, including advanced grouping and aggregation.

Read more

Charts – Zoom

UI Element

The user of the chart can change the scale of the axis using the zoom feature. When zooming, the scale of the horizontal or vertical axis expands or shrinks.

Read more

Checkbox

UI Element

A checkbox lets the user set a binary value (true/false, yes/no, and so on). When the user clicks or taps the checkbox, it toggles between checked and unchecked.

Read more

Dialog

UI Element

The sap.m.dialog control interrupts the current application process to prompt the user for information or for a response. It forces the user to make a decision or confirm an action.

Read more

Grid Table

UI Element

A grid table holds a set of data, structured in rows and columns. It is a desktop-centric table that allows users to scroll in both directions. It can handle large numbers of items and columns.

Read more

Message Box

UI Element

The sap.m.MessageBox is a special dialog for displaying messages. This article outlines how to use this control for different message situations (error, warning, information, success, and confirmation).

Read more

Message Page

UI Element

Message pages give feedback to the user if an app or list is empty, or if an error has occurred. The user sees an icon and a short message text. Both the icon and text can be defined individually, depending on the use case.

Read more

Message Popover

UI Element

The message popover is a control that can handle multiple messages. When used in combination with a message manager, it automatically displays any messages that are triggered at defined validation points.

Read more

Message Toast

UI Element

A toast message is a small, non-disruptive pop-up for success messages that disappears automatically after a few seconds.

Read more

Process Flow

UI Element

You can use the process flow control to display flows for different types of object, such as documents or approvals. Document flows can split off into numerous branches, while approval flows are usually straightforward.

Read more

Timeline

UI Element

The timeline control shows entries (objects, events, or posts) in chronological order.

Read more