SAPUI5 is the main framework for developing SAP Fiori web applications. Check out this 2-minute video below for a quick overview.

SAPUI5 Development Toolkit for HTML 5

You can use the links below to download the following SAP fonts:

• 72 Font Family
• SAP Icon Font
• SAP Business Suite Icon Font

Installing the 72 font family and the SAP icon font are prerequisites for using SAP web UI kits, such as the SAP S/4HANA Web UI Kit.

Font 72

Font 72 is SAP’s proprietary typeface and is the standard typeface for SAP Fiori apps.

Procedure

1. Download the desktop or web font families.
2. Unpack the relevant ZIP files: 72_Desktop / 72_Web / 72Mono_desktop / 72Mono_webfonts.
3. For desktop fonts: Double-click each .ttf file and click Install.

The 72 font download is made available under the Apache 2.0 license.

SAP Icon Font

To use the UI kit, you need to install the standard SAP icon font. You’ll also need to install this font locally if you want to display SAP Fiori icons in other applications, such as PowerPoint. For more information about the SAP icon font, see the iconography guidelines for the Horizon and Quartz themes.

SAP Icon Font Versions

Separate icon font versions are available for the Horizon theme (version 5.10) and the Quartz theme (version 4.22). Both overwrite the standard sap-icons font file.

If you need to work with both icon fonts in parallel, you can use the version 4 preview (instead of version 4.22) to install the Quartz icon font alongside the Horizon icon font. The icons are then stored in separate font files:

• Horizon icon font: sap-icons.ttf
• Quartz icon font: SAP-icons-v4-preview.ttf

Procedure

1. Depending on your operating system, we recommend uninstalling any previous SAP icon font version and rebooting your system before installing the latest icon font.
2. Download and install the icon font version(s) you need:
   a) Unpack the ZIP file sap-icons… .zip.
   b) Double-click the SAP-icons… .ttf file and click Install.

SAP Business Suite Icon Font (Optional)

In some application areas, you may also need to use the SAP Business Suite Icon Font (BusinessSuiteInAppSymbols). This icon font contains application-specific icons primarily used in SAP S/4HANA apps.

Separate icon font versions are available for Horizon theme (version 2.086) and the Quartz theme (version 1.086). Both overwrite the standard BusinessSuiteInAppSymbolsfont file.

Important: To use the SAP Business Suite icon font in your app, it must be registered as a custom font in sap.ui.core.IconPool.

Procedure

1. Download and unpack the ZIP file BusinessSuiteInAppSymbols_...zip.
2. Install the SAP Business Suite icon font: Double-click the BusinessSuiteInAppSymbols.ttf file and click Install.

Related Links

SAP Jam is the standard collaboration tool in SAP Fiori. There are various ways of integrating SAP Jam into the SAP Fiori experience:

• Using tiles: Two tile types are available for use in the SAP Fiori launchpad; one for notifications, and one to navigate to an SAP Jam group.
• Using the menu option: You can add the following feature to the share menu in the footer bar of the app: Share in SAP Jam.
• Using a group feed / timeline: You can offer SAP Jam collaboration in a social timeline within your app. SAP Jam integration comes out of the box in the group feed component, or can be implemented manually for the timeline control.

SAP Jam Tiles for SAP Fiori Launchpad

Share in SAP Jam

Discuss in SAP Jam

The Discuss in SAP Jam dialog has been deprecated since SAPUI5 version 1.34. However, the same functionality can easily be achieved using the group feed component, which is described below.

Group Feed Component

Timeline

Type Selection

Suggestions

Result List

Personalized Search

Filters

A filter icon in the top left-hand corner offers additional options for filtering the search results. When the user clicks the icon, a filter panel appears on the left-hand side. In this panel the user can change the object type, which may also be depicted as a hierarchy (depending on the system configuration).

Once the results have been limited to a certain object type, thus ensuring a homogeneous result set, result-specific filters are offered. Only meaningful filters are included. For example, if all results are for the same country, the country filter is not shown.

Up to 5 one-click options are available for each filter. You can show the selection options in a list, or visualize them in a bar chart or pie chart. Multiple selection is supported for all visualizations.

Once the filter panel has been closed, the applied filters are visible in an infobar above the result list. On the right of the infobar, all filters can be cleared without reopening the filter panel.

