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

Guideline Design

Guideline Navigation

You can now create direct links to individual sections of a guideline page. Just hover over a heading until you see the link icon. Then click on the icon to see the URL for the section, which is selected and ready to copy.

Foundation

General Concepts

SAP Fiori Launchpad

Enterprise Search

A new Configuration section has been added:

• Options for switching the personalized search on or off (user settings, system-wide configuration)
• Options available to development teams for fine-tuning the enterprise search

For more information, see Enterprise Search.

Other General Concepts

Flag and Favorite

Layout:
A new Custom List Item section describes the options for adding a flag or favorite indicator to a custom list.

For more information, see Flag and Favorite.

Navigation

The article has been updated to reflect the new flexible column layout. References to the (deprecated) split-screen layout have been removed.

For more information, see Navigation.

Manage Simple Objects

• This article now includes guidelines for “create” pages. With version 1.50, the former Create Page article is being deprecated.
• Updated images for master-detail pattern to the new flexible column layout.

For more information, see Manage Simple Objects.

Mass Editing

Guidelines:

• Added reference links for when to use the select or value help dialog
• Guidance on restoring content when the user interrupts selection of a new value by pressing Cancel.

For more information, see Mass Editing.

Layouts, Floorplans & Frameworks

SAP Fiori Elements

Introduction to SAP Fiori Elements

• The content has been revised to incorporate user feedback.
• A new Usage section has been added.

For more information, see Introduction to SAP Fiori Elements.

Layouts

Dynamic Page Layout – Semantic Page

The position of the draft indicator in the footer toolbar has changed. It is now on the right, before the finalizing actions.

For more information, see Dynamic Page Layout – Semantic Page.

Floorplans

Overview Page (SAP Fiori Element)  

• Structure / Dynamic Page: The share menu is available in the header title.
• Card Types: Smart links are now supported in the table cards.

For more information, see Overview Page (SAP Fiori Element).

Worklist

The entire article has been revised and aligned with the article for the list report floorplan.

For more information, see Worklist Floorplan.

Wizard

• The Layout section has been updated to reflect the new flexible column layout. References to the (deprecated) split-screen layout have been removed.
• Behavior and Interaction: Now also mentions draft handling.

For more information, see Wizard Floorplan.

Frameworks

SAP Smart Business Framework

An example was added to show the interaction for a “threshold popover” when clicking on tiles with micro charts.

For more information, see SAP Smart Business Framework.

UI Elements

3D Viewport  New!

You can use the 3D viewport control display simple and complex 3D objects in SAP Fiori. It also offers basic user interaction with the 3D environment and its objects.

For more information, see 3D Viewport.

Analytical Card

• The donut chart can now show absolute values (by default) or relative values (%).
• It is now possible to have only header navigation in analytical cards.

For more information, see Analytical Card.

Analytical Table (ALV)

• Behavior & Interaction / Select: Updated guideline and image for non-selection mode.
• Guidelines: A new Selection section was added.
  • Handling checkboxes in multi-selection tables
  • Developer hint for the Select All checkbox

For more information, see Analytical Table (ALV).

Feed and Notes

Responsiveness / Guidelines:
Hint added about the width of feed input or feed list items. They should not stretch across large or very large screens (L or XL).

For more information, see Analytical Table (ALV).

Form / Simple Form / Smart Form

• Guidelines: A new Label section has been added
  • Different label style for display and edit modes
  • Automatic wrapping to avoid truncation
• Updated images to reflect the lighter label

For more information, see Form.

Grid Table

Guidelines: A new Selection section was added.

• Handling checkboxes in multi-selection tables
• Developer hint for the Select All checkbox

For more information, see Grid Table.

Interactive Bar Chart

• Layout: A new semantic colors section was added.
• All images have been updated to reflect the new visual design available with SAPUI5 release 1.50.

For more information, see Interactive Bar Chart.

Interactive Donut Chart

• Layout: A new semantic colors section was added.
• All images have been updated to reflect the new visual design available with SAPUI5 release 1.50.

