Explore SAP Fiori for iOS | SAP Fiori for iOS Design Guidelines

Accessibility

SAP Fiori for iOS aims to help you create applications that can be used by a wide range of people and to provide an optimal and pleasant experience for every user, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Our components are flexible, readable, adapt to different screen sizes, and support a wide [...]

Category: Foundation

Adaptive Design

SAP Fiori for iOS supports the auto layout and adaptivity concepts that allow you to create a great user experience for all devices on iOS and iPadOS platforms. The concepts provide a mechanism that helps dynamically rearrange and resize content in response to changes in the device’s orientation or when using the app on different [...]

Category: Foundation

Adaptive Design

Intro SAP Fiori for iOS supports adaptive layouts that allow you to create a great user experience with your app. This dynamically rearranges and resizes your content in response to changes in the device’s orientation or when using the app on different devices. iOS defines two size classes: regular and compact. The regular size class [...]

Category: Foundation

Animation

No image available

In Fiori for iOS, we are using consistent animations. There are four types of animation we usually use in Fiori for iOS apps. Push Modal Zoom In / Out Dissolve Push The 'push' transition eases a new screen element onto the display from the side while sliding out the prior screen to the opposite side. Push transition is [...]

Category: Foundation

AR Annotations

AR Annotations components are designed for exploring objects in a facility. They can be used to explore a warehouse, machinery, or a business object to enhance the user experience by leveraging augmented reality. Structure AR Scanner To view annotations in the world view, the user can begin by scanning an image in a facility or [...]

Category: Patterns

AR Cards

The AR card displays key information of a marker annotation with a thumbnail image/ icon/ app of an object. Users can tap on it to navigate to the full-screen view of the card and users can also swipe between the cards. Structure AR Cards may include variations of the following elements. The content should match with [...]

Category: UI Components

AR Markers

AR Markers represent an object in the world view. The AR Card at the bottom also displays relevant information about that marker. Structure AR Markers appear in the world view and consist of 3 elements. The marker will display an icon depending on the type of content. A. Outer Circle B. Inner Circle C. Icon Behavior [...]

Category: UI Components

AR Scanner

No image available

The AR Scanner allows users to initiate augmented reality experiences (such as AR Annotations) after locating a preset image anchor to be matched. Structure Coaching View The coaching view is an overlay on top of the camera view ( or 'world view' in AR terms) that provides users with guidance on how the AR Scanner works. [...]

Category: Patterns

Attachments

The attachment control allows users to upload files such as image, audio, video, and text files as well as PDF, CSV, and presentation files. Tapping on the add attachment button (+) allows users to upload files from the photo library or other supported apps. Usage Do Use attachment control at the bottom of a create [...]

Category: UI Components

Authentication Overview

Authentication occurs when there is a need to verify the identity of a user in order to run or complete an action. This helps to keep users' information private and secure, especially in scenarios where devices may be shared amongst users. Types of Authentication Basic Authentication Basic authentication consists of passcode/login variations which are highly [...]

Category: Patterns

Banners

Banners maybe used to provide feedback to the user the result of an action that the user triggered or a message from the system. The most commonly usage of banners is to communicate errors, offline and synchronization status. Banners may also be used for in-app notifications. The message on the banner should be short and [...]

Category: UI Components

Barcode Scanner

The barcode scanner allows users to quickly locate an object by scanning a barcode via the device’s built-in camera. It is also used when users need to efficiently manage business objects in a lengthy list report. Structure The barcode scanner comes in a full-screen modal that includes a navigation bar, scan window, and alignment box. [...]

Category: UI Components

Basic Authentication

The Basic Authentication pattern is used for general authentication purposes. Structure A. Navigation Bar The navigation bar includes a “Cancel” button for users to exit the authentication. B. Body Title The Body Title should be a concise label that describes the authentication step. C. Body Text The Body Text should detail how to properly complete the [...]

Category: Patterns

Biometric Authentication