Advanced Filters

Configuration

Creation of Search Models

Resources

The shell bar is a universal header element that appears at the top of all screens. It provides the product or application context and offers global functions, such as search, notifications, and the user profile.

Components

Mandatory

The following components of the shell bar are mandatory:

1. Logo: Visual branding elements like the SAP logo or a company logo.
   Optional: Clicking the logo can navigate back to the product’s home page.
2. Title: Product name or application name.
   Optional: The title can offer access to a navigation menu.
3. User profile: Provides access to user-specific settings.

Optional

The following elements of the shell bar are optional

1. Back or side navigation button:
   • Back: Allows back navigation.
   • Side navigation button: Opens and closes a vertical navigation menu.
2. Menu: Option to display a menu when clicking the title.
3. Second title: Provides additional information on the context, such as the tenant name or scope.
4. Search
5. Notifications
6. Container for additional shell bar actions

Back and Branding Area

Title and Navigation Menu

Title

The title inside the shell always indicates the user’s position in the system. The navigation menu is a quick way to browse the hierarchical structure of applications.

For the home page, the title is Home. In the app finder, it changes to App Finder.

In the initial screen of an application, the title is usually the application name, such as Manage Products. This name must match the app name used on the launchpad tile.

Exception: Flexible Column Layout

In the flexible column layout, the shell bar displays the application name. The title only changes when the user switches to full screen mode or navigates. On size S, the title changes when the user navigates between the different panels.

Navigation Menu

Clicking the title in the shell bar opens the dropdown navigation menu. The height of the container depends on its content.

To close the menu again, users can click the page title, the dropdown arrow, or anywhere outside the navigation menu.

This interaction applies for all device types.

Navigation Hierarchy

The navigation menu displays the navigation path that led to the current page within an application. The current hierarchy level is represented by the page name only. Selecting a navigation entry opens the respective page in-place.

The menu only shows hierarchy levels within the current application, and there is only one entry per hierarchy level.

The entry page of an app always displays as “Home”, and is the first entry. Drill-in navigation adds further hierarchical entries to the navigation menu. If a user navigates to an app using a deep link, the navigation menu also shows the hierarchy levels for the previous app.

The entries are ordered according to the hierarchy, starting with Home, down to the current hierarchy level (= page name). Each entry consists of a title, subtitle, and icon.

All My Apps

All My Apps lists the main applications assigned to a user’s role. These include apps from the home page group and the app finder (catalog).

Enterprise Search

The Search icon for the enterprise search is on the top right, to the very left of the group. You can use it to search across all apps and business objects, such as materials, customers, and maintenance plans. Users can access the search function from any screen within the SAP Fiori launchpad.

Optional Actions

In addition to the buttons for the enterprise search and notifications, key users or administrators can add more actions to the shell bar. The optional actions are placed to the right of the search button. If an action is placed in the shell bar, it is no longer available in the user actions menu.

Since actions in the shell bar are very prominent, we only recommend placing additional actions in the shell bar if users need to access them frequently.

User Actions Menu Button

Responsiveness

The launchpad shell bar is fully responsive.

On size S, the search and notifications are displayed behind the overflow menu icon.

Lean Mode

The user can right-click a tile and choose Open Link in New Tab or Open Link in New Window from the context menu. In these cases, the app opens in lean mode, and its shell only shows contextual services for the app.

The lean mode was introduced to avoid inconsistent behavior when working with different tabs or windows in parallel, and to improve performance.

The following services do not appear in lean mode:

• Shell: Home, Enterprise Search, Notifications
• Navigation Menu: Related Apps, All My Apps, Home (from navigation hierarchy)
• User Actions Menu: Settings, App Finder, Recent Activities, Frequently Used

Related Links

The SAP Fiori launchpad home page is the first page that users see after they have signed in. It is the main entry point to SAP Fiori apps on mobile and desktop devices.

The launchpad home page displays tiles and links that allow the user to launch apps, and may also show additional information. The page can be personalized and apps can be added, removed, or bundled in groups.

The SAP Fiori launchpad home page must be used for all SAP Fiori apps.

Responsiveness

Components

Modifying the Home Page in Tab Bar Mode

Users can personalize the home page in tab bar mode by choosing Edit Home Page in the user actions menu.

