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

Action Sheet

An action sheet provides users with a set of alternative choices for the task they have just selected. Action sheets can be used to provide a selection of ways to complete a task or to get confirmation before completing a task. iOS Human Interface Guidelines To learn more about using the action sheet, see the iOS Human [...]

Category: Controls

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 photo library or other supported apps. The attachment is placed in the bottom of a create modal, object [...]

Category: Controls

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: Visual Design

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. Usage Dos To communicate important action(s). To navigate to another screen, trigger a modal, or initiate an action. Don'ts To see additional information in a cell. Use a [...]

Category: Controls

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: Views

Chart

The chart floorplan displays data using a full-width chart. In this floorplan, users can select chart items to see specific values, drill in to explore more details, and adjust a variety of chart criteria using filter options. Usage Dos Use the chart floorplan when the user needs to be able to filter the data, adjust [...]

Category: Floorplans

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 (that is, the chart floorplan). Usage Dos Use the chart card in a content view to provide easy navigation to the chart floorplan. Use the chart card in a [...]

Category: Views

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 floorplan, there are two major differences: 1) The chart content table view cell is placed within the content area of another floorplan, whereas the chart floorplan is [...]

Category: Views

Chart Types

SAP Fiori for iOS supports nine chart types: horizontal bar, column, stacked column, line, combination (column + line) charts, waterfall charts, scatter and bubble and area 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 [...]

Category: Patterns

Collection View

The Collection View is a fundamental building block of the SAP Fiori for iOS design language. It is a container that displays items in a grid. The Collection View previews a sample of content and presents it in a highly visual layout. Therefore, a Collection View container should be populated with content that contains images, to provide a [...]

Category: Views

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: Visual Design

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. Usage Do's Use a Contact Cell when you want to give access to [...]

Category: Views

Create

Create view is used to generate new objects and object details, and is presented to the user via a modal view. The following guidelines explain how to use the controls within create view for a variety of data types. Structure Data entry components within create view are grouped by their data type. A. Nav Bar Nav [...]

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. Data tables are available only on regular screen sizes. On compact screen sizes, the data is displayed in the table view of object cells. [...]

Category: Views

Error Handling

Errors are brought up when things go wrong in the App. An error could happen on the server level, app level or user level. It's important to provide appropriate type of error message and instructions to help user recover quickly from the error state. Usage Do Design workflows that can eliminate error states by itself. Explain [...]

Category: Patterns

Feedback

Feedback is an indicator type that provides users with timely responses to actions and information on the state or condition of the content. Feedback components fall under one of two types of classification: system feedback and user-triggered feedback. Examples of 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, check out [...]

Category: Patterns

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

Filter Feedback

Filter feedback 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’s Use filter feedback when there are frequently-used [...]

Category: Patterns

Filter Form Cell

A filter form cell control is used to filter one or more values under a filter category. It is commonly used in the Filter pattern for sorting and grouping. Usage Do Use a filter form cell when the number of values is less than 8. Don't Don't use a filter form cell if the text [...]

Category: Controls

Header Chart

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 Dos Use the header chart when simple data, such as a trend, is [...]

Category: Views

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. SAP Fiori for iOS icons in light tint and dark tint Usage [...]

Category: Visual Design

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. Key Value Cells are typically found in the Object and Object Details floorplans. Usage Do's Use a Key Value Cell when you want to [...]

Category: Views

KPI Header

The KPI header displays numerical data the user needs to keep track of during the day. Usage Do’s Use the KPI header within the overview floorplan. Only include the most frequently-used or most important KPIs. Don’ts Do not include information in the KPI header that is repeated in the content area. Structure The KPI header [...]

Category: Views

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: Views

List Picker

A list picker allows for the selection of one or more options among values within a defined category. Usage Do Use a list picker if the number of values is more than 8 under one category. Use a list picker if the values are dynamic and unpredictable. Don't Do not use a list picker for [...]

Category: Controls

List Report

The List Report floorplan displays a large list of items of the same object type and allows users to take actions on them. This floorplan provides the functions of searching, sorting, filtering, and grouping the data in the large list. List report in compact and regular views Usage Dos Use the list report floorplan when there [...]