Biometric authentication detects and recognizes certain human physical features for security authorizations. Apple supports Face ID and Touch ID as convenient and secure biometric authentication methods - and by extension so does Fiori for iOS. Structure A. Navigation Bar The Navigation Bar contains the title and 'Cancel' action depending on the usage. B. ID Icon [...]

Category: Patterns

Branding

SAP customers may require designs customized to their specific use cases—designs that extend beyond the patterns and controls provided by SAP Fiori for iOS and the SAP SDK. More specifically, customers may wish to preserve their brand identity while using SAP products. SAP Fiori for iOS acknowledges this need and provides the flexibility to have [...]

Category: Foundation

Button Form Cell

No image available

A Button Form Cell represents an action that can be taken in a view. Usage Do Use Button Form Cell for representing a relevant action for a current view. Don't Do not use Button Form Cell to represent a select option. Use Form Cell with Buttons or List Picker instead. Variants Standard Button Form Cell Standard [...]

Category: UI Components

Buttons

A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action. Structure Buttons consists of a center-aligned label contained within a filled or outlined rectangular background. Variations There are several different types of buttons and each is designed for [...]

Category: UI Components

Calendar

The Calendar View provides a visual overview of a week, a month, or multiple months. Usage Dos Use Calendar View to display a visual overview of a week, a month, multiple months, or a range of selected dates. Use Calendar View to visually present correlations between two dates. For instance: consecutive holidays, flight ticket prices in peak [...]

Category: UI Components

Chart Cards

The chart card displays a thumbnail view of a chart, with key information shown. Users can tap it to navigate to the full interactive chart view. Structure Basic Structure Chart cards can include variations of the following elements. However, what is displayed should match the overall content of the chart pattern that it will navigate [...]

Category: UI Components

Chart Content Table View Cell

The chart content table view cell is a full-width view that provides a visual representation of one or more datasets. While it is visually similar to the chart pattern, there are two major differences: 1) The chart content table view cell is placed within the content area of a screen, whereas the chart pattern is [...]

Category: UI Components

Chart Header

The Header Chart displays simple chart data inside an object header. It gives at-a-glance information about the object it is connected to, and it is supported in both compact and regular widths. This chart type can be used only in the Object Header. Usage Do Use the header chart when simple data, such as a trend, is [...]

Category: UI Components

Chart Overview

A chart is a visual representation of data. SAP Fiori for iOS supports eleven types of charts. Depending on the type of data in your app and how the users will use the chart, it is important to select the correct chart type. Also, from a non-interactive thumbnail view to a fully interactive floorplan, charts are [...]

Category: UI Components

Chart Types

SAP Fiori for iOS supports eleven chart types: bar, column, stacked column, line, combo (column + line), waterfall, scatter, bubble, area, stock, and donut charts. Depending on the type of data in your app and how users will use the chart, it is important to select a chart type that will best meet users’ needs. [...]

Category: Patterns

Collection View

The collection view is a container that displays items in a grid. It previews a sample of content by presenting it in a highly visual layout and should not be used to display only text. Therefore, a collection view container should be populated with content that contains images, to provide a more visual viewing experience. Collection views are [...]

Category: UI Components

Collection View Cell

The collection view cell is an object within the collection view. It displays content with images to provide a more visual viewing experience. For guidance on how a collection view cell can be used within the collection view, see Collection View. Structure A collection view cell consists of a mix of image views (A.) and [...]

Category: UI Components

Colors

Color plays a significant role in SAP Fiori for iOS apps. It communicates the importance of and associations between content and provides users direction to help them complete their tasks. Color Palette Color schemes have been chosen for SAP Fiori for iOS to bring on-screen content to the fore. Please review the light and dark color [...]

Category: Foundation

Consent Forms

The Consent Form pattern is generally used in onboarding scenarios. It gives another party (the application in this case) a digital record of the user's understanding and permission of the terms of an event, activity, or service that will be performed by the application. Structure A. Navigation Bar The Navigation Bar contains the consent form [...]

Category: Patterns

Contact Cell

The contact cell is a table view cell which fits inside the table view container. It is used to give quick access to the various methods of communicating with a contact. It is commonly found in an object and object details floorplan. Structure A. Detail Image A detail image or avatar can be used on the [...]