In addition, they can use Short Drop and Long Drop functions to move apps from one tab to another.

Long Drop

Drag any app onto another tab and keep it there for a short while. The selected tab opens, and you can position the app where you want it.

Note: The focus switches from the current tab to the selected tab. A message toast confirms that the app was moved.

Behavior and Interaction

Users can personalize their home page in a variety of ways. Tiles can be rearranged directly, but most actions require the user to activate the edit mode. For example, edit mode needs to be active to rearrange groups or customize tiles.

To enable more enhanced personalization functions, the user needs to open the user actions menu, and then select Edit Home Page.

To quit personalization, the user selects Done in the footer toolbar.

Tile and Link Actions

Generic Actions

(via Edit Home Page only)

When Edit Home Page is activated and the user clicks a tile, an action sheet appears showing a list of generic actions:

• Settings opens a dialog in which the user can change the information that is displayed on a tile, such as the title or description.
• Move opens a dialog in which the user can move the selected tile to a different group.
• Convert to Link transforms a tile into a link, while Convert to Tile transforms a link into a tile.

Tile designers can also add further generic actions.

Remove

(via Edit Home Page only)

Users can remove tiles and links with the Remove icon .

Add

Users can add apps with the Add icon ( ), either from an empty group in edit mode, or by selecting App Finder in the user actions menu.

Move

Users can rearrange tiles and links by dragging them to a new location in the same group, or by dragging them to a different group.

Open

Clicking a tile or link opens the underlying app or content item.

Group Actions

Via Edit Home Page, users can customize groups to their needs:

Adding Groups

Users can add a new group by clicking the + Add Group button. The user will be prompted to enter a new group name. If the user doesn’t immediately enter a name, the placeholder text Enter group name will appear as the default name. Once the group is created, it will appear below + Add Group on the launchpad home page.

Moving Groups

The user can rearrange a group by dragging it to a new location in the group panel.

Renaming Groups

Users can rename groups by clicking a group name. A text box appears in which the user can enter the new name, which is then saved automatically. To discard a change while the text box is visible, the user must press Escape.

Deleting Groups

Users can delete groups they have created (including all the tiles they contain) by pressing Delete. Note that predefined groups, such as My Home, or locked groups (as defined by customers) cannot be deleted.

Resetting Groups

By clicking Reset, a user can reset a predefined group to its initial state as defined by an administrator.

Hiding Groups

Resources

SAP Fiori launchpad services are standard functions and features that are provided at launchpad level. They include:

• Recent Activities
• Frequently Used
• App Finder
• Settings
• Edit Home Page
• Contact Support
• Give Feedback
• App Settings
• About
• Sign Out
• Save as Tile

Most of the services are accessed via the user actions menu.

Behavior and Interaction

User Actions Menu on the Home Page

User Actions Menu in Applications

Overview of Services

Recent Activities

This service displays a list of the most recent user activities in reverse chronological order (most recent first). Recent activities are apps the user has been working with, or recent search queries, for example. The Recent Activities list can contain up to 30 items.

A single list item is represented by its title, the type of object, and a time stamp. For generic functions, such as search, an icon appears next to the list item. Each item can be listed only once. The last usage updates the timestamp and moves the item to the top of the list.

The whole list item triggers navigation to the corresponding URL target. However, there are no separate interactive elements within a list item. Apps start in the last state that is technically recoverable, enabling users to carry on where they left off.

Frequently Used

This service lists the items used most often during the last 30 working days (most frequently used first).

A single list item is represented by its title and the type of object. For generic functions, such as search, an icon appears next to the list item. Each item can be listed only once.

The whole list item triggers navigation to the corresponding URL target. However, there are no separate interactive elements within a list item. In contrast to the Recent Activities app list, apps opened via the Frequently Used tab start in their initial state, enabling users to start afresh.

Settings

Edit Home Page

Contact Support

Give Feedback

App Settings

About

Sign Out

Save as Tile

Resources

In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.

If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.

SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.

Guidelines

When to Switch ON Letterboxing

• You want to make the UI appear simple and focused.
• There is too little content on the UI to require using the full width of the screen.
• The content cannot respond to large differences in size, and stretching the app would distort the content and lead to poor usability.

