The interactive donut chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).

The interactive donut chart allows the user to filter by parts of a whole – depending on the sorting this would be the biggest or the smallest filter values by measure.

Usage

Use the interactive donut chart if:

• You want to give the user the possibility to visually filter data in the analytical list page.
• You want the user to gain insights before filtering large datasets with the visual filter bar.

Do not use the interactive donut chart if:

• You want to visualize data without using it for filtering.
• You are not using the visual filter bar.
• You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.

Responsiveness

The interactive chart is fully responsive and supports both cozy and compact content density.

Layout

The interactive donut chart consists of two mandatory areas – a visualization and an area containing the filter label and measure of the chart. The control itself doesn’t contain an axis title.

Filter Labels

The filter labels are left-aligned and may be truncated if not enough space is available.

Measure and Visualization

The interactive donut chart can display percentage and actual values as a measure but never a mix of both at the same time. Always display measures using one decimal point. Measures should always be visible and never truncated.

The interactive donut chart does not support coloring, and the default color of the bars should not be customized.

Both areas (visualization and filter label/measure) should be aligned and be displayed at the same height.

The visualization is always displayed on the left side, and should not appear in a different position relative to the labels, such as above or below them.

Behavior and Interaction

Selecting and deselecting a section resembles toggle-like behavior. If the user clicks a selected section, it becomes deselected, and vice versa. By default, the interactive donut chart supports multiple selection, allowing the user to select more than one filter value.

Guidelines

Use the interactive donut chart in the visual filter bar if you would like to have a filter for the highest or lowest values of a filter dimension. For example, to filter for the highest or lowest margin, revenue, or cost related to a project.

Within the visual filter bar, only the two biggest or smallest values (depending on the sorting order) are shown, while the rest are aggregated into the “Others” section.

In general:

• Display the measure labels using one decimal point.
• Do not display an axis title.
• Do not display any scrollbars.

Resources

The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).

It allows the user to filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.

Usage

Use the interactive line chart if:

• You want to give the user the possibility to visually filter data in the analytical list page.
• You want the user to gain insights before filtering large datasets with the visual filter bar.
• You want to measure trends and changes over time when filtering.

Do not use the interactive line chart if:

• You want to visualize data without using it for filtering.
• You are not using the visual filter bar.
• You have scenarios that do not depict time periods.
• You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.

Responsiveness

Layout

The interactive line chart consists of two mandatory areas – a filter label and an area containing the measure and visualization of the chart. The control itself doesn’t contain an axis title.

Filter Labels

The filter labels contain the filter criteria and are left-aligned. They may be truncated if not enough space is available. To avoid this, we highly recommend using the short format for time-related filter labels. For example:

• Year: 2017
• Half Year: H1, H2
• Months: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
• Quarters: Q1, Q2, Q3, Q4
• Week: W1-W52
• Weekdays: Mon, Tue, Wed, Thu, Fri, Sat, Sun
• Days: Jan 1, Jan 2 … Dec 31

Measure and Visualization

The interactive line chart can display percentage and actual values as a measure, but never a mix of both at the same time. Always display measures using one decimal point. Measures should always be visible and never truncated.

The interactive line chart does not support coloring, and the default color of the bars should not be customized.

Behavior and Interaction

Selecting and deselecting a section resembles toggle-like behavior. If the user clicks on a selected section, it becomes deselected, and vice versa. By default, the interactive line chart supports multiple selection, allowing the user to select more than one filter value.

Guidelines

Use the interactive line chart in the visual filter bar if you would like to have a filter for the highest or lowest values of a filter dimension. For example, to filter for the highest or lowest margin, revenue, or cost related to a project.

In the visual filter bar, the interactive line chart only displays the first or last six data points (such as last six days, last six months, and so on).

In general:

• Display the measure labels with one decimal point.
• Do not display an axis title.
• Do not display any scrollbars.

Resources

Adaption of standard cards

Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.