Category: UI Components

Create & Edit

The create and edit pattern is used to generate or update objects and is presented to the user via a modal. It is typically triggered by the create or edit actions on the navigation bar. The pattern may include a variety of combination of form cells to allow users to input information related to the [...]

Category: Patterns

Data Table

A data table is a range of labeled columns and rows used to present numbers, text, or even images. Generally, data tables are a grid layout of columns and rows. The horizontal scrollable data table with a sticky header and column is available in both compact and regular screen sizes. Alternatively, the data table will [...]

Category: UI Components

Error Handling

Errors are used to communicate to the user that something did not go the way it was intended to in the app. An error could occur either at the app level or at the user level. It's important to present the appropriate type of error message and when possible, provide instructions to help the user [...]

Category: Patterns

Feedback

Feedback provides users with timely responses to actions and information on the state or condition of the content. There are primarily two types of classification: system feedback and user-triggered feedback. System feedback include the network activity indicator and the loading indicator, and as the name suggests, these are both system-generated. User-triggered feedback includes the progress indicator, processing indicator, and toast message, each of which provides [...]

Category: Patterns

Filter Feedback Bar

Filter feedback bar is a horizontal bar that appears above a list of content. It uses interactive buttons to communicate which filters have been applied to the list, and allows users to quickly apply frequently-used filters. It is typically used in List Report or Work List floorplans. Usage Do Do’s Use filter feedback bar when [...]

Category: Patterns

Filter Form Cell

Filter Form Cell is used to filter one or more values under a filter category. It is commonly used in the filter pattern for sorting and grouping. Avoid using a filter form cell if the text is too long or if the number of values is more than 8. Use the list picker control for easier [...]

Category: UI Components

Form Cell with Buttons

The Form Cell with Buttons component allows the user to quickly select from a small set of values. It is typically used in the create and edit pattern, or occasionally in the filter pattern. If the value label is too long, it is recommended to use List Picker instead. Usage Do Use Form Cell with [...]

Category: UI Components

Hierarchy

The hierarchy pattern is a combination of the hierarchy view and a list report. A combination of these views allows for a wider range of functionality in different kinds of workflows. For example, the hierarchy pattern can be utilized in a create use case. Structure List Report A list report within the hierarchy pattern has [...]

Category: Patterns

Hierarchy View

The hierarchy view presents hierarchical data in a way that shows the relationship between parent and child objects. It serves as an entry point for a user to see where an object lives in a larger hierarchical structure. For single level data sets, it is recommended to use a list report. To learn more, see [...]

Category: UI Components

Iconography

Iconography is essential to creating a cohesive and enjoyable app experience. Icons play a crucial role in communicating actions, information, feedback, and navigation. By providing a comprehensive icon library, our goal is to enhance the accessibility and overall ease of use of our customers’ apps. The SAP Fiori for iOS Design System makes use of Apple's SF [...]

Category: Foundation

In-line Signature Form Cell

No image available

The In-line Signature Form Cell is a form cell that allows users to enter their signature into a form to verify identity and express intent of acceptance. The difference between this component and Signature Capture is that this component's interaction and behaviors are integrated into the form, allowing the users to review content during the [...]

Category: UI Components

Info View

The Info View pattern is generally used in onboarding scenarios. It provides the application with the ability to show customizable information in a transitionary state that locks regular navigation methods. This pattern is closely related to the What's New component as well as the Feedback Screens (used in Multi-user Onboarding Pattern) Usage Do Use Info [...]

Category: Patterns

Inline Errors

Inline validation provides error feedback in response to user's data input in a Create or Edit form of a business object. The errors maybe critical in which case, the user should not be allowed to proceed until fixed or it maybe informative still allowing the user to complete editing. The error should be placed under the [...]

Category: UI Components

Key Value Cell

The key value cell is a table view cell which fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels for context. Structure The structure of this cell type is simple. There is a key label at the top and a value below. Key [...]

Category: UI Components

KPI Header