Letterboxing can be switched on or off per entire application or for individual pages within an application. Only enable letterboxing for individual pages if the app contains one or a few pages that benefit from using letterboxing.

If you want to use letterboxing for an application, set the appWidthLimited property of the sap.m.Shell control to true.

In some cases, applications may need to have the flexibility to change the width at runtime for different views. Example: fullWidth in view A and letterboxing in view B.

Through a new API, apps can change the width in the AppConfiguration service at runtime for different views.

When to Switch OFF Letterboxing

• A lot of information needs to be displayed. This will require the app to accommodate the content to all intermediate screen sizes in a graceful way.
• The user needs to have as much content as possible on the screen without having to scroll. This has to be handled carefully as it can create a crowded and messy appearance.

Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse).

SAP Fiori combines the hub-and-spoke navigation model with an application network model. A central home page (the SAP Fiori launchpad home page or SAP Fiori launchpad spaces) is the center of all navigation paths. The user starts from the home page and navigates forward into the apps through multiple screens. Multiple apps can form a process. The ubiquitous back navigation function allows the user to go back to the previous screen. The user can always navigate back to the launchpad home page via logo. The logo navigates back to the first page of the launchpad. This is often My Home, if available.

Navigation Between Apps

The tiles on the home page of the SAP Fiori launchpad represent navigation anchors to the individual apps. By selecting a tile, the user navigates to the corresponding app. It is also possible to integrate legacy UI technology through these tiles. Non-SAP Fiori UI technologies open in a new tab or window (for supported desktop operating systems only).

Individual apps can be connected to build up navigation flows. There are different ways to build a connection:

• Navigation via links (to open other objects or lists)
• Navigation via line items in a list or table (to display more details about the item in the list/table)
• Navigation via other UI elements
• Actions on buttons (to trigger transactional tasks)

By transferring context between apps, one modular app can build on the input of the previous app(s). This way, individual apps can be reused in different contexts. More complex functionality can be combined using individual modules or apps. After each navigation step, the user can always navigate back using the browser’s back button or the back arrow icon in the shell bar.

Back and Home

The launchpad shell bar is always located at the top of each app. It displays the logo, which triggers navigation to the home page, and back button, which triggers navigation to the previously visited page.  An exception is made when a deep link to an application is called and there are no SAP Fiori entries in the browser history. No back button should be displayed.

Navigation Within Apps

Back Navigation

The user can always navigate back to the previous page with the back button in the upper left corner of the shell bar. In addition, the browser’s back arrow icon (  ) offers the same function. The browser history can be used to go back to previous steps. All pages can be bookmarked and the URL can be forwarded to give other users access to the same page.

Exceptions

Switching between display and edit mode is not a navigation step and therefore does not result in a new URL. An exception is made for the draft. Here, a unique number is added to the URL to distinguish drafts from active documents.

More information:

• Behavior in edit scenarios: Simple Objects (Create, Edit)
• Deep linking and bookmarking: Draft Handling

Flexible Column Layout

In apps with a flexible column layout, the back navigation behaves slightly differently. When the app is initially started, Back takes the user back to the previous page. Any drill-in or forward navigation usually opens a new column in the flexible column layout. Back closes either the rightmost column (leftmost column in right-to-left languages) or the full screen mode, depending on the user’s last action.

For more information, check out the navigation section of the flexible column layout article.

Edit and Display

Switching from display mode to edit mode is not a navigation step and the URL itself should therefore not change, except for the GUID which is added to the URL. Hence, no new entry is made in the browser history.

Bookmarking draft version

After switching to edit mode, a GUID is added to the URL to identify the current draft version. The user may bookmark the current changes as a draft version. If the user switches back to display mode via Save, the object will be shown with the saved changes. If the user switches back to display mode via Cancel, the object will be shown without the changes.

Navigating to draft version

When the user navigates to a bookmarked draft version, a dialog pops up prompting the user to decide whether the application should continue in edit mode with changes of the draft version, or whether the active version should be shown in display mode.

• If no draft version exists, the active version is shown in display mode.
• If the user rejects the edit mode, the draft version is deleted and the active version is shown in display mode.
• If the bookmarked draft version does not contain any changes, no dialog (popup) is shown. The active version is shown in edit mode. 

Exceptions

