The document scanner leverages Apple’s VisionKit, allowing users to digitize physical documents with an on-device flow. Users can select automatic or manual capture and easily edit, retake, or delete specific or all scanned documents.

Anatomy

A. Camera View

The camera view enables users to focus on and capture their scan through either manual or auto mode. The shutter button allows users to manually capture their scans regardless of the enabled mode. Users can use the phone’s flash to improve the lighting environment during scans or select certain filters to further alter the scanned document. On the bottom left corner, users can see a preview of their scanned documents, which also acts as an entry point for the gallery/edit flow. In the bottom right corner, users can finish and save their scanned documents by tapping on the “Save” button with the number of scans indicated.

B. Gallery/Edit View

The gallery view provides a view of all the user’s captured scans in that current session, and enables users to adjust, filter, rotate, retake, and delete their scans. Once the user feels their scans are sufficient, the “Done” button brings the user back to the camera view for final save.

Behavior and Interaction

Automatic Capture

Opening the document scanner defaults to the auto-capture mode and prompts the user to position the document within the frame. As soon as a potential document is detected, a blue outline appears, instructing the user to hold the camera steady as the document is being scanned. Once the document is captured, the scanned document is shown on the bottom left scanned documents preview.

Manual Capture

Users can switch to manual capture mode by tapping on the “Manual” button located on the top right corner. In manual mode, the user is prompted to position the document within the camera’s view. Once a potential document is detected, a blue outline is overlayed over the targeted document, and the user can tap on the shutter button to capture the scan.

Scan Confirmation

After capturing, users have the opportunity to adjust the scan. Once satisfied, they can either save the scan or retake it if needed.

Preview Scans

Users can preview and edit their scanned documents by tapping on the bottom-left scan thumbnail.

Adjust Scan

The “Adjust scan” feature allows users to adjust or crop imperfect scans. Users can adjust the selected scan by dragging the corners of the overlay to their desired positions. Once satisfied, they can finish by tapping on “Done“ on the bottom right or cancel the entire adjustment if needed.

Filter

The filter feature in the iOS document scanner enhances scanned documents by applying visual adjustments to improve their readability and appearance.

The four filter options:

• Color: Retains the original colors of the document.
• Grayscale: Converts the document to shades of gray for a cleaner, professional look.
• Black & White: Optimizes contrast by removing all colors, making text sharper and more distinct, especially for text-heavy documents.
• Photo: Preserves the details and colors of images for a more natural appearance.

Rotate

The “Rotate” feature allows users to adjust the orientation of a scanned document by rotating it in 90-degree increments. This ensures that the document appears correctly aligned for viewing, sharing, or printing, especially if it was scanned at an angle or upside down.

Delete

Users can delete the selected scan from the overall collection of scans from the session by tapping on the trashcan icon.

Retake

Users can retake the selected scan by tapping on the retake button on the top right-hand corner, performing this action takes the user back to the scanning camera view.

Resources

SAP Fiori for Android: Document Scanner

When mobile applications do not have access to or can not show data, an Empty State View can be used as a fallback to provide users with messaging about what has happened and what to do next. They can appear in, but are not limited to, cards or page types such as chart cards, chart floor plans, and chart headers.

Anatomy

Resources

SAP Fiori for Web: Designing for Empty States, Illustrated Message

Related Components/Patterns: Banners, Inline Errors

Skeleton loading is a progress indicator that is used when a screen or part of a screen is loading. It is best used when the structure and layout of a container are known, such as a page or card, and the system requires time to fetch and display the actual data.

Usage

Anatomy

Behavior and Interaction

Skeleton loading is best used for loading time that exceeds 1 second. It automatically transitions to the actual content once the data fetching process is complete.

Shimmer Effect

Adaptive Design

The skeleton loading feature aligns with the original component layouts of the iOS size classes (compact and regular) and therefore adapts to any iPhone or iPad device and their respective containers.

Variations

Basic Placeholders

Card Placeholders

Header Placeholders

Resources

SAP Fiori for Android: Skeleton Loading

SAP Fiori for Web: Placeholder Loading 

Related Components/Patterns: Buttons, Object Cell, Object Card, Analytic Data Table Card, List Card

The illustrated message communicates empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. The illustrated message turns a situation, even a negative one, into a better experience for your users while ensuring consistency. 

Usage

Anatomy

Adaptive Design 

Illustration Sizes

We recommended using the following fixed mobile illustration sizes for the following containers:

A. Size XL (320×240)

Full-screen page, full-screen dialog

B. Size L (160×160)

Page section, larger dialogs, large cards (2×3, 2×2)

C. Size M (92×92)

Page section, smaller dialogs, medium card (2×1)

D. Size S (64×64)

Smaller dialogs, small card (1×1)

E. Size XS (48×48)

Smaller dialogs, small card (1×1)

Message Width Adaptiveness

Call-to-Action Adaptiveness

Variations

Resources

SAP Fiori for Android: Illustrated Message

SAP Fiori for Web: Designing for Empty States, Illustrated Message

Related Components/Patterns: Banners, Inline Errors

Modality is a method to present content in a temporary mode, generally through a modal sheet, form sheet or popover. With Adaptive Design, Modality on iPhone and iPad devices will adapt to the screen sizes and utilize the available space.

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 and filter patterns are generally presented in modals. 

A modal typically slides up from the bottom of the screen and remains open until the user has taken an action to close it. Note that in edit mode, the modal has a Dissolve transition. To learn more about transitions, see Animation.

Compact

Regular

Resources

Quick sort is a contextual sort pattern that allows users to change the sort criteria of a component. It can be implemented on component level to allow sorting of list cards or preview table views. It can also be implemented in fullscreen view, for example, in list reports.

Usage

• Use quick sort for contextual fast sorting.
• If sorting and filtering is needed, use the sort and filter form.
• Keep the sort criteria in the menu as short as possible.

Filtering is not possible with quick sort.

Anatomy

A. Sort Icon

The “Sort” icon opens the quick sort menu.

B. Menu/Submenu

The menu/submenu contains sort options for the user.

C. Checkmark Icon

The checkmark only appears when a criterion is selected and active.

D. Sort Criteria

The sort criteria define the options available to the user to sort the component. Do not use more than five sort criteria to avoid scrolling in the menu.

E. Expand Submenu

This opens the submenu with the sort criteria.

F. Collapse Submenu

This closes the submenu with the sort criteria.

G. Submenu Title

By default, the title of the submenu is “Sort By”. The subtitle is the current selected sort criterion.

Behavior and Interaction

Quick Sort in a Menu

If a direct sort action is available, for example, in a navigation bar, a tap on the sort button opens the menu that shows the sort criteria. As soon as a user selects a sort criterion, the menu closes and the component gets sorted according to the new criterion. A toast message indicates that the sorting has changed to the new criterion.