The KPI header displays numerical data the user needs to keep track of during the day. It is typically used in an overview pattern to provide the user with contextual information. Structure The KPI header is a container that includes multiple KPIs that are important to the user. There are several different ways to [...]

Category: UI Components

KPIs

Key performance indicators (KPIs) are measurable values that are used to evaluate the success of an organization, an individual, a group, or a particular activity. KPIs are also used to highlight the current value of an object or as a summary of the object. KPIs can be used in a header, in the content area [...]

Category: UI Components

List Picker

A list picker allows for the selection of one or more options among values within a defined category. Use a list picker when there are more than 8 values to select from within a single category or when the size and nature of the available options are dynamic and unpredictable. Structure A list picker includes: [...]

Category: UI Components

List Report

The list report displays a large list of items of the same object type and allows users to take actions on them. This page type provides the functions of searching, sorting, filtering, and grouping the data in the large list. Use the list report when there is a large list of items and the data [...]

Category: Patterns

Map

The map component is designed to display different business objects in the context of where it they are located as well as give a visual indication of what type the object is (point, polyline or polygon). It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative [...]

Category: UI Components

Modals

A modal is used for completing a task, updating content, or selecting filters. It helps the user to focus on the current task by providing relevant properties. The create pattern and filter pattern is generally presented in modals. A modal typically slides up from the bottom of the screen and will remain open until the user [...]

Category: Foundation

Multi-user Onboarding

The multi-user onboarding pattern is used to address onboarding scenarios where more than one users may share a device. Users are able to select from a list of existing accounts on the device to login with or add a new account. Multi-user onboarding pattern is an extension of, or additional module to, the general onboarding [...]

Category: Patterns

Navigation

A proper navigation style offers a fast and clear path for users to finish their tasks. When designing an app, the first step should always be to evaluate the content structure of the app, and to then select the navigation style that will provide the clearest and most efficient user experience. Hierarchical Navigation Hierarchical navigation [...]

Category: Foundation

Navigation Bar

No image available

The Navigation Bar is an integral part of a screen that helps indicate where the user is in the app and contains the page-level control actions. Structure A: Left Accessory Left Accessory typically contains Profile button, Back button, or Cancel button. In addition, it shows where the user comes from and offers an action for [...]

Category: UI Components

Object Card

The object card gives a preview of an object. It is highly customizable so as to accommodate a wide variety of uses and work best when used in a collection view with clear distinctions between groups. Structure A. Icon Stack A set of up to 3 vertically stacked icons can be displayed on the far left. [...]

Category: UI Components

Object Cell

The object cell is a table view cell that fits inside the table view container. It is highly customizable so as to accommodate a wide variety of uses. Usage Object Cell is intended to be used to preview information about an object and can be tapped to navigate to a full view of that object’s information, [...]

Category: UI Components

Object Details

The object pattern (object page) is a collection of attributes surrounding one particular business object. It includes a header area, a content area, and an optional action area. In most cases, users can drill down into specific attributes within the object page. Structure Navigational Structure The object pattern is often used in the middle of a workflow to show a [...]

Category: Patterns

Object Header

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It connects to the iOS status bar and the navigation bar via a seamless background, and is visually separated from the content area below. Because the object header provides the first glimpse of the object [...]

Category: UI Components

Object Header (new draft)

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It connects to the iOS status bar and the navigation bar via a seamless background, and is visually separated from the content area below. Because the object header provides the first glimpse of the object [...]

Category: UI Components

OCR Scanner

The OCR scanner is used as an alternative way of input when the user is completing a form. The scanner recognizes and picks up specific text from an object or document, and enter it into the form for the user. Structure The OCR Scanner comes within a full-screen modal that includes a navigation bar, [...]

Category: UI Components

Offline

Mobile applications do not always have the network connectivity needed to access real-time data. To accommodate fo this, provide an offline solution with your applications which will enable your user to complete their job regardless of network connectivity. As best practice, an offline-enabled Fiori application should be syncing data with the server regularly. The task [...]

Category: Patterns

Overview

