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

General Concepts

Handling Busy States

New article! This article gives an overview of how to handle different busy state use cases within an application.

For more information, see handling busy states.

SAP Fiori Launchpad

Home Page

New feature: Anchor bar.

Additional changes:

• The tile groups are now listed in the anchor bar at the top of the page.
• The group panel no longer exists.
• The tile catalog has moved to the user options menu on the top right.

For more information, see SAP Fiori launchpad home page.

Services

New feature: Usage analysis (can be switched on or off by the user via the user preferences dialog).

For more information, see SAP Fiori launchpad services.

Smart Templates, Floorplans & Frameworks

Multi-Instance Handling

New article! The multi-instance handling floorplan allows users to open multiple documents in a tabular view. After selecting items from a list, the user opens them in a tab container.

For more information, see multi-instance handling.

Tool Development Overview

New article! This article describes controls that provide an SAP Fiori extending framework for components that serve complex use cases in the area of tools and technologies. The purpose of these controls is to ensure that user interfaces in the tools area are consistent, and that applications and tools are implemented with a common design language based on SAP Fiori.

Tool Development – Block Layout

New article! The block layout is used to display texts in a section-based manner. It features horizontal and vertical subdivisions and full-width banners seen frequently in contemporary web design.

For more information, see block layout.

Side Navigation | sap.tnt.SideNavigation

New article! The new side navigation control can be used to display navigation structures with up to two levels. It contains links that change the content in the main area. The side navigation has three visual states: expanded, condensed and collapsed. Depending on the device, two of these states are used per device.

For more information, see side navigation.

Tool Header | sap.tnt.ToolHeader

New article! The new tool header control is a horizontal container at the top of the application. It takes the full width of the screen, floats above the content, and does not scroll. It acts as a container for global elements such as an application menu strip, name and branding of the application, and utility functions.

For more information, see tool header.

Wizard

Improved article showing examples of how the wizard can be used both in split-screen and full screen layouts.

For more information, see wizard floorplan.

UI Elements

Analytical Table | sap.ui.table.AnalyticalTable

Guidelines updated: What to display while loading data.

For more information, see analytical table.

Breadcrumb | sap.m.Breadcrumb

New article! The breadcrumb control provides secondary navigation and indicates the position of a page within the navigation hierarchy.

For more information, see breadcrumb.

Combo Box | sap.m.Combobox

New features:

• Use the combo box with the new two-column layout to display additional information.
• The width of the option list now automatically adapts to its content.

For more information, see combo box.

Contextual Filter | sap.m.toolbar

The exception scenario has been updated to be more comprehensible and visually up to date with SAP Fiori’s visual design.

For more information, see contextual filter.

Grid Table | sap.ui.table.Table

Guidelines updated: What to display while loading data.

For more information, see grid table.

Invisible Text | sap.ui.core.InvisibleText

New article! The invisible text control provides a simple hidden text which can be used by assistive technologies like screen readers to provide context information which is available to sighted users.

For more information, see invisible text.

Map | sap.ui.vbm.AnalyticMap and sap.ui.vbm.GeoMap

New features:

• Clustering: Applications can now cluster visual objects to avoid cluttered screens.
• Direction indicator: A new property was introduced to always show the direction of a route independent of the zoom level.
• Lasso selection is now available.

For more information, see map.

Mask Input | sap.m.MaskInput

New article! This control allows users to easily enter data in a specific format using a fixed-width input (for example: date, time, phone number, credit card number, currency, IP address, and more).

For more information, see mask input.

Message Page | sap.m.MessagePage

Updated guidelines for loading.

For more information, see message page.

Planning Calendar | sap.m.PlanningCalendar

New article! The planning calendar lets the user view different appointments simultaneously and create new events. Appointments for several objects (for example, a team calendar) can be displayed and compared.

For more information, see planning calendar.

Process Flow | sap.suite.ui.commons.ProcessFlow

New guidelines: Some use cases focus on the connections between the nodes just as much as on the nodes themselves. For these cases, we provide clickable labels that can be displayed on each connection which, in turn, provide the user with the necessary information.

For more information, see process flow.

Responsive Table | sap.m.Table

Updated guidelines:

• How to display the infobar while the responsive table is being filtered.
• What to display while loading data.

For more information, see responsive table.

Table Select Dialog | sap.m.TableSelectDialog

New article!

• You can include the components checkbox and switches in the list for the table select dialog.
• Usage recommendation: Use the table select dialog instead of XY.
• Visual design: The visual design has been renewed.

For more information, see table select dialog.

Timeline | sap.suite.ui.commons.Timeline | sap.collaboration.components.feed.Component

New feature: The social timeline now supports the usage of the popular SAP Jam feature “@mention” in all areas where the user is able to post content.

For more information, see timeline.

Upload Collection | sap.m.UploadCollection

New feature:  Applications now can introduce their own custom actions and also perform bulk actions (actions that affect multiple objects).

For more information, see upload collection.

Waterfall Chart | sap.viz.ui5.controls.VizFrame

New article! Waterfall charts show how the cumulative value changes from an initial state to a final state by representing the accumulation of successive values.

For more information, see cumulation.