Category: Floorplans

Map

The map floorplan displays business objects on a map. It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative location-based data. With the map floorplan, users can: Quickly access geospatial and business data from the field. Search for business objects. See an overview of business objects [...]

Category: Floorplans

Object

The object floorplan 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 floorplan. Object floorplan in both compact and regular widths Usage Do’s Use the object floorplan for one [...]

Category: Floorplans

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. It 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, usually displayed as [...]

Category: Views

Object Details

The object details floorplan functions as the child screen of an object floorplan. It is used to show additional information about one attribute of a business object on the object floorplan, and it is accessed by drill-down. The object details screen is usually the last screen in a single workflow. However, the object details floorplan can [...]

Category: Floorplans

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: Views

OCR Scan

The OCR scan view 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 Scan is a full-screen modal that includes a navigation bar, [...]

Category: Patterns

Offline

Mobile applications, due to the nature of their reliance on the wireless network, do not always have the network connectivity needed to enable real-time access to data. To accommodate this, Fiori iOS apps can implement offline solutions to continuously provide uninterrupted service and make sure jobs can be completed regardless of network connectivity. Behavior & [...]

Category: Patterns

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

Overview

The overview floorplan 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. Overview in regular view Usage Do's Use the overview floorplan if you want to highlight information [...]

Category: Floorplans

Page Controls

A page control displays the number of open pages in a flat collection of similar or relatable views. Page controls are shown as dots that represent the total number of views in order, with the prominent dot denoting the current page. A page control can be useful to show users how many pages are available. It [...]

Category: Controls

Pickers

A picker is a control for selecting a single value by scrolling a short list which contains predictable values of a logical order. The scrollable list of a picker is displayed on the same screen where the picker is activated. The selected value appears and gets updates in the same cell of the label when [...]

Category: Controls

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 A. Profile header Profile header can contain items that provide more information about the user such as a profile image, user’s name, job title etc. If profile image [...]

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. Usage Do’s Use the profile header within the object floorplan or on a user profile screen. Don’ts Do not include information [...]

Category: Views

Scan

Scan view allows users to look up products by scanning barcodes via the device’s built-in camera. This allows users to filter down a large list of tools or products and to quickly navigate to the object’s detail screen. Usage Scan view is also used when users need to efficiently manage business objects in a lengthy [...]

Category: Patterns

Search

The search bar is used to find information from 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 further narrow down an already-filtered list [...]

Category: Patterns

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'ts Don't use the local search component to find and select multiple values. Do Don't Structure A. Search Field [...]

Category: Controls

Segmented Control

A segmented control is a horizontal bar divided into two or more mutually-exclusive buttons. This control provides users easy access to specific categories of content. Usage Do's Ensure the control's segments are related to each other. Use a segmented control to switch between views. In the Campus app, for example, a segmented control is used [...]

Category: Controls

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. Usage Do Use the slider control when selecting the precise value [...]

Category: Controls

Switches

The switch control is used to toggle two mutually exclusive states, On and Off. Usage Do's Use switches in a table cell only. Use a switch to control the availability of related UI elements on current screen. Don’ts Don’t use switches for selecting states other than on and off. Don’t use switches without a table [...]

Category: Controls

Table View

The Table View is a fundamental building block of the Fiori for iOS design language. It is a container for which information can be displayed in a single-column list, as opposed to a grid-like arrangement a Collection View provides. Table Views are populated with Table View Cells, which include Object Cell, Contact Cell, and Label/Value Cell. [...]

Category: Views

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. Types Depending on the length of the text that you need users to provide, you can choose one of the following types of Text Input controls: Single-line text: Use Text Field or Text Field [...]

Category: Controls

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 floorplan displays a list of items (objects, events, or posts) in chronological order. It provides the user with information about changes to an object or events related to that object. The items found on the timeline view are represented as tappable cells, and are focused on the most important information about the object. The timeline view can [...]

Category: Floorplans

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. Anatomy A. Cell Header Provide a meaningful title to the timeline cell. B. Object [...]

Category: Views

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. To learn more about typography, see the iOS Human Interface Guidelines. San Francisco font [...]

Category: Visual Design