For more information, see Interactive Donut Chart.

Interactive Line Chart

• Layout: A new semantic colors section was added.
• All images have been updated to reflect the new visual design available with SAPUI5 release 1.50.

For more information, see Interactive Line Chart.

Line Chart  New!

This new article for the line chart in the VizFrame library describes the line chart in more detail, including:

• When to use the line chart
• Default color palette
• Popover with details for a data point
• Selecting and using the right axes
• How to represent missing values

For more information, see Line Chart.

List

Behavior and Interaction / Mode: A developer hint has been added for the Select All checkbox.

For more information, see List.

Network Graph  New!

Network graph visualization is a method for displaying large, complex datasets in a spatial context (for example, a global supply chain). Records are displayed as nodes, and connectors (lines) show the relationships between them. Using network graphs can highlight important data dependencies that might otherwise be overlooked.

For more information, see Network Graph.

Planning Calendar

Components: A new Planning Calendar Legend section has been added.

For more information, see Planning Calendar.

Popover

The Closing a Popover section now contains hints on how to control the closing behavior (for example, if a popover displays on top of a navigable table).

For more information, see Popover.

Process Flow  

• In addition to the fixed node layout, the process flow now offers a freestyle layout, which starts off with an empty node container. This gives applications the freedom to tailor the flows specific to their use cases.

• New section on editing the content for a node.
• Guidelines on naming the UI texts for a node.

For more information, see Process Flow.

Progress Indicator

The Styles section has been updated to include the display state of the progress indicator.

For more information, see Progress Indicator.

Responsive Table

The following parts of the Guidelines section were updated:

• A new Selection section describes the different selection modes.
• Table Title: Additional development hint on accessibility when tables do not have a title.
• Content Formatting: New images have been added for formatting the link text for the object identifier.

For more information, see Responsive Table.

Smart Table

You now have the option to aggregate amount columns with different currencies. Users then see a popover with subtotals per currency.

For more information, see Smart Table.

Status Indicator  New!

The status indicator is a new control that shows values as fill levels within a pictogram (icon). By using a pictogram that fits the context, you can help users understand the meaning of the status at a glance, without referring back to labels.

For more information, see Status Indicator.

Timeline

New guidance was added on when to use the single-sided and double-sided layouts for optimal width.

For more information, see Timeline.

Tree

A developer hint has been added on the implications of using CTRL+A to select all items.

For more information, see Tree.

Tree Table

A new Selection section was added under Guidelines:

• Handling checkboxes in multi-selection tables
• Developer hint for the Select All checkbox

For more information, see Tree Table.

Upload Collection  

The upload collection control now supports folder hierarchies, similar to a file browser or popular web storage providers. Folders can be created, deleted or renamed.

For more information, see Upload Collection.

Variant Management

The favorites popover only shows standard variants and variants created by the user. Shared variants created by other users are not shown.

For more information, see Variant Management.

Visual Filter Bar

Images have been updated to reflect the implementation status for SAPUI5 version 1.50.

• Images have been updated to reflect the implementation status for SAPUI5 version 1.50.
• Added user options for the visual filter dialog
• Added refresh behavior for the live/manual update
• Added do/don’t examples for visual filter selections

For more information, see Visual Filter Bar.

Services and Resources

Design Stencils

The following items have been added or updated in the stencils download package:

Launchpad

• SAP Fiori Launchpad (update)

Floorplans 

• Analytical List Page (update)
• Full Screen (Removed) -> deprecated
• Overview Page (update)
• Overview Page – Table Card, Quick View Card (update)
• Split Screen (Removed) -> deprecated
• Wizard (update)

UI Elements

• Button (update)
• Form (update)
• Filter Bar (update)
• Planning Calendar Legend New!
• Process Flow (update)
• Quick Confirmation Popover New!
• Quick View (update)
• Slider New!
• Smart Link New!
• Status Indicator New!
• Upload Collection (update)
• Variant Management (update)
• Visual Filter Bar (update)

Fonts

• SAP Icon Font (update to version 3.9)

For more information, see Design Stencils.