Quick Sort in a Submenu

If the sort action is part of an overflow menu, a tap on the sort entry opens a submenu. Once a user has selected a sort criterion in the submenu, both menus close. The sorting of the component changes based on the selected criterion. A toast message indicates the new sorting.

Adaptive Design

On iPhone in compact width and on iPad in regular width, quick sort uses the default iOS menu and submenu.

Behavior of the Submenu

On iPhone, the submenu is opened on top of the menu. The menu entry that opens the submenu has a chevron on the left side. The chevron turns down in the submenu header. The header shows the same information as the menu entry, which opened the submenu.

On iPad, the submenu is opened next to the menu. The menu entry that opens the submenu shows a chevron on the right side. This indicates that the submenu is opened next to it. The submenu only shows the sort criteria. It does not have a header.

Variations

Quick Sort in a Menu

The quick sort in a menu allows users to access the quick sort criteria by tapping on an icon button, for example, in the navigation bar.

Quick Sort in a Submenu

If users need to take several actions within a component or fullscreen view, they can access the quick sort criteria in a submenu.

Resources

Human Interface Guidelines: Menu

Related Components/Patterns: Sort & Filter Form, Sort & Filter Overview

The sort and filter pattern allows users to narrow down results from a set of data by setting sort and filter criteria.

Sort and Filter Patterns

Sort and Filter Form

The sort and filter form is used for advanced filtering. For compact layout, it opens in a fullscreen modal, where the sort and filter options can be set. The modal closes and shows the results once the user taps on the result button in the form.

For regular width layout (iPad), the sort and filter form opens in a popover. The popover closes and updates the results when tapping the results button. To learn more, see Sort and Filter Form.

Resources

Development: Create and Filter Patterns

SAP Fiori for Android: Sort and Filter Pattern

Related Components/Patterns: Sort & Filter Form, Filter Feedback Bar, Quick Sort

The info view 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.

Usage

Anatomy

Behavior and Interaction

Resources

Development: FUIInfoViewController

Related Components/Patterns: What’s New, Multi-User Onboarding

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. This component is only available in regular width. If you need app-level navigation on compact width, use a tab bar instead.

Anatomy

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. Footer

D. Default Cell

E. Active Cell

F. Outlined Group

G. Vertical Divider

Primary Column

The width of the primary column is flexible. The default width is set to 320pt.

Destination List

• Icon: Icons are optional. Icons supplement labels as indicators of a destination.
• Label: Keep text labels concise. When a text label extends beyond the primary column width, truncate it, instead of shrinking or wrapping the text.
• Right accessories: Right accessories are optional; numbers or any icon button can be added. Within an outlined group, don’t mix number and icon button or different icon buttons.

Outlined Group

Related destinations can be grouped together. Grouped items have a heading as a group name.

Behavior and Interaction

Selection

The current screen is selected and represented in an active state. When the app is first opened, the landing screen, Overview in this example, is an active state by default. Only one cell in the sidebar can be activated at a time.

Grouping

Destinations in the same category can be grouped together as an outlined group. An outlined group has a header and the list of destinations. The header contains the group name and the chevron. Tapping on a header opens or collapses the destination list below the header.

Collapsing and Opening

In landscape mode, the sidebar is visible by default. To create more room for their content, the sidebar can be collapsed by the toggle icon on the top left corner. The user can open the sidebar again by using the built-in edge swipe gesture.

In portrait mode, the sidebar is open by default as an overlay. The sidebar can be collapsed by tapping outside of view. The user can open the sidebar again by the built-in edge swipe gesture.

Scrolling

The sidebar is vertically scrollable, if the list of navigation destinations is longer than the height of the area between the header and the footer. When the user scrolls down, the sidebar title switches to collapsed mode and stays fixed.

Edit Mode

Users can make changes to the sidebar in edit mode by tapping on the “Edit” button. This allows them to hide or show list items by toggling the switches.

List items can be rearranged with the drag handles.

Resources

Development: FUISideBar

SAP Fiori for Android: Navigation Drawer

Human Interface Guidelines: Sidebars

Related Foundations: Adaptive Design, Navigation

The AR scanner allows users to initiate augmented reality experiences, such as AR annotations, after locating a preset image anchor to be matched.

Anatomy

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.

A. Exit Button

Lets users exit from AR scanner and return to the previous application screen.

B. Image Anchor

Shows the user what image or object to look/scan for.

C. Instruction Text

Details steps that the user needs to take in order to complete the AR Scanner process and move to the main AR experience

D. Primary Button

The way for the user to start scan – after the first collapse of the coaching view in the AR session button text should change from ‘Begin Scan’ to ‘Return to Scan’.

Scanning View

E. Scan Guide & Crosshair

Allows the users to center/align the camera view target to be scanned and matched.

F. Image Anchor (Coaching View collapsed)

Shows the user a preview of what image or object to look for, is also tappable to open the coaching view again.

Matched Scan View

G. Matched Scan Indicator

This shows that the camera view target has been scanned and matched.

Behavior and Interaction

Coaching View Collapse

On the launch of an AR experience from the main application, the AR Scanner & world view are both initialized. The coaching view is shown as an overlay on top of the world view and allows the user to read instructions and see the anchor image.

Tapping on the ‘Begin Scan’ button begins the scanning as the entire coaching view overlay collapses into a minimized anchor image preview still allowing the user to have a visual reference for said anchor image.

Tapping on the collapsed or minimized coaching view/anchor image reference will expand the coaching view to full size again.

Scanning to Match

Once the scanning begins the user will look for the real representation of the anchor image in the world space and align said representation (an image or an object) with the scan guides and crosshairs.

When the image or object is recognized:

1. The scan guide and crosshair fade out

2. The Match Scan Indicator fade in anchored to said image or object in the world space.

3. After a couple of beats, the AR experience for example AR Annotations loads in.

Resources

SAP Fiori for Android: AR Scanner

Related Components/Patterns: AR Annotations, QR Code Scanner

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.

Anatomy

Behavior and Interaction

The AR annotation flow consists of three main interactions. To understand each interaction in detail, see AR Scanner, AR Makers, and AR Cards.

Resources

SAP Fiori for Android: AR Annotations

Related Components/Patterns: AR Cards, AR Markers, AR Scanners

Widgets display key information in a glanceable format on a user’s device.

Usage

• Only use SAP icons and SDK components so that the widget looks consistent with the app.
• For legibility, consider displaying widget content with a 16pt margin for texts and 8pt tight margins for images and glyphs.
• Use SAP icons or SF symbols on the header instead of the app logo.

• Don’t use the logo on the header. Instead, show the logo only if your app curates content.
• Don’t forcefully repeat information or expand the widget’s content size to fill more space for medium or large widgets.

Anatomy

A. Header

The header of a widget consists of the following variants:

• Left accessory (optional): icon
• Main content: title, subtitle (optional)
• Right accessory (optional): SAP logo, tag, counter
• KPI
• Image
• Customized
• Empty state
• Authentication

B. Body

The body of a widget visualizes the main content through the use of the following components:

• Table view
• Chart card (line, bar, multi-bar)

C. Footer

The footer can be used to display the following:

• Buttons (1 symbol, 1 label, 2 symbols, 2 labels)
• Label

D. Background

The background has the following variants:

• Default
• Customized
• Image

Variations

KPI View

KPI widgets use SAP BTP SDK for iOS KPI and KPI header components. They can be used to represent numerical values such as dates, amounts, etc.

Table View

Table view widgets use SAP BTP SDK for iOS object cell components. Table widgets can be used to display information with an object image, headline, and subtitle.

Chart View

Chart view widgets use SAP BTP SDK for iOS chart cards to display any graphical information. Use line and donut charts in the widgets to avoid overcrowding and allow users to get information at a glance.

Behavior & Interaction

Starting with iOS 17, iPadOS 17, or macOS 14, widgets can include buttons and toggles to offer specific app functionality without launching the app. For example, an approval widget allows users to approve a request with a button. On a locked device, buttons and toggles are inactive and the system doesn’t perform actions unless a user authenticates and unlocks their device.

Pressed State (Content)

Selecting a row or column in the widget changes the background color to give users immediate feedback on what exactly has been selected.

Pressed State (Button)

Selecting a button only changes the button’s state to pressed state.

Long Press State

Long press anywhere on a widget opens the native iOS contextual menu that enable users to edit or remove the widget.

Processing State

When a request is being processed after a user’s action, such as tapping on a button, the tapped button expands to the full width of the container, and shows a circular indicator in front of the button text. The text changes to present continuous tense followed by an ellipsis “…” to indicate the processing state.

Success State

The processing state automatically transitions to the success state once processing is finished in interactive widgets. The in-place loading indicator transforms into a success icon, and if there are more items in the list, the widget is replaced with the next item.

Fail State

There is no required success state in interactive widgets. The processing button changes back to the button’s default state.

Tapping on Widget

Tapping on a widget navigates the user to the app and opens the corresponding page, such as a list report page type.

Tapping on Row or Column

Tapping on a row or a column in the widget body, such as an object cell, navigates the user to an object details page that corresponds with the cell’s subject.

Empty State

If there is no content to display, the empty state message on a widget lets the user know what’s happening, why it’s happening, and what to do about it.

Resources

Development: FUIKPIView, FUIKPIUnitItem,  FUIKPIProgressView, FUITimelinePreviewView,  FUIObjectCell, FUIObjectCollectionViewCell

SAP Fiori for Android: Widgets

Human Interface Guidelines: Widgets

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. 

This pattern is an extension of, or additional module to, the general onboarding pattern. For more information, click here.

Usage

Only use the multi-user onboarding pattern when there is more than one user who may share a single device. It is used in tandem with the single-user onboarding pattern as an additional module to the overall onboarding process.

Anatomy

Behavior and Interaction

Once the user takes an action on a view to proceed further, the next view in the process is presented. Include a blank white screen as a layer above the launch screen when these modular transitions take place. Once the entire onboarding process is complete, the launch screen transitions into the Home screen of the app.

Adaptive Design

Resources

The consent form pattern is generally used in onboarding scenarios. It stores 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.

Anatomy

Behavior and Interaction

Variations

Resources

Development: Onboarding Patterns

Related Components/Patterns: Navigation Bar

The basic authentication pattern is used for general authentication purposes.

Anatomy

Behavior and Interaction

Adaptive Design

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 SAP Fiori for iOS.

Anatomy

Variations

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.

Variations

Basic Authentication

Basic authentication consists of passcode/login variations which are highly customizable. To learn more, see Basic Authentication.

Biometric Authentication

Biometric authentication refers to technologies that can be used to detect and recognize 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 SAP Fiori for iOS. To learn more, see Biometric Authentication.

Signature Capture

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. To learn more, see Signature Capture.

Resources

Related Components/Patterns: Basic Authentication, Biometric Authentication, Signature Capture

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.

Anatomy

Behavior and Interaction

Resources

Development: FUIOnboardingScanViewController

Related Components/Patterns: Barcode Scanner

SAP Fiori for iOS supports multiple chart types. 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.

Variations

Horizontal Bar Chart

The horizontal bar chart displays horizontal bars aligned to the y-axis. The bars are used to represent discrete quantities or amounts.

Compared with column charts, horizontal bar charts have more space available for their item labels so they’re great for visualizing discrete values when data labels are long, for example, for product names.

Do

• Use to represent measurements for discrete items.
• Use for items that have long label names, because the y-axis labels can expand.

Don't

Don’t use horizontal bar charts to display time-based data, because time values are usually demarcated from left-to-right along the x-axis, but here the x-axis is used to show the value of each chart item.

Column Chart

Column charts use vertical bars to represent quantities and amounts. With their side-by-side arrangement of columns, they can be used to illustrate changes in values over time. The horizontal spacing between each column or cluster serves to reinforce the distinctness of each chart item or group. Please note that the y-axis baseline always starts at 0, with positive values appearing above and negative values below.

Do

• Use for comparing values from non-time series datasets.
• Can be used instead of a line chart for time series data when it is either more important to see the value of each item than the overall shape of the data or the dataset is missing values, which would create gaps in a line chart.

Don't

• Don’t use with extremely large data sets, because the columns will be too narrow to accurately differentiate or easily select; use a line chart instead.
• Don’t use when the x-axis labels become truncated; use a horizontal bar chart instead (only for non-time series datasets).

Stacked Column Chart

The stacked column chart is an extension of the column chart, and is great for showing the total of a group as well as the different categories within the whole that make up the total. This chart works well when the focus of the chart is to compare the totals and one part, or category, of the total.

Single Selection

There are two selection variations for the stacked column chart. Single selection is where a single column can be selected as a whole to view the total sum along with the total of each category.

Series Selection

This variation allows for one category, or series, of the column to be selected and compared. App teams should select which option works best for their data set and use case.

Do

• Use when it is important to compare individual groups that are part of a whole.
• Use to show how a larger category is divided into smaller categories and what the relationship of each part has on the total amount. 

Don't

• Don’t use with large data sets, because the categories within the column will be too small to effectively see the patterns in the data.
• Don’t use this chart when you can have negative values as there is no way to show negative spaces in a positive column.

Line Chart

Line charts use straight lines connecting points plotted in 2-D space to represent data and trends. They are useful for showing the change in values (continuous or discrete) over time.

Do

Use to display a trend in the data, because the connections between the data points provides an overall shape to the dataset.

Don't