• If another user is locking the object, the active version is shown with the status Locked by… in display mode.
• If another user’s lock on an object has expired, the active version is shown with status Unsaved Changes in display mode.

The behavior in edit scenarios is described in the article on managing objects. More information about deep linking and bookmarking can be found in the draft handling article.

Entries in Browser History

The state of an app is reflected in its URL. This allows the user to bookmark or send a link to the app in this specific state. But when does a new URL need to be created?

In general, there are three cases:

1. Always create a new entry in the browser history when the user opens a new app. When the user navigates to a different page within the same app, create a new entry to allow back navigation to the previous page. In these cases, users can return to the previous page using the back button or the browser’s back arrow icon.
2. Replace the URL in the browser history if only parts of the page are changed. This is important to avoid unnecessarily long back chains when navigating back in the browser history. An example of this is when the user selects an item in the list column of a flexible column layout on a tablet or desktop device. On smartphones, the flexible column layout is divided into separate pages, and rule 1. above applies: a new entry needs to be added to the history. You will also need to replace the URL when the user navigates through a list of items using the up/down arrows, or applies a filter to a list.
3. Keep the same URL if you don’t need to mark a new state for the app. This could be the case after choosing a selection. The URL also stays the same when switching between display and edit modes (see exception below).

Exception

There is an exception when working on a draft version (see Edit and Display). In this case, the URL stays unchanged and a GUID is added to identify the draft version.

Tip: Learn more about bookmarking and deep linking in the draft handling article.

Deep Links

A page of an application that is not its entry page can be bookmarked or shared as a deep link. Ideally, the full UI state of the page is retrieved. Technically, this includes every part that is represented in the URL.

For example, a list-detail app in a flexible column layout gets a new URL when another entry is selected in the list and shown in the details area. This state with the new item can be used as a deep link.

If a deep link to an application is called and there are no SAP Fiori entries in the browser history, do not display a back button.

Apps with draft handling functionality allow deep linking to a page in edit mode. Apps without draft handling allow deep linking only to the display mode of an object. In the latter case, the deep link always navigates to the display mode. For more information about deep linking and bookmarking for drafts, see Draft Handling.

Calling a Deep Link

Navigation to a deep link ideally restores every detail of the page. Technically, this includes all parts reflected in the URL. The use case and feasibility determine which changes are reflected in the URL, but the rules mentioned in this section must be fulfilled. If a deep link leads the user to an object that no longer exists or can’t be accessed, an empty page is shown. If a user calls a deep link that has been forwarded by another user, the results displayed may vary due depending on authorization levels.

Deep Linking to Flexible Column Layouts

A deep link to a flexible column layout shows the state of the layout when it was bookmarked or saved.

Guidelines and Behavior:

• Load the exact layout that was stored in the deep link. For example, if the user bookmarks a 3-column layout set to 25% + 50% + 25%, load this layout when the user opens the deep link.
• If a deep link leads to an object page, scroll the list to the selected entry. If possible, show the entry as selected.
• If the object is not yet loaded in the list (growing list), show the beginning of the list next to the details area. In this case, there is no selection in the list.
• If a deep link leads to an object that no longer exists or can’t be accessed, show an empty page inside the layout panel in which the object resided.
• If the deep link points to a line item in the details area, all the rules for the flexible column layout apply. The Back button above the line item details navigates to the previous page.
• Since multiselection mode in the flexible column layout is not normally reflected in the URL, a deep link leads to the previously selected object. The same state is shown when closing the multiselection.
• Depending on the use case, you can more information to the URL, such as a search term. In this way, you can ensure that the corresponding information is also restored when a deep link is called.

For more information about deep linking and bookmarking for drafts, see the draft handling article. For the flexible column layout, see the flexible column layout article.

Quick View

Users can navigate from a quick view to those of the different users/objects. In this case, a back button is placed on the top left of the quick view box to allow the user to navigate back to the first or previous quick view. All other links lead to new pages and close the quick view.

Smart Link

The smart link opens a popover containing detailed information about the corresponding object, as well as links to related apps. Opening related apps follow the guidelines described in the section Navigation within Apps.

Native Operating System

How can SAP Fiori apps be embedded into the native operating system?

