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

GENERAL CONCEPTS

Animation

Find out more

Updated guideline: New guidelines for the About dialog when used in the SAP Fiori Launchpad.

Find out more

Enterprise Search (formerly known as global search)

• New features: The enterprise search now features improved suggestion handling and performance, a unified search input field, more space for search results, featured search results, and enhanced filter options (for example, facets and filter dialog). Find out more

Form Field Validation

• New article: This article describes how form fields are validated in SAP Fiori. Find out more

‘Create with Reference’ Pattern

• New article: Use the “create with reference” pattern if you want to create a new object that references an existing object. Find out more

‘Copy’ Pattern

• New article: Use the “copy” pattern if you want to create a new object by copying and adapting an existing object. Find out more

Draft Handling

• Updated guideline: Additional interaction flows & draft types:
  • New concept to navigate within SAP Fiori without data loss messages
  • New interaction flow, dialogs, and “lock expired” state for drafts created by other users
  • New column name for the draft state: Editing Status
  • Guidelines for selecting multiple draft, locked, and active documents
  • Handling of bookmarks
• New feature: New property for the object page header to mark an item as locked.

Find out more

Flag and Favorite

Object Header: If you use the responsive object header both the flag icon and the favorite icon are shown right behind the object title.

Find out more

Formatting Data | sap.ui.core.format

New Articles: Consistent rules for data formatting and characteristic data styles make it easy to work with and enable the users to solve seamless workflows with cross-border processes and communication. Formatters offer a comfortable handling between local settings.

Find out more

Navigation

Edit & Display behavior extended with a draft version concept. The draft version can be bookmarked for later editing.

Find out more

UI Elements

Analytical Table (ALV) | sap.ui.table.AnalyticalTable

• Responsiveness: The analytical table now also supports tablet devices (previously only available for desktop).

Read more

Calendar Date Interval | sap.ui.unified.CalendarDateInterval

New article: The control for the calendar date interval displays a range of days in a single row. Users can select a single day, multiple days, or a range of days.

Read more

Charts | sap.viz.ui5.controls.VizFrame

New Charts

• Heat map and its value-based legend
  Read more
• Donut chart

New Features

• Time axis: Line charts, bubble charts, and scatter plots can now have a horizontal axis for the date and time. The display is fully responsive.
  Read more
• Dual axes are now supported for bars, columns, line charts and combined charts.
• Bullet chart: You can now display multiple series per category, and  customize the colors of all values.
• Display name for categories: You can now distinguish between the ID and display name for each category.
• Selection by API: You can now use an API to select items. This allows you to manage the way data points are selected (for example, per category or per series).
• Bubble & scatter plot: You can now define the range of data to be displayed by default.
• The chart toolbar is now also using the overflow toolbar and consistent in behavior with all other toolbars
  Read more

Visual Design

• Tickers on the axis are displayed only when necessary. No tickers are displayed for simple charts.
• The default padding between bars has been reduced to display more bars on the screen.

Accessibility

• Screen reader support
• Keyboard support:  The [+] and [-] keys zoom in and out.

Currency | sap.ui.unified.Currency

New article: Use the currency control top display several amounts with different currencies beneath each other. To ensure comparability, the currency control takes care that alle amounts are aligned to the decimal point.

Find out more

Object Display Elements | sap.m.ObjectStatus | sap.m.ObjectIdentifier | sap.m.ObjectNumber

• Updated guidelines for Object Status, Object Identifier and Object Number combining pages in one.
• Updated guidelines for Object Status icons usage.

Find out more

Feed and Notes | sap.m.FeedInput & sap.m.FeedListItem

The two articles about sap.m.FeedInput and sap.m.FeedListItem have been merged and cleaned up for better consumption.
A new sections has been added about how to handle multiple types of notes.

Find out more

Filter Bar | sap.ui.comp.filterbar.FilterBar

New Features:

• Users can now filter the results by entering keywords.
• A screenshot of the filter bar in size S has been added.
• You can now opt to leave out the Go button. In this case, you must ensure that all filters are triggered automatically as soon as a filter value is entered or selected.
• To avoid conflicts, do not use a table filter in conjunction with the filter bar.

Read more

Grid Table | sap.ui.table.Table

• Responsiveness: The grid table now also supports tablet devices (previously only available for desktop).

Read more

Maps

The map control allows applications to visualize data using geographical or analytical (choropleth) maps. The control is configurable and responsive.

Read more

Copy & Paste from Spreadsheets & Text Files | sap.m.MultiInput & sap.m.MultiCombobox

The multi input and multi-combo box controls can now handle paste actions for multiple items (for example, items selected within a column of a spreadsheet or text file).

Read more

Timeline | sap.suite.ui.commons.Timeline

• Custom actions can be added next to the social actions
• ‘Show More’ button allows to load bulks of posts sequentially.

Read more

Title | sap.m.Title

New Article: The title control is a simple one line text with additional semantic information about the level of the following section in the page for accessibility purposes.

Find out more

Toolbar | sap.m.OverflowToolbar

• The  “…” (overflow) button is now a ToggleButton and can be used to switch the overflow menu on and off.
• An action sheet opens by clicking on the overflow button. In this action sheet all icon buttons are labeled with text and it is possible to overflow some controls.
• Also the behaviore of the overflow on phone has changed

Read more

Tree Table | sap.ui.table.TreeTable

• Responsiveness: The tree table now also supports tablet devices (previously only available for desktop).

Read more

Upload Collection | sap.m.UploadCollection

• The list items can now show additional attributes and statuses.
• New responsive behavior for narrow containers allows for longer file names.
• UploadCollectionForPendingUpload allows to first build a list of files and then trigger the upload.

Read more

Value Help Dialog | sap.ui.comp.ValueHelpDialog

• Responsiveness: The value help dialog now also supports tablet devices (previously only available for desktop).
• Redesign: The dialog now uses an icon tab bar to combine the screen for selecting the items and the screen for defining conditions.

Read more

View Settings Dialog | sap.m.ViewSettingsDialog

• New article: The view settings dialog offers simple sort, group, and filter settings.

Find out more