• Don’t use for data sets when the values along the x-axis are unrelated, because the line may imply a trend that does not exist.
• Don’t use when the dataset is missing several values, because breaks will appear in the line; use a column chart instead.

Area Charts

Area charts depict data and trends with straight lines connecting points plotted in 2D space, and emphasize volume with color filled in the space between the lines and the axis. They can be used for highlighting changes on volume of data over time.

Do

Use to display and emphasize quantitative progression over time.

Don't

• Don’t use when x-axis data and y-axis data are unrelated.
• Don’t use when there are values missing in your data set. It will cause breaks in the area chart; use a column chart instead.

Combination Charts

Combination (or “combo”) charts are a combination of column and line charts. They can be used to display changes in discrete values over time compared to a measurement such as a mean, target, or expected value.

Do

• Use when it is important to directly compare two different series that use the same measure (y-axis). A two-series column or horizontal bar chart can also be used, depending on the dataset.
• Because combo charts rely on line charts, the dataset should either be a time series or involve the ranking of items.

Don't

Don’t use for data sets when the values along the x-axis are unrelated, because the line chart may imply a trend that does not exist.

Waterfall Chart

A waterfall chart uses columns to visualize the cumulative effect of increases and decreases of a set of data. The height and color of the columns are determined by the values. The value is displayed by selecting a single column. The legend of a waterfall chart always displays the corresponding colors to indicate an increase, decrease or total.

Do

• Use to display a sequential data set.
• Use contrasting colors to highlight differences in values.

Don't

Scatter Chart

Scatter charts have a specific purpose. They allow you to show the correlation and relationship between two variables. The data visualization uses dots to represent the values obtained for two different variables, x and y, and shows how much one variable is affected by another. It is used to show trends. Additional colors of the dots allow you to add a third dimension or series to the plot.

Series Selection

If there are multiple series, users can select one series by tapping on the corresponding item in the legend. The series they have selected is displayed as the most prominent in the plot area.

Data Point Selection

If users want to see the x and y values for one single data point variable, they can tap on a point. A vertical and horizontal guide appears allowing them to slide their finger from point to point. Their values are reflected in the summary section.

Do

Use this chart when you need to show a correlation between two variables.

Don't

Don’t use a scatter chart if the variables do not have a direct relationship with each other.

Bubble Chart

Bubble charts are similar to scatter charts  in that they show correlation between data but they add a third dimension which is visualized by the size of the circle. Both the scatter and bubble charts are useful when showing trends, clusters, patterns, and relationships. Additional colors of the circles allow you to add a fourth dimension or series to the plot.

Series Selection

When there are multiple series, users can isolate and view a single series by tapping on the series in the legend. The series they have selected is displayed as the most prominent in the plot area.

Data Point Selection

Like the scatter chart, users can select one single data point (circle) by tapping directly on it. A vertical and horizontal guide appears allowing them to slide their finger from point to point. Their values are reflected in the summary section.

Do

• Use this chart when you need to show a correlation between the variables in your data set.
• Size bubbles appropriately by scaling the size of the bubble by area and not diameter.

Don't

• Avoid using odd shapes.
• Avoid too many sizes in a plot as it may look chaotic.

Stock Charts

Stock charts are similar to line charts in that they show trends of data with straight lines connecting points. To provide complete information to users, we recommend not omitting any essential data when designing a stock chart.  

A stock chart is interactive. A user can tap and slide their finger on the trend line to see how prices change over time.

Ticker Name

A ticker name identifies the company on the stock exchange.

Current Trading Price (Spot Price)

The value of the stock at this moment in time.

Open/High/Low/Close (OHLC)

• Open: The value of the stock at market open
• High: The stock’s highest value during the day’s trading session
• Low: The stock’s lowest value during the day’s trading session
• Close: The final price

Volume

The number of shares traded during the day’s trading session.

Donut Chart

Donut charts are ideal for a part-to-whole data analysis. A donut chart shows how a total amount is divided between levels of a categorical variable as a circle divided into radial segments.

Chart segments are interactive. A user can select one or multiple segments by tapping them to see the percentage and metric value of the selected segments.

Do

• Use a unique color for each segment.
• Sort segments from the largest segment to the smallest segment in the clockwise direction. However, when the segment labels have an inherent ordering, then plotting the segments in that order. e.g. Strongly Agree, Agree, Disagree, Strongly Disagree

Don't

Avoid using more than five segments. A donut chart becomes difficult to understand when there are many segments.

Resources

Development: FUIChartFloorplanView

SAP Fiori for Android: Chart Types

Related Components/Patterns: Chart Overview

In enterprise software, onboarding is the process of activating an existing user account and getting the user up and running with the app with key instructions. 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 terms of data sensitivity, security level, and number of users.

Click here for the detailed onboarding process flow.

Usage

• Welcome users with an element of excitement for the experience ahead.
• Keep the entire onboarding process as simple as possible and use clear language that gets straight to the point to avoid any churn.
  
• Only ask users for essential information and be sure to explain the importance of requested details since the onboarding process can be time-consuming.

• Don’t repeat the onboarding flow after the user has completed the process the first time.
• Don’t skip the onboarding flow for first-time logins.
• Don’t ask the user for multiple permission requests, such as camera access, notifications, settings, etc., during the onboarding process unless it’s necessary to the app experience.

Anatomy

Behavior and Interaction

Onboarding is designed to be a modular process to provide flexibility in terms of setting it up as per the app’s requirement.

The various views in onboarding are designed to be modal windows to give users a way to exit the onboarding process at any time.

Once the user takes an action on a view to proceed further, the next view in the process is presented. Include a blank white screen as a layer above the launch screen when these modular transitions take place. Once the entire onboarding process is complete, the launch screen transitions into the Home screen of the app.

Configurations for Welcome Screens

The welcome screen also supports some other configurations to further customize themselves.

• Top Image: A image placed on the header area that is generally used for application logos.
• Bottom image: This image is placed in the footer area and is generally used to add secondary logos, such as parent companies or affiliates.
• User Legal Agreements: In proprietary software, an end user license agreement (EULA) or software license agreement is the contract between the licensor and purchaser, establishing the purchaser’s right to use the software. To move forward in the onboarding process, users must agree to the contracts. This area lists out the hyperlinks to the legal terms that users must agree to before proceeding to the app. Users must check the checkbox to continue with the app. The Terms of Service are also surfaced here for the user to view if they wanted to.

Adaptive Design

The welcome screens for single user onboarding are only available in portrait mode for compact screens; however, on regular screens they support both portrait and landscape layouts. In general, the onboarding screens can adapt their widths to fit various iOS device sizes.

Resources

Development: Onboarding patterns, FUIWelcomeScreen

SAP Fiori for Android: Onboarding

Related Components/Patterns: Basic Authentication, Consent Forms, Biometric Authentication, QR Code Scanner

Detailed User Flow