Any SAP Fiori app should run in a standard HTML5 browser. Like with any other webpage, users can create shortcuts to either the launchpad or the individual app to support a more integrated experience. The user can save a reference to an app on the desktop or home page of the native OS. When this reference is followed, the app can be launched directly, bypassing the SAP Fiori launchpad home page. On smartphones, this hides the browser controls and displays the app in full-screen mode.

The same applies to the SAP Fiori launchpad itself. The reference to the launchpad can also be stored on the desktop or home page of the native OS.

Related Links

SAP icons have been created with a friendly, yet elegant style that is consistent in terms of size, stroke and balance. The icons are tailored for simple and direct user interaction, using metaphors that are easy to understand. Each icon has been hand-crafted and aligned in several formats used by SAP applications. The icons are essentially vector graphics that can be resized easily without compromising their appearance.

Design Language

The design language for Quartz-themed icons used within SAP products is created to work across all supported browsers, devices and operating systems. The style can be described as:

• Simple
• Fresh
• Serious
• Neutral

This approach is meant to communicate the simplicity, sophistication, and integrity represented by SAP solutions. The style integrates basic geometric shapes in order to give a more prominent appearance.

Icon Formats

Icons can be supported in multiple file formats. However, SAP delivers icons in a font format by default. The SAP icon font contains multiple icons in one file with a small file size, making it convenient to deliver updates with each SAP product release. Custom icons can even replace the SAP icon font if an alternative format or style is desired. Additional icon font files can also be added to the SAPUI5 icon pool.

For more information on custom icons, see the development documentation.

SAP icons are also part of the theming base content, which is available for all technologies supported by SAP.

Icon Semantics

The Geometric Icon Grid System

A Closer Look at 16px Icons

A Closer Look at 32px Icons

Arrow Styles – Thin

Arrow Styles – Emphasized

Border Radius – Regular

Border Radius – Emphasized

SAP Icon Font

To ensure availability of SAP icons for all technologies supported by SAP, the icons are part of the theming base content and also as part of OpenUI5. The SAP icon font is made available under the Apache 2.0 license.

Related Links

Follow the links below to find out more about iconography.

SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.

Designing 72 from the ground up made it possible to meet SAP Fiori’s typographic requirements, including:

• Legibility enhancements: Optimize for screen use.
• Font styles: Support a robust typographic hierarchy.
• Brand voice: Be credible and humane.
• Character set: Accommodate complex content.
• Language support: Support Windows Glyph List.
• Accessibility: Improve character recognition.

Typography with 72

“72” replaces the default system fonts to improve the typographic system for SAP Fiori applications. The design has been meticulously crafted to portray a look and feel that is more trustworthy, friendly and modern, communicating the visual language of SAP Fiori. The metrics of the system fonts have been kept, to ensure compatibility within all controls. Improvements of the individual characters have been made, which also means that less screen width is required, resulting in reduced truncation issues. With all these enhancements, along with the humanist influences within the fine details, 72 greatly improves the legibility of SAP Fiori applications.

Language Support and Fallback to System Font

Language coverage is one of the most important requirements of a typeface, depending on the number of countries in which your applications need to be available. Beyond the languages the font supports, fallback solutions need to be considered. If the defined fonts cannot be displayed when an application initially loads, a fallback font is defined in the style sheet. Defining a fallback to a sans-serif system font that is readily available on every user’s device is a simple solution to load applications in any language. The font stack that is used within the CSS includes 72 with a fallback to system fonts such as Arial and Helvetica in combination, or Roboto for Android.

Here is an example of how theme parameters are used to specify a font stack. Notice that there are two versions of the 72 font; the first is a smaller subset to help improve performance and the second is the full version:

sapFontFamily: “72”, “72full”, Arial, Helvetica, sans-serif;

The fallback system fonts also have the advantage of zero loading time, ensuring that there is always a consistent font available that works with the fresh, clean, and minimalist SAP Fiori style. The font stack used comes with a full Unicode solution when special characters are needed. For all the languages that SAP Fiori will need to support, system fonts are available. 72 is integrated into the control set, making customization easy. The font stack can also be modified to achieve an individual result.

Accessibility

Optimized for screen consumption, 72’s design enhancements increase legibility, readability and ultimately, accessibility. A wider apex and open counters help with character recognition at smaller sizes. Differentiation of character details, such as the number “1” and the lower case “l” versus the capital “I”, makes the characters easier to distinguish and improves the overall reading experience.