Guidelines

Custom cards inherit the drag and drop behavior from the standard cards. Only place custom cards on the overview page itself (not in the object stream).

Custom cards must:

• Provide information that is relevant for the user’s specific domain or role
• Offer an entry-level view of application content
• Represent a single topic, task, or context
• Provide a stable context and sustain it after navigating from the overview page to another application
• Be integrated in the Manage Cards dialog (show/hide cards)
• React on filtering (when a smart filter bar is used)
• Follow the guidelines for formatting dates, times, amounts, currencies, as well as for truncation (ellipsis). These guidelines are the same as for standard cards.
• Contain consistent texts and formatting, aligned with the other cards on the overview page. Check the UI text guidelines for the overview page for details.

Resources

Intro

With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.

When to Use

Use the list report floorplan if:

• Users need to find and act on relevant items within a large set of items by searching, filtering, sorting, and grouping.
• You want to let users display the whole dataset using different visualizations (for example, as a table or as a chart), but no interactions are required between these visualizations. An example use case might be reporting.
• Users need to work with multiple views of the same content, for example on items that are “Open”, “In Process”, or “Completed”. You want to let users switch views using tabs, segmented buttons, or a select control.
• Drilldown is rarely or never used, or is only available via navigation to another page, and not as free or flexible drilldown within the page itself.
• Users work on different kinds of items.

Do not use the list report floorplan if:

• Users need to see or edit one item with all its details. Use the object page floorplan instead.
• Users need to find one specific item, and the item or an identifying data point is known to the user (such as a code). Use the initial page floorplan instead.
• Users need to work through a comparably small set of items, one by one. Use the worklist floorplan instead.
• Users need to extract knowledge or insights from data, either to better understand the current situation, or to identify the root cause for a certain value.  Use the analytical list page instead.
• Charts are not only used for visualization. Users need to switch between integrated chart and table views (hybrid view). Use the analytical list page instead.
• Users need to see the impact of their action on a KPI. Use the analytical list page instead.
• Users need to see not only the result, but also the impact of their filter settings directly in a chart representation. Use the analytical list page instead.

Components

The list report is a full screen floorplan. It can also be used in flexible column layout, where it is usually displayed in the first column.

The list report page is based on the dynamic page, and is divided into a header area and a content area, as defined by the dynamic page layout.

Behavior and Interaction

Initial Focus

When the list report is loaded, set the initial focus as follows:

• If the header is expanded, set the focus on the first filter field (live update mode) or on the Go button (manual update mode).
• If the header contains empty mandatory fields, set the focus on the first empty mandatory field.
• If the header is collapsed, set the focus on the first table row.

Standard Naming Conventions

For all objects, follow the standard conventions for action buttons, the object name, and the title in the shell bar. For more information see:

• Object Handling – Naming Guidelines
• Launchpad Shell Bar – Page Title and Navigation Menu

Header Title

Variant Management

Content Area

General Layout

There are three basic list report layouts: simple content, multiple views, and multiple content. These are described in more detail below.

Working Modes

When the user edits a list item in a filtered list, the changed item might no longer match the filter criteria. For this use case, there are two alternative working modes:

• Worklist mode
  
  Users want to see a direct system reaction to their changes. Items that don’t match the current filters
  vanish immediately. This mode applies to about 80% of all use cases.
• Continuous working mode
  
  The user still needs the edited item, even though it no longer matches the filter criteria. The item stays in the list until the next filtering process is triggered. The item is marked, and a system message informs the user about the filter mismatch. This mode applies to about 20% of all use cases.

The app developer can choose the appropriate working mode for the app use case.

Actions

(1) Global actions in the header toolbar
(2) Table actions in the table toolbar
(3) Line item actions
(4) Finalizing actions in the footer toolbar

Responsiveness

Examples

Top Tips

Related Links

The interactive bar chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).