CCSL Mobile Compliance Resources Library

Usage

Anatomy

The page view with image includes three existing components: stacked modal, button, and page indicator.

A. Stacked Modal

The stacked modal navigation bar includes the title and a “Close” button for users to exit the modal.

B. Content

• Image: Optional, however using eye-catching images to show visualized features is recommended.
• Title: Use a clear and concise title to provide users an overview of the feature.
• Description: Explain your feature briefly. The content section is scrollable if the description is too long.

C. Call-To-Action Buttons

• “Next”: Use the “Next” button for the first or middle pages in the multiple page view.
• “Start”: Use the “Start” button for the last page in the multiple page view of or on the single page view.
• From Profile: Don’t use a call-to-action button when want users to open What’s New from the profile page.

D.  Page Indicator

The page indicator is used to show the progress of the wizard when there are multiple pages.

Behavior and Interaction

Adaptive Design

The what’s new component supports both compact and regular sizes. The SDK also supports landscape views for both compact and regular sizes.

Variations

The what’s new component includes a list view design and page view design. Both include ‘with image’ and ‘no image’ options. We recommend a short user flow with images.

Choose list view if:

• There are three to six updates to be announced.
• You want users to spend less time reading each update.
• You have a short description and/or small images.

Choose page view if:

• There are one to four updates to be announced.
• You have a long description and/or big images.
• You want users to spend more time reading each update.

Resources

Development: FUIWhatsNewViewController

In apps designed with hierarchical navigation, sibling navigation can help users to easily navigate between child objects.

Usage

Use sibling navigation when you have a sequence of objects, such as instructional steps, work orders, or hardware components lists.

• Don’t use sibling navigation to replace hierarchical navigation, which is used to navigate between parent and child objects. Sibling navigation should only be used to navigate between child objects.
• Don’t use it when there is no sequence of objects in your application.

Anatomy

Sibling navigation uses two existing components — the navigation bar title (two-line title) and toolbar:

A. Info in Navigation Bar

Upper Line: Shows the current and total numbers of the sibling pages
Lower Line: Shows the parent name of the sibling pages

B. Buttons in Toolbar

Previous: Brings the user back to the previous child view page
Next: Brings the user to the next child view page

Behavior and Interaction

Adaptive Design

The layouts on both compact and regular follow the standard toolbar behavior and adapt accordingly.

Variations

Text-Based Sibling Navigation

Text-based sibling navigation is best used if one of the following applies to your app:

• It has a toolbar and action buttons
• It doesn’t have a toolbar

Icon-Based Sibling Navigation

Use icon-based sibling navigation if the following applies to your app:

• It has a toolbar and two or more action buttons
• It has a toolbar that is icon-based
• It is only available for compact width devices

Resources

Development: FUIPageViewController

Related Foundation: Navigation

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.

Anatomy

List Report

A list report within the hierarchy pattern has an added hierarchy accessory. The list report allows for standard functionalities such as search, filter, and create.

Hierarchy View

The hierarchy view is the second screen in the hierarchy pattern. It places the selected object into view with its parent and/or child objects expanded. For related guidance, see Hierarchy View.

Behavior and Interaction

Single Selection

A list picker with single selection can be used in the hierarchy pattern. It is useful for the create use case where you need to identify where an object lives within a specific group or location.

Adaptive Design

When using the hierarchy pattern in a modal, use the hierarchy view with a breadcrumb.

Resources

Development: FUIHierarchyView, FUIHierarchyViewController, FUIListPickerFormCell, FUIListFloorplan

Related Components/Patterns: Hierarchy View, List Report, List Picker

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 SAP Fiori for iOS.

That said, there are best practices to consider. Instead of a list of requirements, this section shares general tips to help lend coherence and consistency to SAP Fiori for iOS apps.

It is based on U.S. time and date standards.

Time Formats

12-Hour Time

12-hour time is standard in the U.S. The day is divided into two 12-hour periods, indicated as day or night with “AM” or “PM,” respectively.

Midnight is 12:00 AM (followed by 12:01 AM); Noon is 12:00 PM (followed by 12:01 PM).

Leading Zeroes

For hours between 1 and 9 (AM or PM), do not include a leading zero.

AM/PM Indicators

The AM/PM indicator should generally be included, and it should:

• be capitalized
• have no periods after the letters
• have no spaces between the letters
• be separated from the time with one space

If it’s very clear that a time refers to day or night, the AM/PM can be omitted – for example, standard working hours can be written as “9 – 5” instead of “9 AM – 5 PM.”

24-Hour Time

A less common time convention in the U.S. is 24-hour time. Also known as “military time,” it is more common outside the U.S.

The day starts at 00:00 and ends after 23:59. There is no AM/PM indicator, and both the hour and minutes always use two digits.

Midnight is written as 00:00 (followed by 00:01).

Noon is written as 12:00 (followed by 12:01).

There is a leading zero for hours earlier than 10:00:

• 01:00 = 1:00 AM
• 09:59 = 9:59 AM
• 00:30 = 12:30 AM

In the afternoon, the hour increases above 12:

• 13:00 = 1:00 PM
• 23:59 = 11:59 PM

As 24-hour time is not very common in the U.S., the rest of the time guidelines focus on 12-hour time.

Time Use Cases

Exact Time

Exact time is used to indicate a precise moment during the day.

When precision is important, include full details:

• 11:15 AM
• 1:10 AM
• 12:00 PM

When only the hour is important, the minutes can be omitted:

• 12 PM
• 1 AM

When it’s clear the time refers to day or night, the AM or PM indicator can be left off:

• Breakfast at 7
• Dinner at 6:30

Relative Time

Relative time refers to a moment as compared to the current time.

It can either be written in long form or abbreviated, depending on available space and user preference. Just be consistent!

When using abbreviations, follow the format in these examples.

Time Ranges

When listing a time range, the exact formatting approach is less important than being consistent across the app.

These examples show two different approaches for listing time ranges.

Durations

Durations indicate the length of a span of time.

They can either be written in long form or abbreviated, depending on available space and user preference. Just be consistent!

When using abbreviations, follow the spelling found in these examples.

Date Use Cases

Relative Dates

Relative dates are dates as compared with the present moment.

See the timeline below as a reference for language. Both the options above the line and those below it are fine.

If it is necessary to abbreviate a relative date, try to follow the formats listed in this chart where possible. Please note that terms like “last week,” “yesterday,” “today,” and “tomorrow” change a bit when abbreviated.

Pay close attention to the app screen’s context – for example, using “m” to abbreviate months on the same screen as “m” is used as an abbreviation for miles could be confusing to users.

Space Constraints

When space is tight, it may become necessary to abbreviate, truncate, or leave out date and time information.

Determine which content is most important to the user and try to retain as much of it as possible. For example, if knowing the date is very important but knowing the time less so, keep the date in full and shorten or leave out the time.