Headlines and Font Styles for UI Controls

• Headlines 1 to 6: Titles are defined in several sizes and styles that help to visually identify the context of application pages or grouped content within the user interface. Examples of headlines include the page title, object header title, list, form, table, chart, timeline, and feed titles. Headlines generally use a regular font weight by default, but this is flexible depending on the control component or application context.
• Small text: Used for exceptional use cases within controls, such as time stamps or a unit of measurement. We do not recommend using small text size as the main UI text size within controls.
• Medium text: Default text size used in controls, such as buttons, inputs, tables, or a tree.
• Large text: Stand-out text controls, such as the author name in a feed, or the file name for a collection of uploaded files.
• Key performance indicators or custom display sizes: KPI numbers or custom display text sizes may have individually-specified sizes and font weights depending on the control component or application context. Consider visual accessibility and the typographic hierarchy before choosing any custom size or font weight. Light font weights are recommended only for large sizes that are clearly visible and should never be used for small textual information or labeling. If a UI is specially designed to be visible on very large displays from far away, consider emphasizing key information using a bold font weight.

Related Links

For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.

Responsive and adaptive design allow Fiori apps to run on desktops, tablets, smartphones, and hybrid devices. As users switch across devices, our apps automatically accommodate the resolution, image size, and scripting. This way, our users can work how and where they want, regardless of device.

Responsive Design

One of the most compelling factors of SAP Fiori is that our applications need to be developed, configured and maintained only once for all changes to become effective across all devices. This way, the end users gets a consistent experience no matter which device they use. SAPUI5 makes responsive design easy by offering a wide range of UI controls that automatically adjust to different form factors and interaction styles. Additionally, SAPUI5 lets you adjust the size of the controls to match the type of interaction (such as touch device or keyboard/mouse). The advantage of responsive design is that apps can adjust to different screen sizes without requiring additional coding and maintenance efforts.

Responsive Grid

Adaptive Design

There are certain use cases where a responsive approach may not be appropriate. For instance, users would probably prefer to enter large amounts of data on your desktop. At the same time, they may only want to view the data entered or perhaps enter a small subset of data on their tablet or smartphone. In such cases, it makes sense to design for different devices and adapt the complexity of the use case to the specific device. This is what we call adaptive design. This approach requires app developers to manually define specific designs for the different form factors. It means slightly more effort, but also allows for more targeted support of device-specific use cases.

Examples of Responsive Design

The examples in this section show how a standard list report floorplan would translate to different devices in a (semi-)responsive way.

For these examples, the following responsive design concepts apply:

• Content density: Compact content density mode is activated on desktop mode. On touch devices, the finger-friendly cozy mode is activated. Read more about content density.
• Filters: On a desktop, the filter fields are fully displayed. On a tablet or phone, the filter bar should be collapsed as default. Read more about filters.

• Responsive controls: The responsive table moves content into a pop-in area as the available space decreases. Read more about the responsive table.

Example of Adaptive Design

Sometimes, less is more. For the same app above, the smartphone version might simply show fewer columns per item by default – enabling the user to see more items at once.

Implementation

Think “mobile first”: Starting with mobile design first helps you stay focused. Begin with the core functionality and progressively enhance features for larger devices.

• If you are using desktop controls, replace them with responsive controls for a mobile device. However, we do not recommend using the sap.ui.commons library.
• Analytical table, tree table and grid table are not fully responsive. They are available only for desktops and tablets, so when you use them you will need to take an adaptive approach by offering an additional UI for smartphones.

Use responsive controls: Most SAPUI5 controls are based on mobile controls. This means that they work on touch devices, or with a mouse and keyboard.

Properly configure the controls: Follow the guidelines to configure the responsive settings for the different controls.

Use the correct size settings: Set your apps to “large” on touch devices and to “medium” for devices operated by mouse or keyboard.

Use responsive layouts: There are several layout options available, which allow you to adjust to different sizes.

Use letterboxing: Many of the worklist apps do not have much content. By letterboxing them (restricting their width to a maximum of 1280 px), you can optimize the layout of the app and achieve a more compact look.

