- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.26
- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
What’s New in Guideline Version 1.28?
Intro
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.
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.
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.
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 .
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
Message Toast
UI Element
A toast message is a small, non-disruptive pop-up for success messages that disappears automatically after a few seconds.
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.
Timeline
UI Element
The timeline control shows entries (objects, events, or posts) in chronological order.