There’s no right way — just be consistent.

Date and Time Use Cases

In some cases, it is important to show both the date and time – for example, a document timestamp or an event time.

In these cases, decide which is more important to the user (the date or the time) and place this information first.

Resources

Related Component: Pickers

The map pattern is designed to display the location of business objects and give a visual indication of the object type, such as a point, polyline or polygon. It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative location-based data.

Usage

The map features allow users to:

• Quickly access geospatial and business data from the field
• Search for business objects
• See an overview of business objects and their locations

• Quickly access previews of business objects
• Get directions to business objects from their current location
• Show and hide different map view and feature layers

Anatomy

A. Map Search

Search is an optional feature that can be included in the map view.

There are two types of search panels: one with a list of business objects displayed, and one with only the search bar. When using the search panel with the list, the items should be presented as object cells, and the list can be filtered. Please refer to the object cell and filter guidelines for more details.

B. Toolbar

The toolbar appears at the top-right corner of the map. It contains buttons for performing actions relevant to the current view or the content within it. There are five default actions available to use in the toolbar and you may include up to six actions.

The five default actions are:

• Map Settings: Appears as a modal window when the user taps on the information icon. The content that appears within the settings modal depends on each app’s specific needs. Some examples for settings are Map View Options, Feature Layers Options, Near Me Radius, and Map Unit Measure.
• Current Position: Displays the user’s real-time location if the device’s GPS setting is turned on. The user’s current location is highlighted on the map. There are two states of the current position icon: On and Off.
• Show/Hide Panels: Moves all panels including the search box off the screen. Tapping the button again returns the panels to their previous positions.
• Map Legend: Provides detailed information about the symbols and visual elements that appear on the map view.
• Zoom Extents: Resets the map zoom to a level where all available markers appear on screen at once.

C. Map Markers

Map markers indicate either single or multiple business objects on a map. They can be represented by points, polylines, or polygons. Each marker type has a default and a selected state.

• Points are used to represent one or more business objects at a specific location. Point markers can be shown with icons, images, numbers, and letters to give additional information about the business object.
• Polylines can represent linear assets, such as pipelines or water-distribution networks.
• Polygons are used to represent areas, such as functional locations or regional boundaries.

Objects that are close together cluster together or apart depending on the zoom level of the map. As the user zooms out, markers merge into a single marker with a number count displaying how many objects are located within the cluster. As the user zooms in, the marker breaks apart into the individual objects. Objects that share one single geometry (location) are displayed as a single marker with the number count. If objects in a cluster are different types, the marker should be set to a neutral color. If objects in a cluster are all the same type, the marker should reflect the color set for that specific object type.

Users can select a cluster marker by tapping it and a list panel showing each object within the cluster should be displayed. Selecting one of the objects from the list opens the detail panel for that object.

D. Detail Panel

When a user selects a map marker, either a point, polyline or polygon, a detail panel slides in from the left to show additional information.

This panel displays information about the selected business object, and can contain general details, navigation direction information, analytics, quick actions, etc. As the panel is constructed in a modularized fashion, the specific combination of content types will vary across applications.

Examples of different content types to include are:

• Title: This section should always be at the top of the panel. Include the object’s name with an optional subtitle. Use tint color for the title when it’s possible to drill down further to see more details about the object.
• Additional Information: Use this section to display additional information about the object. Short texts, status icons, and system-generated tags may be used.
• Directions Button: A directions button with or without the address may be used.
• Actions Cell: Use this section to display quick actions related to the object.

Behavior and Interaction

From the Map view, the edit mode can be initiated two ways depending on if you are creating a new object or editing an existing object. The transition to edit mode will happen in place and preserve any filters and/or settings that have been set. 

Edit Existing Object

When editing an existing object, the edit mode is triggered from the action cell in the detail panel of the selected object. In edit mode, the selected object (point, polyline or polygon) is displayed and can be edited as needed. Once the object’s new geometry is saved, the user returns to the previous map view.

Edit: Create New Object

When creating a new object, the edit mode is initiated from the “Add” icon in the navigation bar. The user can choose from a list what type of object they want to create. Point, polyline, and polygon are supported. The transition to edit mode happens in place and preserves any filters and/or settings that have been set.

Once in edit mode, the user can tap on the locations where they want a point, or series of points, to be placed. Point locations can be changed with a tap and drag gesture, or via the address fields in the edit panel. After the object is created and saved, the user returns to the map view from where they started.

Map Routes

Routes are path indicators that contain multiple stop sites in the map.

Behavior

Adaptive Design

The map pattern is supported for both compact and regular widths, but some of the features are displayed differently. At this time, edit mode is only available in regular width.

Example 1 – Map Settings in compact is a full screen modal. In regular, settings is a modal window.

Example 2 – In compact view, the map legend is displayed at the bottom of the screen. When in landscape mode, the legend is anchored in the top left of the screen. In regular view, it always appears as a pop-over anchored to the floating toolbar.

Example 3 – In compact view, the detail panel slides up from the bottom of the screen. In regular, the detail panel slides in from the left and floats along the left side of the screen.

Resources

Development: Map View

SAP Fiori for Android: Map

A 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 a list report when there is a large list of items and the data is of the same object type. Do not use a list report when it contains different object types – for example, a mixed list of people profiles and tasks. The main functions of this page type are for users to search, group, or filter the list to narrow down the list.

Anatomy

Navigational Structure

A user typically navigates to a list report from an overview screen or an object screen. In most cases, a user can tap on each line item to view details of the object. This is normally a drill-down navigation. However, in use cases where there are no more details for each line item and the primary action is to edit the item, it is appropriate to use a modal in edit mode when the user taps on the line item.

Content Structure

A. Navigation Bar

Contains the list actions, including “Filter” (which combines sorting, grouping, and filtering functions), “Add New Item”, and “Edit” for group actions such as “Delete”.

B. Search Bar

May be either always visible or hidden to a user until they pull the list down.

C. Filter Feedback Bar (Optional)

Can display frequently used filters. The more common usage of the filter feedback bar is to show the users what filters have been applied when the list is filtered.

D. Content Area

Displays a list of items of the same type. It can either be a list of object cells or a table.

E. Toolbar (Optional)

If there are any more list-related actions besides “Filter”, “Add”, and “Edit”, use the toolbar for these actions. In compact view, the toolbar is used when the navigation bar doesn’t have enough space for all of the actions.

Content Guideline

A. Navigation Bar

Back Button

Use the title of the previous screen for the “Back” button label with a chevron. Avoid using an ambiguous word such as “Back”.

Screen Title

The screen title of the list report is composed of two parts: the name of the list and the counter in parentheses to reflect the number of items in the list. For example, “Tasks (100)” can be the screen title for a task list when using the list report page type.

Buttons