The overview page type is a hub that provides previews of larger bodies of information sourced from different parts of the app. It contains details important to the user and provides quick access to items relevant to the user’s tasks. Use the overview page if you want to highlight information that matters to the user. [...]

Category: Patterns

Pickers

A picker is used for selecting a single value by scrolling through a short list of predictable values. It’s commonly used for selecting dates, time, or the combination of both. Structure A picker includes the elements below: A. Table cell The table cell displays a label and a selected value. The selected value will be [...]

Category: UI Components

Preview Table View

Preview Table Views are used to display a preview of a list and are populated with Table View Cells, which include Object Cells and Contact Cells. Multiple Preview Table Views can be stacked in a single-screen layout to provide quick access to different information. They are commonly found in the Overview and Object screens. Usage Don't The lists displayed [...]

Category: Patterns

Profile & Settings

Profile is a modal view which is a container that holds various user and app specific settings and allows the user to customize their app experience. Structure Navigational Structure Flat Navigation For apps that use flat navigation, the user profile is generally accessible on the main screen of each content category, with a touch target placed in the upper-left corner of [...]

Category: Patterns

Profile Header

The profile header helps the user recognize and learn more about a person. It may also allow the user to quickly contact that person without needing to drill down into his/her contact details. It is usually used in an object pattern or profile and settings screen. Usage Do Use in an object pattern or [...]

Category: UI Components

QR Code Scanner

The Welcome Screen with Scan uses a QR code scanner as another way to onboard. Before starting the activation process, the user must be provided with a QR code to scan. Users can scan a QR code by using a camera or by scanning via images saved on their phone camera roll/gallery. Structure A. Modal Stack The [...]

Category: Patterns

Rating Control

The rating control is used to indicate an average rating for an object. It also allows for users to set their own rating on a numeric scale from 1 (lowest) to 5 (highest). Variations The rating control has two distinct types: Display: shows the rating in a small read only format. It is designed to [...]

Category: UI Components

Rich Text Document

Text-heavy documents, such as end-user licensing agreements (EULA), privacy policies, or terms and conditions are displayed in apps using HTML or other forms of view. To ensure that the content of these rich text documents looks consistent across SAP iOS applications and can be understood by everyone, follow the style and accessibility guidelines below. Document Style [...]

Category: Patterns

SAP Fiori Design Principles

No image available

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise. Design Principles The [...]

Category: Foundation

Search

The search pattern is used to locate information or objects within a large collection of values. There are two types of search: global and local. A global search is used to search universally through the contents of an app. A local search is a subset of global search and is used to find information within a specific list. Global [...]

Category: Patterns

Search Bar

The search bar is used to locate objects within a large collection of items. It is usually used in a list report pattern or list picker to allow the user to quickly navigate to an object. Structure The search bar is composed of the following elements: A. Prompt Text Prompt text is included to provide context [...]

Category: UI Components

Search to Select

Search to select is a control used to search and select multiple items from a large collection of values. Usage Do Use the search to select control to choose one or more items from a set. Don't Don't use the local search component to find and select multiple values. Structure A. Search Field The search [...]

Category: UI Components

Sibling Navigation

In the apps that designed with hierarchical navigation, the Sibling navigation pattern can help users easily navigate in the sequence of child objects. Usage Do Use when you have a sequence of objects, such as instructional steps, work orders, or hardware components list. Don't Don’t use to replace hierarchical navigation. Sibling navigation, as its name suggests, [...]

Category: Patterns

Sidebar

No image available

A sidebar provides app-level navigation and quick access to users' favorite or pinned contents. The sidebar is useful if you expect a user to switch between app-level destinations frequently. Structure The primary column contains the sidebar. The sidebar contains a header, a list, a footer, and a vertical divider. A - Header B - Destination list C [...]

Category: Patterns

Signature Capture

No image available

The signature capture allows users to input their signature by signing on the screen. The signature is captured and saved in the backend with a watermark. Usage Signature Capture is intended for users to authorize workflows when they sign while using this feature. Some use cases include signing forms or documents, approving an order, confirming [...]

Category: UI Components

Single-user Onboarding