It allows the user to filter by categorical data. Depending on how the data is sorted, this would be the biggest or the smallest filter values by measure.

Usage

Use the interactive bar chart if:

• You want to give the user the possibility to visually filter data in the analytical list page.
• You want the user to gain insights before filtering large datasets with the visual filter bar.

Do not use the interactive bar chart if:

• You want to visualize data without using it for filtering.
• You are not using the visual filter bar.
• You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.

Responsiveness

Layout

The interactive bar chart consists of two mandatory areas – a filter label and an area containing the measure and visualization of the chart. The control itself does not contain an axis title.

Filter Labels

The filter labels are left-aligned and may be truncated if not enough space is available.

Measure and Visualization

The interactive bar chart can display percentage and actual values as a measure but never a mix of both at the same time. Always display measures using one decimal point. Measures should always be visible and never truncated.

The interactive bar chart does not support coloring, and the default color of the bars should not be customized.

Behavior and Interaction

Selecting and deselecting a bar is toggle-like behavior – if the user clicks  a selected bar, it becomes deselected, and vice versa. By default, the interactive bar chart supports multiple selections – the user can select more than one filter value.

Guidelines

Use the interactive bar chart in the visual filter bar if you would like to have a filter for the highest or lowest values of a filter dimension. For example, to filter for the highest or lowest margin, revenue, or cost related to a project.

The interactive bar chart used in the visual filter bar contains a maximum of three filter values with their corresponding measures.

In general:

• Display the measure labels with one decimal point.
• Do not display an axis title.
• Do not display any scrollbars.

Resources

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.

Usage

Use the avatar to display:

• An image, initials, or placeholder for a user
• Standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …)
• Icons
• Images with a transparent background
• Placeholder images

Do not use the avatar if:

• You want to include an image for any other use case (for example, to display decorative images or images in the content area that support or complement the content). Instead, use the image control.
• You want to display pictures in a carousel. Instead, use the carousel control.
• You want to show an interactive icon. Instead, use the button with an icon inside.

Responsiveness

Types

Avatar – User Image, Initials, or Placeholder

Business Images

Placeholder for Avatar and Business Images

Placeholder for Decorative Images in the Content Area

Images with Transparent Background

Icons

Badge

If an avatar is clickable, you can show an optional badge and icon.

• Use a badge to indicate that the avatar is interactive.
• Use an icon to indicate the action triggered by clicking the avatar.

This feature gives users visual affordance of the available action, and is particularly useful for images. To ensure that the image and the badge icon are properly displayed, don’t use the badge for any avatar sizes smaller than S.

When you use a badge and icon, always provide a corresponding tooltip for your avatar to indicate the action.

Use the following standard icons and tooltip texts:

Guidelines

• If you use a custom avatar size with initials or icons:
  • Make sure that the font size is consistent with the size of the control itself.
  • If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
    Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
• Accessibility: Provide an alternative text for each avatar image for cases when the image is not available or can’t be displayed.
• If the avatar is interactive, provide a tooltip to indicate the action (for example, Edit Image or Take a Picture).
• Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.

Styles

Resources

The semantic page is recommended as the basic layout for freestyle applications. It builds on the basic functionality of the dynamic page and adds predefined content elements to the header toolbar (1) and footer toolbar (2), such as a title, global actions, and finalizing actions.

Using the semantic page significantly reduces the development effort for app teams, and ensures that the placement of the header and footer content conforms with the SAP Fiori Design Guidelines.

When to Use

Use the semantic page if:

• You are building a freestyle application.
• You want to use a predefined layout to reduce development time.

Do not use the semantic page if:

• You are planning to use SAP Fiori elements, such as the list report, analytical list page, overview page, or object page.
• You want to implement an initial page or object page floorplan.
• You only need to display a small amount of information. In this case, use a dialog. If you must use the dynamic page, use letterboxing to mitigate the issue.

Components

The semantic page is based on the structure of the dynamic page. In short, the semantic page has the following elements:

1. Header title
2. Header content
3. Page content, dependent on the use case
4. Footer toolbar with finalizing actions

The control’s semantics determine whether content specified in the control appears in the header toolbar or footer toolbar.

Header Title

Mandatory Elements

• Title (1): The title is located on the left-hand side of the header title bar and is always visible.

Optional Elements

• Subtitle (2): The subtitle is always below the title and is often used to summarize the most important information.
• Breadcrumb (3): Depending on the use case, you can add a breadcrumb navigation.
• Key information (4): Key information is located in the middle area, and is left aligned. This can be text, mini facets, or KPI tags, for example.
• Global actions toolbar (5): The global actions toolbar for the entire floorplan is located on the right-hand side. Always use buttons for global actions, visualized either as text or icons. For more information, see header toolbar.
  Overflow menu: Actions move into the overflow from right to left. Icons are shown in the overflow menu with a corresponding text.
• Layout actions (6): These are actions like the Close or Full Screen / Exit Full Screen icons, which are mainly offered by the flexible column layout. Depending on the screen size, layout actions are placed either to the right of the global actions toolbar, separated by a divider line, or above the global actions.

For more information about the expandable and collapsible header and its features, see dynamic page.

Header Content

The optional header content is not defined in the semantic page and can be populated according to the use case.

Page Content

Like the header content, the page content is also not specified by the semantic page. It is proportionally the largest area of the layout and can be populated according to the use case.

Footer Toolbar

The footer toolbar is optional and contains the following components:

1. Message button (containing the message popover) on the left-hand side
2. Draft indicator on the right-hand side, just before the finalizing actions
3. Finalizing actions on the right-hand side

Behavior and Interaction

The interaction and guidelines for the dynamic page also apply for the semantic page. The actions in the semantic page and their order are predefined and follow the rules of the action placement concept. For more information about toolbars in general, see toolbar overview.

Initial Focus

When the semantic page is loaded, set the initial focus as follows:

• If the page is in display mode, set the focus on the first section.
• If the page is in edit mode, set the focus on the first empty mandatory field.
• If there are no mandatory fields in edit mode, set the focus on the first editable element or first action.

Responsiveness

The semantic page offers considerable freedom and flexibility. It is designed to adapt automatically to small, medium, and large screen sizes. Next to that the responsive behavior depends on the behavior of the content being displayed.

The title (sap.m.Title) and subtitle (sap.m.Text) on the left truncate in collapsed mode to save vertical space and wrap in expanded mode to offer the full text. This behavior needs to come from the respective controls for the title and subtitle. Overall, it is recommend not to show more than 2 lines of text in collapsed mode to avoid a disproportionate header height, especially on mobile devices, when no summary line is used. This can either be a combined title and subtitle or a longer wrapping title. For more information see wrapping and truncating text.

Key information (middle area, left aligned) stays as long as possible before it moves into the overflow.

Global actions also stay as long as possible, but have a predefined width depending on the available space. If no key information is available, the title and global actions automatically get more space. The toolbar follows the standard toolbar overflow guidelines, and adds buttons to the overflow menu from right to left.

The combination of a semantic page within in a flexible column layout and accompanying layout actions works as described for the dynamic page. The same applies for the summary line and letterboxing.

Top Tips

• Use always a header title.
• Use the header title and header content to provide the most relevant information and actions for your use case.
• Do not remove or disable actions within the header title when it is collapsed.
• Make sure that the layout actions in the flexible column layout are displayed correctly and never get hidden in the overflow.
• Start your application in expanded mode if users need further content or adjustment options to get started.
• Offer the pinning feature whenever users may need to fix the header content while scrolling through the page content.
• Activate the summary line on smartphones to help users focus on the actual content of the page.

Related Topics

Why do I need the design guidelines?