The navigation bar contains controls for managing the content area, such as “Filter”, “Edit”, and “Add”. Normally, the “Edit” action, if there is one, sits on the right side of the navigation bar with any other buttons beside it to the left. If there is no “Edit” action, the “Filter” button should be on the right side of the navigation bar.

In compact width, actions on the navigation bar should have a minimum of one icon and a maximum of two icons. If you require more actions, they must be placed on the toolbar.

In regular width, actions on the navigation bar should have a minimum of one icon and a maximum of three icons.

B. Search Bar

The search bar sits between the navigation bar and content area. It allows users to search for specific items. The search bar can be always visible to the users or can be hidden under the navigation bar until the users pull the list down.

See more in search bar.

C. Filter Feedback Bar

In the default list report floorplan, use the filter feedback bar only when there are frequently used filters to help users quickly narrow down the list.

If there are no frequently used filters, the filter feedback bar can be displayed after users sort, group, or filter the items on the list. Users can tap the interactive buttons to remove the active filter.

See more in filter feedback bar.

D. Content Area

The content area consists of either a list of object cells or a table to display the items.

Object cells

When using object cells in a list, ensure that all key information is properly presented in the object cells. In regular width, ensure that the information is balanced on the screen and avoid creating large empty areas. Tapping on one object cell navigates to its related object screen, which includes detailed information and actions for that object.

Table

When there is no data available in the content area, for example, when filters are applied with no matching results, inform users with the appropriate placeholder text.

E. Toolbar

The toolbar contains relevant actions buttons for the content area and may be used when there is not enough space for all of the buttons to fit in the navigation bar.

Buttons in the navigation bar and buttons in the toolbar are both list actions, which impact the whole list instead of one single item.

Behavior and Interaction

List Actions

Filter: The “Filter” button provides the sorting, grouping, and filtering options to narrow down the list.

Edit: The “Edit” button activates the multi-selection mode of the list. Users can select one or more items on the list and perform group actions, such as Delete and other line item actions.

Add: The “Add” button allows users to add a new line item of the same object type to the list. Typically, the add button on the list report floorplan doesn’t provide other functions.

Share: The “Share” button allows users to share the list through email and other supported channels in the app.

Other list actions: The app can have other list actions depends on the use cases. Keep in mind that these actions should impact the whole list, not just specific line items.

Line Item Actions

Line item actions directly impact the item rather than the whole list.

For example, Approve can be a line item action.

The maximum number of quick action buttons available via swipe is three. If there are more than three actions, include a “More” button that, when tapped, brings up an action sheet allowing users to make further selections. Use text or an icon with a label to communicate the purpose of each button and use consistent color coding.

Filtering

When filters or sorting are applied to the list, show the filter feedback bar on top of the list to indicate that this is a filtered list. The screen title will change to reflect the count of items on the current list and the count of items on the original list. A user can tap the buttons to remove the filters.

Grouping

A user can apply grouping to the list, at which point the group title and a count of the grouped items appear. Grouping doesn’t affect the screen title when no filters are applied. Please note that the filter feedback bar should reflect that grouping has been applied to the list.

Adaptive Design

A list report page type supports both regular and compact widths. Sections in the content area maintain the same vertical structure across compact and regular width layouts. Individual cells expand horizontally to fit the screen size. In regular width, detailed descriptions for each item may be provided.

Readable margins may also be applied to screens that use regular width in order to make content appear less spread out.

Resources

Development: FUIListFloorplan

The profile and settings page is a modal view in form of a container that holds various user and app specific settings and allows the user to customize their app experience.

Anatomy

Content Structure

Behavior and Interaction

Navigating to the Profile and Settings Page

The entry point for the profile and settings is located on the right side in the navigation bar. It’s recommended to place the user profile on the home screen only. 

Adaptive Design

Resources

Usage

The sort and filter form should be used for large complex filters with a lot of sort and filter options if there is a large amount of data. It helps the user to focus on the filter task by providing more space to work with. The sort and filter form requires the user to perform more actions compared to using the filter feedback bar. For a more simple, contextual filter option, see Filter Feedback Bar.

Anatomy

The sort and filter form consists of reusable and modular sections. It can contain several filter form components, such as a filter form cell (single/multiple selection), slider, switch form cell, segmented control form cell, pickers, and order picker form cell.

A. Title and Search Results

Navigation bar title: “Filter”

Navigation bar subtitle: <name of filtered content/list, default “Results”> <number of filtered items> of <number of all items> The text in the subtitle should be automatically adopted to the content of the list that is filtered, for example, orders, products, equipment, notifications, etc., so that the user is always aware of what is being filtered.

B. Cancel

Closes the view without applying filters.

C. Reset

Resets all filter settings to the initial state.

D. Sort Components

Used for sorting the results by a certain logic. Sort should always have a preselected value as the default sorting method. Use the filter form cell for single selection and the order picker form cell for multiple sort criteria and sort direction.

D. Filter Components

Used to narrow down the list. Common controls include slider, switch form cell, filter form cell (single/multiple selection), segmented control form cell, pickers, and order picker form cell.

E. Action Toolbar with Result Button

Action toolbar with default label: Show <number of filtered items> <name of filtered content/list>, default “results”)

Behavior and Interaction

1. Trigger Sort and Filter Form: The filter modal is usually triggered by tapping on the filter button on the navigation bar. As a secondary option, the filter button can be placed on the toolbar if there is no available space in the navigation bar. The filter button should be a text button.
2. Sort and Filter Form: The sort and filter form is opened as a fullscreen modal and contains sort and filter options. Sort does not affect the number count.
3. Filtered Results: As soon as a filter is applied, the filter button in the navigation bar should display the number of applied filters. This helps users to understand how many filters have been applied.

Adaptive Design

Sort and filter pattern in regular width appears as a popover.

Sort

Always put the sort option at the beginning of the filter view. Sorting allows users to change the order of the entire results. Popular sort options are sorting by alphabet, date, or rating.

If the data needs to be sorted by one criterion, use the filter form cell (single selection). If it is necessary to sort by multiple criteria where the sort order direction and the sequence of criteria matter, use the order picker form cell.

The sort form should always have a preselected value as the default sorting method.

Switch

Use switches if the type of filter has two mutually exclusive states only – on and off. In some use cases, if a switch is set to “on,” the user can enter additional data, for example, by using a date and time picker.

List Picker – Single Selection

A list picker is used if there are more than eight values to select from in a filter category. Use a value list if the number of values is dynamic or unpredictable.

List Picker – Multiple Selection

In some use cases, a list with a search bar is used to search through a large collection of values. If a list picker allows multiple selection, the selections may be grouped in a selected group to enable users to deselect without having to scroll through a large list.

Data Range

Picker

A picker can be used to select date and time, or to select a duration of time.