Too many functions? If the desktop app has too much functionality and is too complex to be used on a tablet or smartphone, you might have to switch off some functionality on your mobile device:

• Hide editing functionality and focus on display
• Hide functions from toolbar
• Hide alternative columns and views in tables

Summary and Quick Guidelines

• SAP Fiori apps must be able to run on all three major device types: desktop, tablet, and smartphone.
• If app functionality and information can be offered equally on all device types, responsive methods should be used to automatically adjust the app.
• If app functionality and/or information cannot be offered unaltered on different device types (due to the use case, the available screen real estate, or the device capabilities), the app should be adjusted manually according to device-specific requirements.
• Adaptive and responsive methods can be mixed.

SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported in the same way: interaction with a mouse and keyboard as well as by touch.

SAPUI5 provides a “content density” factor, which allows the size of the controls to be adjusted depending on the interaction style.

The cozy factor displays controls with dimensions large enough to enable fingertip interaction. This factor is ideal for devices operated by touch. Controls may be visually smaller than the minimum touch area.

The compact factor reduces the dimensions of the controls, allowing more information to be displayed on the UI. This factor is ideal for devices operated by mouse and keyboard.

Metrics

SAP Fiori utilizes a measuring system using the ‘rem’ unit, which stands for ‘root em’. A base size of 16 pixels defines 1 rem unit. The unit allows you to maintain consistent and predictable sizing and zooming in all browsers.

SAP Fiori UI controls are designed using a flexible design grid system to cater for content densities that support both touch and non-touch user interfaces. The touchable area is usually larger than the UI element it relates to. Please always consider this when designing web apps that work on both desktop and mobile devices.

In compact mode, the font size remains the same, but the dimensions of both the controls and the spaces between them are smaller than in cozy mode. The cozy default touch area of 2.75 rem (44 px) is reduced with the compact factor. Rows and toolbars may use sizes of 2 rem (32 px) and controls are also visually smaller.

Implementation

All SAP Fiori controls support both cozy and compact content density modes. For most controls, the default is set to cozy. How you should set the content density depends on the capabilities of your user’s device. This can be detected using the device helper method. If the device supports touch (sap.ui.Device.support.touch = true), the content density class should be set to “sapUiSizeCozy” or “sapUiSizeCompact”. For a detailed description of how to set the parameters correctly, see the SAPUI5 Developer Guide article on Content Density.

It is important that you actively set the content density! Since different controls might have different defaults, failing to set the correct content density could result in different density factors being shown on the screen.

App developers must state which modes the app supports in the app descriptor. This information is then checked by the SAP Fiori Launchpad on start-up.

An additional setting is available in the SAP Fiori Launchpad on hybrid devices (devices that support touch as well as a mouse and keyboard) if the administrator has enabled this feature. With this additional setting (under User Actions Menu / Settings / Appearance / Display Settings / Optimized for Touch Input), users can define whether they want the apps to be run in cozy (default) or compact mode. This setting is persisted for all hybrid devices but has no effect on the automatic detection of pure touch or pure mouse-and-keyboard devices.

Guidelines

Touch devices: Set the content density to “cozy” for the entire app. Apply the sapUiSizeCozy class.

Devices operated by mouse and keyboard: Set the content density to “compact” for the entire app. Apply the sapUiSizeCompact class.

Hybrid devices: The user has both “cozy” and “compact” options for interacting with the app.

• For products that require a high information density on the screen, set the default to “compact”.
• For products where a more spacious layout is beneficial, we recommend setting the default to “cozy”.

Users can override the default in the personalization settings of the SAP Fiori Launchpad. The chosen mode is then set as a persistent preference.

Never combine “cozy” and “compact” modes within the same hierarchy or page. Always set the content density factor at application level to avoid having a mix of cozy and compact controls on the same screen.

Services

The UI5 Developer Guide article on Content Density describes how to set the correct parameters based on the device capabilities.

Resources

Once you’re ready to take a more in-depth look at the SAP Fiori web design guidelines, you’ll want to get acquainted with our navigation structure (visible on the left of the screen, or by clicking the   icon on the top left).

The guidelines cover a large number of topics, which are divided into different categories. The sections below summarize what you can expect to find under each category. Since we only mention the most important articles, be sure to check the navigation structure for a complete overview.

Look, Feel, and Wording