Great question! The SAP Fiori design is built into the SAPUI5 front-end library – a framework that offers over 170 UI controls and numerous layout types. This framework ensures that the layout, control behavior, and visual design are consistent in all SAP Fiori apps. However, this in itself doesn’t guarantee a delightful user experience.

Apps need to be designed with the user in mind. And they need to follow consistent, established interaction patterns that factor in the requirements of each use case. In a large software enterprise such as SAP, these principles and patterns need to be applied by numerous application development teams worldwide. Also, as SAP Fiori gains traction, more and more SAP customers are extending SAP Fiori apps or building their own. These users too are looking to SAP for design guidance.

In a nutshell, the SAP Fiori Design Guidelines offer a single point of reference to anyone involved in designing SAP Fiori apps.

The guidelines extend far beyond general principles and paradigms. They offer concrete guidance so you can execute on a user-centered approach, and they explain how to apply the different layouts, patterns, and controls in detail. The guidelines give you the bigger picture and put technical features into context. They help UX designers and developers make the connection between design considerations and the corresponding SAPUI5 controls.

What are the advantages?

Have a look at some of the benefits of using the design guidelines:

What’s New and Versioning

The guidelines are updated with every even SAPUI5 release. Check out the What’s New page to see what’s been added or revised in each guideline version.

You can browse through the different versions of individual articles using the menu on the top right-hand corner of the screen.

SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.

With SAP Fiori we offer design solutions that are usable, robust, scalable, and of enterprise-grade quality – implemented in several reference technologies.

The SAP Fiori design system:

• Accelerates and scales the design and development of enterprise software.
• Follows a modular design approach based on business roles, moving away from traditional monolithic transactions.
• Redefines the enterprise user experience by focusing on user tasks and workflows.

Components of the SAP Fiori Design System

The SAP Fiori design system operates on two levels:

• Universal values, principles, and practices apply across all technology platforms.
• SAP Fiori design languages provide standardized design guidance across multiple platforms.

Universal Values, Principles, and Practices

The following fundamental values, principles, and practices inform the SAP Fiori Design:

SAP Fiori Design Languages

The SAP Fiori design system supports multiple technology platforms – web, native mobile, and conversational UX. We refer to the variants for each platform as SAP Fiori design languages.

While the fundamental design approach is standardized across all platforms, the design languages cater for the specifics of the respective technology platforms. Each design language details out the look and feel, the available controls and floorplans/pages, and common functions like navigation and search.

The SAP Fiori design languages are already implemented in key reference technologies, including SAPUI5 for browser-based applications and SAP Cloud Platform Software Development Kits (SDK) for native Apple iOS and Android. This is complemented by comprehensive design guidelines and UI kits for app designers.

With this parallel approach, designing interactions for enterprise business scenarios can be simplified, accelerated, and unified across multiple platforms.

Using the SAP Fiori Design System

The SAP Fiori design system has been developed primarily to support internal development of SAP business applications.

However, we also make it available to our customers and partners to share the experience we have gained in more than 40 years as the leader in enterprise software.

We provide public access to the following resources:

• SAP Fiori Design Guidelines:
  SAP Fiori for Web
  SAP Fiori for iOS
  SAP Fiori for Android
• The open source version for one of the reference technologies that implements SAP Fiori for Web: OpenUI5
• Support material for the product version of SAPUI5 that is available to our customers and partners

SAP Fiori Evolution

SAP Fiori has evolved out of a small initiative into an industry-scale design system for all SAP products. The latest evolution is the new Horizon theme, which introduces an enhanced visual experience across all platforms, with improved accessibility, focus, and branding options. It’s designed to help users get even more out of the consistency, integration and intelligence features that came with Fiori 3. Read on to find out more about the key milestones.

• SAP Fiori 1.0
• SAP Fiori 2.0
• SAP Fiori 3
• SAP Fiori with Horizon

SAP Fiori 1.0

Key features of SAP Fiori 1.0

