Updated: May 24, 2017

SAPUI5 Version 1.44

What’s New in Guideline Version 1.44?

Intro

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

Foundation

Design-Led Development

Updated information about the 3 phases (previously 4) of the design-led development process.

For more information, see design-led development.

General Concepts

SAP Fiori Launchpad

Home Page

By default, all groups are displayed in the launchpad home page. These groups are listed in the anchor bar. With SAPUI5 1.44, users can now choose to display a tab bar instead in order to focus on single groups only.

For more information, see SAP Fiori launchpad home page.

App Finder

Updates:

A side panel was added to the catalog
Apps in the catalog are represented now in the same format than apps from the User Menu and SAP Menu (exception: custom tiles).
Searching for apps is now available in the User Menu and SAP menu as well. The search works consistently in all three content areas.

For more information, see SAP Fiori launchpad app finder.

Shell Bar

New visualization of different standalone modes of the shell bar.

For more information, see SAP Fiori launchpad shell bar.

Services

The new Home Page settings dialog allows the user to decide how content is shown in the launchpad (via the anchor bar or the tab bar).

For more information, see SAP Fiori launchpad services.

SAP Fiori Elements, Floorplans & Frameworks

Dynamic Page Layout

New guidelines on keyboard interaction: the snapping header expands automatically as soon as the content of the snapping header comes into focus via the keyboard, such as via tabbing or via group jumps (F6).

For more information, see dynamic page layout.

List Report (SAP Fiori Element)

Updates:

Line item navigation inside the app (to a related object page per default) can be overridden to define a different new target. This target can also be different depending on app-defined conditions.
Draft handling is supported (optional, but recommended).

For more information, see list report (SAP Fiori Element).

Manage Objects with Subpages – Global Flow

Edting subitems: After applying changes to a subitem (Apply button), the user is returned to the next level up.

For more information, see manage objects with subpages – global flow.

Multi-Instance Handling

New information about when to use this floorplan.

For more information, see multi-instance handling.

Object Page (Floorplan + SAP Fiori Element)

The table of features for the object page SAP Fiori element has been updated.

For more information, see object page (floorplan + SAP Fiori element).

Overview Page (SAP Fiori Element)

Updates:

Table cards: All three columns can now show either a data field or a data point.
Link list cards:
- New visual design for all variants.
- The image variant uses the new carousel control.
Bar chart list card: This card now uses the comparison micro chart (instead of the progress indicator).

For more information, see overview page (SAP Fiori element).

Wizard Floorplan

Update on usage: The wizard can now be used in edit scenarios.
New feature: Quick confirmation popup may be used when user cancels progress (in walkthrough screen).
New information on behavior and interaction relating to the dynamic page (header and footer toolbar).

For more information, see wizard floorplan.

UI Elements

Analytical Card

Updates:

Clearer explanation of which KPI header elements are optional and which are mandatory.
The scaling factor and the unit of measure for the KPI are now shown at the end of the subtitle of the KPI header.
The scaling factor and the unit of measure are now positioned on the right-hand side of the chart title.
If the scaling factor and unit of measure are different, they will be visible in the axis titles for the bubble and scatter chart.
Others section and percentage are now available in the donut chart.

For more information, see analytical card.

Analytical Table (ALV)

Updates:

New behavior and additional guidelines for column resizing.
The rating indicator can now be used inside cells.

For more information, see analytical table (ALV).

Carousel

Updates:

Navigation icons now also found in the paging indicator area.
If there are more than 8 pages, the paging indicator changes from icons to numbers.

For more information, see carousel.

Chart – Embedding

Additional information about the different types of scrolling patterns and how they affect embedding in an app, page, or frame.

For more information, see chart – embedding.

Dialog

New guidelines on usage, navigating in a dialog, and emphasizing buttons in a dialog.

For more information, see dialog.

Dynamic Side Content

Additional guidelines on using the dynamic side content with the object page and the dynamic page layout, including examples.

For more information, see dynamic side content.

Lightbox

New behavior/interaction: Every image with an attached lightbox control is indicated with a zoom icon on the bottom right.

For more information, see lightbox.

List

Updates:

Highlighting for rows (error, warning, success, info states) available.
Group headers are no longer written in all caps, but rather in title case.

For more information, see list.

Micro Chart

The micro chart article has been expanded to include more information about each type of micro chart (as separate subpages).

New articles! The following subpages are new:

For more information, see micro chart.

Object Header

Update: The object header no longer supports the flat object view floorplan, which has been deprecated.

For more information, see object header.

Output Management

New article! The output management control is a “reusable component”. The control allows the user to manage the output process of a business document (such as a sales order). It gives the user the possibility to evaluate the output history for a specific business document and offers interaction on those. The output control collects and validates all output parameters, creates the output documents, and outputs them.

For more information, see output management.

Planning Calendar

New guidelines on how app developers should implement the row header switch.

For more information, see planning calendar.

Range Slider

Update: You can now apply tick marks to the range slider. The tick marks are related to the step property.

For more information, see range slider.

Rating Indicator

Update: Interactive and disabled states are now available.

For more information, see rating indicator.

Slider

Update: Sliders can now be used with text fields or input fields.

For more information, see slider.

Smart Link

Update: Users can now select the related links they want to see in the smart link popover.

For more information, see smart link.

Smart Table

Update: For the responsive table, the keyboard mode adapts accordingly when switching to edit mode.

For more information, see smart table.

Table

Grid Table

Updates:

New behavior and additional guidelines available for column resizing.
Rating indicator can now be used inside cells.

For more information, see grid table.

Responsive Table

Updates:

Highlighting for rows (error, warning, success, info states) available.
Group headers are no longer written in all caps, but rather in title case.
Extended guidelines for adding new items.

For more information, see responsive table.

Tree Table

Updates:

New behavior and additional guidelines for resizing columns.
Expand to level/collapse now available via the API.
Rating indicator can now be used inside cells.

For more information, see tree table.

Tree

Updates:

To show that an item needs attention, a highlight indicator can be shown in front of the item (error, warning, success, info states available).
Expand to level/collapse now available via the API.

For more information, see tree.

Services and Resources

Design Stencils

The design stencils for Axure RP have been updated to the latest SAPUI5 version 1.44.

For more information, see design stencils.