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

Foundation

Colors

• A new visual design language (Belize) was implemented with SAP Fiori 2.0. Check out the most important colors of Belize in this article.

For more information, see colors.

Iconography

• A new visual design language (Belize) was implemented with SAP Fiori 2.0. Check out the new icon style.

For more information, see iconography.

Theming

• A new visual design language (Belize) was implemented with SAP Fiori 2.0. Check out the new light and dark theme flavors. Additionally, a high contrast black theme is provided.

For more information, see theming.

General Concepts

SAP Fiori Launchpad

Overview

With version 1.40 of SAPUI5, the viewport concept was introduced to allow the user to concurrently manage different three different screen areas (the home page, Me Area, and the notifications area). A smoothly animated lateral move mimics the user’s head turning to the left and to the right in a panoramic view.

For more information, see SAP Fiori launchpad overview.

Home Page

New updates and features:

• Anchor bar is only displayed when more than one group is available.
• Edit home page now via the Me Area.
• New floating toolbar available to exit the edit mode from the home page.
• The “global search” has been renamed to “enterprise search” (all guideline versions from version 1.30)

For more information, see SAP Fiori launchpad home page.

Shell Bar

With version 1.40 of SAPUI5, the shell bar and the application bar have now been merged into one bar. Due to this merge, as well as the evolution of the shell bar, some features were moved around and new features were introduced.

• New features include the toggle buttons for the viewports (Me Area, notifications), the CoPilot and the navigation menu.
• The Back button and page title were repositioned to the shell bar.
• The option menu has been removed from the shell bar. Former content such as Contact Support is now accessible via the Me Area.

For more information, see SAP Fiori launchpad shell bar.

Services

Most of the SAP Fiori launchpad services can now be accessed via the Me Area. Save as Tile is now accessible from the applications’ footer toolbar or object header.

For more information, see SAP Fiori launchpad services.

Draft Handling

• New control to represent the editing state: sap.m.objectMarker
• Object marker is now being used in the following controls: upload collection, object list item, and object header
• The section on ‘Actions and Messaging’ was extended with examples and pictures

For more information, see draft handling.

SAP Fiori Elements and Floorplans

Name Change: Smart Templates to SAP Fiori Elements

• The SAP Fiori product management team renamed *smart templates* to *SAP Fiori Elements* for all internal and external communication. Please use the new term SAP Fiori Elements from now on.

For more information, check out the introduction to SAP Fiori Elements.

SAP Fiori Elements: List Report (updated)

• Now based on the dynamic page
• Support for pictures and icons in tables (if responsive table is used)
• Generic Delete action
• and more…

For more information, see list report floorplan.

Object Page: Floorplan + SAP Fiori Elements (updated)

• Now based on the dynamic page
• Footer toolbar is now a floating toolbar
• The former “one toolbar” approach no longer applies. You can now use the header toolbar (global actions) alongside the footer toolbar (finalizing actions) in display, edit, and create modes.

For more information, see object page.

SAP Fiori Elements: Overview Page (updated)

• Now based on the dynamic page layout, with a snapping header, and the option to include variant management and a smart filter bar.
• Revised visual design for stack cards.

For more information, see overview page.

Wizard | sap.m.Wizard (updated)

• New info on how to handle explanatory texts.
• More information about the review screen.

For more information, see wizard.

UI Elements

Analytical Card (updated)

New features:

• New chart types: Combined Column & Line Chart, Scatter Plot Chart
• Chart Title added for describing the Axis Titles
• Time axis support for the line, column, stacked column, bubble and combination charts
• Semantic colors for the charts based on threshold values
• Semantic Pattern is supported for the Line chart, Column chart and Vertical Bullet chart
• View Switch that could be used for filtering, sorting or grouping of the data in the chart

For more information, see analytical card.

Gantt Chart | sap.gantt.GanttChartContainer

New article! You can use the Gantt chart to present time-dependent data in an intuitive graphical manner. It shows the user the sequence in which various activities occur, and the dependencies between these activities.

For more information, see Gantt chart.

Icon Tab Bar | sap.m.IconTabBar (updated)

• New feature: Counters can now be shown in line with text-only tabs.

For more information, see icon tab bar.

Range Slider | sap.m.RangeSlider (updated)

New features:

• Ability to change the value range with adjusting the progress line via drag and drop.
• Ability to use input fields instead of tooltips with the inputsAsTooltips property.

For more information, see range slider.

Step Input | sap.m.StepInput (new)

New article! A new control that allows the user to adjust a value by a predefined step.

For more information, see step input.

Upload Collection | sap.m.UploadCollection (updated)

• New feature: Technical statuses (flag, favorite or current editing status)

For more information, see upload collection.