• Break down monolithic transactions into role-based and task-focused apps. 
• Enable a responsive experience across all devices. 
• Make use of modern and mobile-inspired interaction patterns.  

SAP Fiori 2.0

Following the success of the initial version of SAP Fiori, we needed to introduce new capabilities to ready SAP Fiori as a design system for all the scenarios SAP software addresses. With SAP Fiori 2.0, the design grew into a system that would not only be able to address simple use cases, but that would offer intuitive solutions for even the most complex business scenarios. As the new face for SAP’s flagship product SAP S/4HANA, SAP Fiori 2.0 introduced new floorplans that could accommodate large amounts of information and complex functionality in an intuitive and responsive way. Moreover, SAP Fiori 2.0 came with a new integrated and powerful user environment, based in the SAP Fiori launchpad, which introduced productivity features like notifications and improved navigation. With its second iteration, SAP Fiori introduced a new productivity tool, which evolved over time into the conversational digital assistant SAP CoPilot. 

Awarded with the prestigious Red Dot Award, SAP Fiori 2.0 was launched in October 2016. Soon after that, an additional award honored the innovative approach for integrating transactional and analytical features to leverage the possibilities of SAP’s in-memory technologies. Again, SAP Fiori 2.0 was implemented in SAPUI5 as the primary reference technology (version 1.42 – 1.70). In addition to this, SAP Fiori 2.0 was applied to a redesign of classic UI technologies like SAP GUI for Web, WebDynpro and CRM WebClient to offer a more coherent experience across technologies. Other product areas started adopting aspects of SAP Fiori 2.0, such as the new Belize theme to better integrate with SAP S/4HANA. With SAP Fiori for iOS, the first version of the SAP Fiori design system for native mobile platforms was released in partnership with Apple. Two years later, SAP Fiori for Android was announced as a result of a partnership with Google. 

Key features of SAP Fiori 2.0

• Scale the role-based and task-focused design approach to complex enterprise scenarios and native mobile platforms. 
• Offer a powerful productivity environment for business users with new scalable floorplans and patterns, including embedded analytics, notifications, search, and improved navigation. 
• Introduce conversational interaction and machine intelligence. 

SAP Fiori 3

The third iteration of SAP Fiori was announced in 2018. The continued success and its proven ability to scale and integrate latest trends and requirements already had established SAP Fiori as the design system for the intelligent enterprise. All product areas committed to work towards the adoption of SAP Fiori 3 as the design system that would integrate the experience of all SAP products. This decision was operationalized in a newly established product standard for UX consistency. 

As well as a new Quartz theme, SAP Fiori 3 introduced a number of new features that facilitate the integration of all SAP products to provide one coherent and consistent user experience. Some of the most important aspects are: 

• The top-most screen area, referred to as shell bar, has been redesigned to support all navigation and functional requirements found in the different products, and will include the possibility to switch between independent products. 
• Home pages are being redesigned to offer greater flexibility in terms of the level of detail offered. Simple navigation links complement the tiles provided in earlier versions, and we are working on detail cards to offer more information at a glance.
• A user can have multiple home pages, known as spaces. These can be provided by the organization to offer access to various domains and contexts, integrating the powerful possibilities of overview pages into the same lifecycle as the home pages. 

SAP Fiori 3 also takes a huge stride forward in integrating machine intelligence into the business environment by offering a more integrated experience for conversational interaction, machine-generated ratings and recommendations, and a whole set of design principles that ensure a human-centric approach to the interaction design for intelligent systems. With the concept of business situations, the system now can detect critical business contexts independently of predefined processes and workflows and recommend possible solutions to resolve them. 

The number of technologies supporting the Fiori 3 design system has been extended beyond the established reference technology SAPUI5 and the classic UI technologies to include the latest web technologies based on frameworks like Angular, React or Vue, and Web Components.  

Key features of SAP Fiori 3