In enterprise, onboarding is the process of activating an existing user account and getting the user up and running with the app. Existing user accounts are typically assigned by an admin or the IT department. The onboarding process can vary depending on the configuration of the app by the admin or the IT department in [...]

Category: Patterns

Slider

Sliders display a continuous range of values along a track. The minimum and maximum values are established and the user may use the thumb to select a single value between the minimum and maximum values. They are typically found in create and filter modals. A slider control can be used when selecting a precise value [...]

Category: UI Components

Sort & Filter

The filter pattern allows users to narrow down results from a long list by setting some criteria. Users are able to reset the filter to go back to the complete list of results. Sorting and grouping are also integrated as part of the filter pattern. Structure The filter pattern is made up of reusable and [...]

Category: Patterns

Stencils 5.1

No image available

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included. Download the San Francisco fonts here. Download SF Symbols here. What's New in V5.1 Regular New components, Signature Form Capture and What's New, [...]

Category: Resources

Stencils 6.0

No image available

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included. Download the San Francisco fonts here. Download SF Symbols here. What's New in V6.0 Design Library (Beta version) New design library containing all [...]

Category: Resources

Stencils 6.1

No image available

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included. Download the San Francisco fonts here. Download SF Symbols here. What's New in V6.1 Figma Design Library (Beta version) Major Migration to Figma [...]

Category: Resources

Switches

The switch control is used to toggle two mutually exclusive states, on and off. Switches are used to control the availability of related UI elements on the current screen and must always be used in a table cell. Variations Switch without further selection The label in the cell to describe what the toggle is for. [...]

Category: UI Components

Text Input

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern. Structure To indicate that a text field is required, an asterisk should be included next to the label. On the top of the form, a line should mention that asterisks indicate required [...]

Category: UI Components

Time and Date Formats

There are many different time and date format conventions, with no “right” approach for all situations. Conventions also vary widely around the world, and it would be counterproductive to formalize a single, unified approach to representing time and date across Fiori for iOS. That said, there are best practices to consider. Instead of a list [...]

Category: Patterns

Timeline

The Timeline displays a list of items (objects, events, or posts) in chronological order. The information on the timeline view are presented as tappable cells, and are focused on the most important information about the object. The timeline view can be filtered or searched. Structure The Timeline contains a chronological axis, with timestamps on the left and object [...]

Category: UI Components

Timeline Preview

The timeline preview cell provides the user with a glimpse of upcoming objects, events, or posts using a horizontal timeline sorted by chronological order. The objects in the timeline preview cell are read-only and tapping on a cell navigates the user to the full timeline view. Structure A. Cell Header Provide a meaningful title to the timeline cell. B. Object [...]

Category: UI Components

Typography

The default font for iOS is San Francisco (SF). San Francisco has two variants: SF Pro Display and SF Pro Text. SF Pro Display is used for font size 20 pts or above whereas SF Pro Text is used for font size 19 pts and below. Font color variants used in Fiori for iOS cover both Light and [...]

Category: Foundation

What’s New

The what's new component shows users the updates to your application. It can also be used for announcing the news, bug fixes, etc. Usage Users can use the what's new component to view updates to your application in two ways. Popup Modal: The component can be shown as a pop-up modal after the user logs [...]

Category: Patterns

Widgets

Apple widgets display key information in a glanceable format on user's iPhones. Structure Widgets support three different sizes – small, medium, or large sizes. On iPhone, iPad, and Mac, users can find widgets in the widget gallery, where they can also choose a widget’s size. Each widget consists of a header and content area. A. [...]

Category: Patterns

We'd appreciate your feedback!

Processing your feedback

Your feedback has been sent to the SAP Fiori design team.

Thank you for your helping us to improve our guidelines!

We'd appreciate your feedback!

Please fill out the form to send us your feedback.

This topic was helpful
This topic was not helpful
- Can you tell us why?
- The information I need is missing
- The content is unclear / hard to follow
- The content is incorrect / out of date
- Other

Include screenshot

Your feedback is anonymous, so you won't receive a reply. If you'd like help with a specific question, please visit the SAP Fiori Community