When inputting data sets such as setting the price range, “Min” value automatically affects the starting value of the “Max” picker.

Slider

A slider is best used when the minimum and maximum values are established. A slider form cell can be used when selecting a precise value is not important. If the exact value matters, use a picker control.

Use a range slider if the user should be able to select a range of values between a given range.

Resources

Development: Create and Filter Patterns

SAP Fiori for Android: Sort and Filter Pattern, Sort by Multiple Criteria

Related Components/Patterns: Sort & Filter Overview, Filter Feedback Bar

The search pattern is used to locate information or objects within a large collection of values. There are two types of search.

Variations

Loading State

After the user types in their search query, the loading state will be displayed through skeleton loading while the search results are loading. 

Empty State

The empty state displays an error message if there are no matching search results.  

Recent Searches

Recent search history can be displayed when the user is ready to enter their search query. This provides easy access with quick links to previous searches in case the user wants to repeat a recent search. 

Search Suggestions and Bolded Exact Match 

As users type in their search query, matching or relevant search results/search suggestions through bolded exact match show up to provide them with quick links to relevant search results.  

Search with Quick Filter 

Search may be used in conjunction with the quick filter bar to help filter search results and narrow search results down. 

Search to Select

The search to select component is used to select multiple values while searching in a large collection of items. Its functionality is similar to a multi-select list picker but the selected values are located within the search field instead. To learn more, see List Picker and Search to Select. 

Resources

Development: FUISearchBar

SAP Fiori for Android: Search

Mobile applications do not always have the network connectivity needed to access real-time data. We therefore recommend providing an offline solution with your application that allows users to complete their tasks regardless of network connectivity.

An offline-enabled SAP Fiori application should regularly synchronize data with the server. Provide an additional manual way for the user to synchronize for situations where it is critical to synchronize data or retrieve data from the server. This is important for users that are entering areas with low or without network connectivity.

Usage

User Triggered Sync

Feedback

In an offline application, it is important to communicate at all times to the user the state of network connectivity in the application as this could disrupt their work. There are a few ways this can be done through the application.

Status Bar

The status bar should change color in offline mode. It helps the user to recognize that the app is in offline mode on any screen in the app.

Sync Button

Display a spinning sync icon next to the Sync Button to communicate to the user that the app is syncing.

Timestamp

When the app finishes syncing, the timestamp under the sync button should refresh to reflect the last sync time.

When the user goes back to other app screens during the syncing process, a syncing indicator will appear under the header to show the progress.

Banners

Use an offline banner when the app goes offline. This can auto dismiss after a few seconds or be persistent.

Use sync banners if the user wishes to continue working after triggering the sync. Provide a way for the user to cancel the sync or close the banner. A spinning sync icon indicates that the sync is in progress. Once the sync is completed, communicate to the user that the sync was successful by replacing the text with “Sync Completed”.

Resources

Development: FUIOfflineBannerMessageView

Related Components/Patterns: Banners, Inline Errors

Feedback provides users with timely responses to actions or informs them about the loading state or condition of content or processes. There are two types of feedback:

• System feedback: provides system-generated feedback about the status of activities and processes, such as the network activity indicator, loading indicator.  
• User-triggered feedback: provides information to the user in response to a specific action, such as the checkout indicator, progress and processing indicator, and the toast message.

Variations

User-Triggered Feedback

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 recover quickly from the error state.

Variations

Error Banner

An error banner is used to notify a user when the state of a workflow is disrupted and may require attention. The user can dismiss the error banner by tapping on the “Close” button.

See also Banners.

Full-Page Error Message

A full-page error is generally used to communicate an error from the server. It blocks the user from viewing the screen and provides a way out for the user from the current workflow. Alway ensure that the error message communicates exactly what has gone wrong and provides a way for the user to continue working.

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 is suitable for apps based on a single content category. Apps that use a hierarchical navigation style typically start with an overview screen that provides users a high-level summary of the entire app. Users can then access more detailed information by drilling down into the available content subcategories.

Flat Navigation

Flat navigation is suitable for apps that are based around multiple content categories. A tab bar is used in flat navigation, with each tab representing one content category. An optional search tab can be used to enable a global search feature. Inside each tab, the user can drill down in a step-by-step fashion to access increasingly detailed content.

Resources

Related Components: Navigation Bar, Sidebar, Sibling Navigation, Tab Bar

The create & edit pattern is used to generate or update object. It is presented to the user via a modal and 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 object.

Usage

The create view is presented in a full-screen dialog on mobile devices or modal dialog on tablets. In the dialog, users are able to input the information related to the object they are creating.

Anatomy

Form cells within the create modal are grouped based on different types of data.

A. Navigation Bar

Contains the screen title and actions for users to save the data or exit the modal by tapping on the “Cancel” button.

B. Key information

Allows a user to input the most important information about the object. Some input fields may be set to required to create the object. In some cases, input fields may be pre-populated depending on if the object is linked to other objects.

C. Property

Appears after the key information section to gather additional information of the object. In general, one form cell is used for one property. Cells can be grouped together based on the information hierarchy of the object. Choose the form cell that best serves the data type.

D. Accessory

Found at the bottom of the modal. It may include elements such as notes and attachments.

Title Form Cell (FUITitleFormCell)

A title form cell allows the user to enter a short string of information into a single-line input field with fixed height. If inputting multiple lines of text are required, use a note form cell instead.

Prompt text should be displayed clearly and concisely to communicate the purpose of the input field, such as “Title” or “Name”. Vague directions should be avoided, such as “Tap to Write”. If necessary, the content in text fields can be pre-populated. To learn more, see text input.

Text Field (FUITextFieldFormCell)

When the modal contains a large number of text input fields, such as a form used to generate a new contact, we recommend using the text field component. This component displays the label of the input field to provide users a better understanding of the purpose of each entry. The text field component has a stacked variant and a single-line variant. Select the appropriate variant depending on the length of the content and the screen size you are designing for.

Read more about the text field in text input.

Key Value Form Cell (FUIKeyValueFormCell)

A key value form cell provides additional space for multi-line text entry. If additional accessories are present below the key value form cell, such as attachments, the height of the cell should be fixed, and a scroll bar will allow users to see the hidden content. If the key value form cell is the bottom-most component in the create pattern, the height of the cell can be flexible to grow downwards as the user inputs content into the cell. To learn more, see text input.

List Picker Form Cell

A list picker allows for single selection or multiple selection among values within a defined category, for example, to choose a specific project when creating a new task. A search bar may be incorporated to assist the user to locate the item. Search to select provides similar functionality and may be used for selecting multiple objects.

To learn more, see list picker or search to select

Pickers

Pickers allow the user to make a selection within a short  and predictable list of values. A date picker can be used for the user to select a date, a time in a day, or a combination of both. The default value of a date picker is usually the current date and time. To learn more, see pickers.