• Establishes basic rules for consistency across all SAP products
• New Quartz theme
• New aligned shell bar for all SAP products
• Greater flexibility for home pages
• Integration of machine intelligence, focusing on a human-centric approach
• Adoption across a broader range of technologies 

SAP Fiori with Horizon

The new Horizon theme is an evolution of the SAP Fiori design system. The theme offers a modern and fresh look with a new vibrant color palette, rounded corners, and softer shapes. The Horizon theme also comes with a new Horizon icon font and optimized typography.

All elements have been designed with accessibility in mind, and the Horizon theme follows the recommendations for the W3C Web Content Accessibility Guidelines WCAG 2.2. (“Perceivable” principle). Stronger contrasts, improved spacing, and a clearer visual hierarchy make it easier for everyone to work intuitively.

Four Horizon themes are available:

• Morning Horizon (light version)
• Evening Horizon (dark version)
• High Contrast White (accessibility version)
• High Contrast Black (accessibility version)

Horizon is generally available for productive use by customer and partner development teams using SAP’s UI technologies for developing web-apps as well as native mobile apps. For web apps developed with SAP Business Technology Platform, Horizon was made generally available for productive use with SAPUI5 version 1.102.

Key features of SAP Fiori with the Horizon theme

• New vibrant color palette that meets WCAG AA accessibility standards
• Enhanced customer branding options
• New icon set across all platforms
• Enhanced focus with more contrast, space, and visual hierarchy
• Two flavors (light and dark), plus two high-contrast accessibility themes

Related Links

The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (1, 2, 3). Users can freely resize the columns, switch between different layouts, and view the rightmost column in full screen mode.

The flexible column layout behaves responsively, which makes it suitable for both desktop and mobile devices. Depending on the available screen width, an optimized layout is loaded to ensure the best possible user experience on each device. The flexible column layout is a generic control. As a layout container, it does not provide any content itself.

The flexible column layout is already incorporated within SAP Fiori elements.

Usage

Use the flexible column layout if:

• You want to create a list-detail or list-detail-detail layout, in which the user can drill down or navigate.

Do not use the flexible column layout if:

• You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main column with additional side columns on the left and/or right. If you want to display additional content to enrich the main content and to help users better perform their tasks, use the dynamic side content instead.
• You want to create a dashboard with context-independent pages.
• You want to open multiple instances of the same object type. Use the multi-instance handling floorplan instead.
• You want to split a single object into multiple columns, or display only a small amount of information.
• You want to embed the SAP Fiori launchpad or overview page into one of the columns.

Structure

As with all layouts, the flexible column layout is embedded in the shell bar of the SAP Fiori launchpad. From the shell bar, users have access to the launchpad services, including the home page, search, settings, and help. Apps are embedded in the shell and have little influence over its features. The shell bar also provides the back navigation and the app title, including the navigation menu.

Depending on the current layout and display size, the flexible column layout consists of one, two, or three horizontally-aligned columns. Each column contains content that is not provided by the flexible column layout itself. The flexible column layout is not restricted to a specific floorplan, as long as the floorplan you use is responsive down to phone size. However, we recommend using the dynamic page.

Components

The flexible column layout offers a few simple actions that allow users to adapt the current layout according to their needs.

Note: Some of the actions (illustrated by blue lines in the image below) recover the last state of the layout to which they refer. In other words, the result of the action depends on the previous state of the layout.

Responsiveness

The flexible column layout changes its behavior for sizes XL, L, M and S in real time whenever the user resizes the screen.

If no previous state has been saved, ensure that the default layout appears automatically. For example, if the flexible column layout was initially loaded in size S and then, the user navigates to the second column and changes the browser window to size M, the default 2-column layout for size M (67% : 33%) should be shown.

Full Screen Navigation

After switching a column to full screen mode, selecting the Back icon exits the full screen mode.

If the screen is in full screen mode, and the user navigates forward, also show the next column in full screen mode. If the user navigates backward, go back in full screen mode until the point where the user initially switched to full screen. If the user then clicks Back again, return to the multi-column mode.

Footer Toolbar

Each column of the flexible column layout can have its own footer toolbar. There is no overall footer toolbar that spans several columns.

Overlapping Header

The flexible column layout can display multiple floorplans side-by-side. However, it is not designed for splitting a single floorplan into several columns. As a result, there is no overall header that spans several columns. If you need to show additional content within a floorplan, use the dynamic side content.

Empty Details Column

Do not display an empty details column when using the flexible column layout. For example, if no items have been selected in the second column, do not show an empty third column.

Usage With One or Several Initial Full Screen Pages

Some use cases require starting an application with one or more full screen pages. You can do this by using the first column of the flexible column layout in full screen mode. This allows you to show one or several initial full screen pages with different content. Because of technical constraints, you must always use the flexible column layout to show this initial content.

Content Padding Inside Columns

The flexible column layout doesn’t provide additional paddings around the content area. Since some controls have different internal paddings, please ensure that they are aligned correctly.

Navigation Indicator

It is important for users to be able to scan through the list and quickly identify the item for which the details are being shown in the second or third column. This is especially important for large lists. For this case, you can enable a “navigated” indicator for tables and lists to mark the item that was last opened.

If there are several tables/lists on one page, ensure that the indicator shows only for the last navigated item. There should never be two navigation indicators on one page.

SAP Fiori Elements

The flexible column layout is available in SAP Fiori elements for scenarios that use draft handling. If you use draft handling, we strongly recommend using the SAP Fiori elements implementation, wherever possible. The implementation already includes the navigation and routing behavior, as well as the Close and Full Screen actions, for example. Starting the application with two columns is also supported by SAP Fiori elements.

Resources

SAP Companion provides context-sensitive in-app help and is an essential part of the user experience in SAP cloud applications. It displays as an overlay on top of the current application.

You can use SAP Companion to provide two forms of in-app help in SAP Fiori apps:

• Context help: Context-sensitive help for specific UI elements
• Guided tours: Step-by-step assistance to lead users through a process

SAP Companion was formerly known as the Web Assistant.

When to Use

Use SAP Companion if:

You want to give users access to additional context-specific information as they work, such as:

• The meaning of a field in the current context
• The implications of making certain settings
• How a field value is calculated
• The steps in a process
• Best practices

Do not use SAP Companion if:

• The UI element is self-explanatory in the context.
• You could reduce the need for in-app help by improving the design of the app. Do not use SAP Companion as a “crutch” for documenting the shortcomings of an app. Before documenting complexity, always check if there is a way to simplify the user experience. 

Responsiveness

Layout

The SAP Companion overlay has the following elements:

Content Types

Context Help

The context help provides context-specific help information for UI elements directly within the application. Only help information that is appropriate for the current screen is shown. The intention of the context help is to show process-independent information that clarifies the current screen. Hotspots emphasize the UI elements for which help is available.

Guided Tours

Guided tours take the user through a process step-by-step. You can use them to help users understand and complete end-to-end processes more quickly, and to share best practices. Guided tours can be used across one or several applications.

Each process step is represented by a bubble that contains appropriate instructions and information for the user. Bubbles can either point to a UI element or show in the center of the screen (for example, to display general information).

Behavior and Interaction

Opening SAP Companion

If SAP Companion content is available, a Help option appears in the user actions menu of the SAP Fiori launchpad. Clicking the icon opens the SAP Companion overlay with the carousel.

Using Context Help

Hotspots emphasize the UI elements for which help is available. Clicking on a hotspot shows a bubble with the help content for that field or screen area. All help content is shown in a carousel that is shown at the right side of the screen. A laser highlights the connection between the help content and the selected hotspot.

Using Guided Tours

To start a guided tour, the user selects a dedicated “Guided Tour” tile in the carousel. You can also let guided tours start automatically when the user first works with an app. In this case, the SAP Companion overlay opens automatically.