What’s New

This article provides an overview of the topics that have been added or changed based on the controls available in the SAP BTP SDK for iOS.

SAP BTP SDK for iOS 24.12

Design Kit

New Updates via Branches

Updated Design Kit! We’ve transitioned from creating new versions as separate files to updating within the same file using branches. This change ensures a single source of truth, improves collaboration, and simplifies version control by keeping all updates centralized and organized in one place.

SAP Fiori for iOS Design Kit

Variables – Cell Style

New variable! Cell style has been added to the variable collection. All the table view cells and form cells can now be switched between a full-width style or an inset grouped style, including the header cell and footer cell. Hairline control has been added to this variable collection as well.

From left to right: full-width cells and inset grouped cells

Foundation

Elevation

New! The Elevation article goes into the details, visual cues, examples, and usage of the elevation system.

Elevation techniques: materials and shadow effect styles

Chart Colors

Update! Chart ordered and semantic colors have been updated to align with new chart colors from web.

Updated chart ordered colors in light and dark modes

UI Components & Patterns

Avatar and Avatar Stack

Feature Enhancements! We have added a grouped layout as well as top and bottom labels for the avatar stack.

From left to right and top to bottom: leading label, above label, trailing label, and below label

Document Scanner

Feature Enhancements! The document scanner allows for automatic and manual mode scanning with border detection, can also do multiple page scanning and editing.

Document scanner views

Feedback Patterns

Feature Enhancements! Multi-message handling has been added to the feedback patterns. When a screen contains multiple messages, the banner can show an overview of the type and number of messages with an action link to open a multi-message handling detail view.

Form Cells

Feature Enhancements! Attachments form cell, filter form cell, and segmented control form cell now have required field behavior available.

From top to bottom: filter form cell, segmented control form cell, attachments form cell

Object Cell

Feature Enhancements! The object cell has been enhanced to provide more flexibility, which mirrors the modular structure of the cards component including swappable nested elements such as the rating control.

Object cell with label button and rating control (top) and with avatar stack and overflow button (bottom)

Rating Control

Feature Enhancements! We have added half stars for read-only rating controls as well as optional leading and trailing text. The read-only star sizes have been enhanced and small sized editable and disabled rating controls have been removed for better accessibility.

From top to bottom: editable, read-only, disabled, and accented read-only rating controls. From left to right: large sized and small sized rating controls

Step Progress Indicator

Feature Enhancements! The step progress indicator has been enhanced with icon nodes as an alternative to numeric nodes.

From left to right: numeric nodes and icon nodes

SAP BTP SDK for iOS 24.8

Foundation

SAP 72 Semibold Weight

Updated Typography! New semibold weight has been applied across the design kit and SDK. Formerly black font weight is now bold, and bold is updated to semibold. Exceptions to the approach include navigation bar title, KPIs, and card headers.

Examples of 72 Semibold type update in cards and form (bottom right)

UI Components & Patterns

Avatars and Images

Updated Component! Multiple avatars can be grouped horizontally in an avatar stack. The avatar stack can now also display an optional label in front of (leading) or after (trailing) the avatar stack. However, we do not recommend using both the leading and trailing labels together.

Avatar stack with a leading (left) and trailing label (right)

Banners

Updated Component! By default, a banner partially covers the content below it. Now, banners can also appear between elements, making sure they don’t cover any content. In this position, the banner pushes the content below it down.

An embedded banner below a navigation bar (left) and an object header (right)

Buttons

Updated Component! The new variant of loading state in buttons (“FUILoadingButton”) can be applied to a button when a user-triggered non-disruptive progress is being processed. The original icon and/or text is replaced with an activity indicator and/or loading message.

Loading state primary button (left) and secondary button (right)

Cards

Updated Component! The card footer now allows using an overflow button if there are more than two buttons or when the buttons do not fit into the footer’s width. Tapping on the overflow button shows the user the additional buttons in a menu.

Loading state primary button (left) and secondary button (right)

Feedback Indicators

Updated Pattern! The design of the progress and processing indicators has been updated with thicker indicator strokes, a light grey track, and the SAP Fiori icon inside.

Processing indicator (left) and progress indicator (right)

Form Cells

Updated Components! List picker form cell, in-line signature form cell, and pickers now have required field behavior available.

Examples of list picker, pickers, and in-line signature form cell with asterisks

Illustrated Message

Updated Component! The illustrated message component now supports up to two action buttons. These buttons are flexible in layout and button type to better accommodate more use cases.

Updated illustrated message buttons

Segmented Control

Updated Component! Segmented control colors are updated to align with the native iOS control.

Updated segmented control colors

Sidebar Pattern

Updated Pattern! The visual design of the sidebar has been enhanced. Additionally, the sidebar has a new edit mode to rearrange and to hide or show items.

Sidebar in edit mode

Skeleton Loading

Updated Pattern! Skeleton loading for object headers has been added to the design kit. It is used to replace the object header on a screen during skeleton loading.

Object header placeholder for compact (top) and regular screens (bottom)

Support

To ensure the best support experience, we recommend reaching out to responsible for the mobile design system and SAP BTP SDK for iOS, as well as the community, using the communication channels provided below.

Communication Channels

Q&A: “InnerSource” Teams Channel or via Figma comments
Feature Requests: Jira
Planning: Jira Roadmap for Fiori Components (Access needs to be requested by SAP Jira Admins)
SDK Bug Reports: Jira Android | Jira iOS

If you have any further questions, please contact the repository admins listed below:

Code: Raman Sethi
Design: Emil Voutta
Operations: Marisa Wollner

Governance

Currently, all contributions are incorporated into the Community Components & Extension of the Mobile Design System & SDK – a separate code repository and design kit that extends the common Mobile Design System & SDK.

The SAP Mobile Design System & SDK is divided into two main areas: common and community components.

Common Components: They are owned and maintained by the Core Design & SDK Team.
Community Components: They are owned by the respective contributor.

Information

Please note that contributing to community components does not automatically guarantee a publication in the common Mobile Design System and SDK. The decision to include contributions is made by the Core Product Teams (see roles below).

Roles and Responsibilities

Contributor (Product Teams)
Anyone within SAP can become a contributor. A contributor is an individual or team that contributes code, UI design, and documentation to the Community Components project, but does not have access to merge code and design directly into the core.
Core Product Team Members (SDK & Mobile Design System)
Core product team members of the Mobile Design System and SAP BTP SDK review community components – they evaluate components or enhancements to ensure that the overall vision, scope, architecture, and roadmap of the project are maintained when new community components are added to the SDK and Mobile Design System.

The Core Product Team holds the primary responsibility for our Mobile Design System and SAP BTP SDK by governing the product and being responsible for the following:

Product scope, roadmap, backlog, and prioritization of requirements and tasks (based on the input of all stakeholders, especially contributors, and consumers)
Overall architecture of the product
All core product team tasks (see role above)

Documentation

High-quality documentation is as important as the code you ship. Developer documentation is handled as part of the code, whereas UI design documentation is handled as a set of markdown documents in GitHub – this may change over time based on your feedback and demand.

Contribution

Everyone within SAP is welcome to contribute, regardless of their location or business unit. To make your contribution a success, please take a look at the following guidelines.

Contribution Types

We recommend that you contribute UI design always together with code and vice versa.

There are different contribution types for you to choose from:

New Component: Add a new community component to this project.
Component Extension: Add a community component extension to this project by reusing an existing common component.

Note: (Optional) Feature parity is an important factor for our products. You are encouraged to contribute to both platforms to increase efficiency.

Contribute a Component or Extension

Our recommendation is to align with the teams responsible for the mobile design system and SAP BTP SDK for iOS BEFORE you start working on the contribution. You can contact us through our communication channels.

How to contribute UI design (components, features, and documentation):

Join the Community Components for Android & iOS Figma Project.

Create your component on a new page in the Community Components for iOS and/or Community Components for Android Design Kit.
Publish the Figma Library including your update to everyone at SAP and document your changes.

How to contribute code (components, features, and documentation):

Add a component to the Android and/or iOS repository
Provide a short description of its features, including an API description
Include a screenshot or preview image of the component
Add the component implementation to the InnerMobile Demo App

Note: (Optional) Create feature request if reusability by other product teams is assumed. Your contribution (code & design specification) will be reviewed by the maintainers of the project team.

Definition of Done

UI Design

The UI component design adheres to the design guidelines of SAP Fiori for Android and iOS and respective Material Design or Apple Human Interface Guidelines.
The UI component covers all aspects of the Mobile Design Spec Cheat Sheet.
The UI component has been added to the Community Component Design Kit, tested, and documented via the Figma info panel.
(Optional) A design guideline for your community component has been added to GitHub (see example component).
(Optional) A design specification has been provided for more details here.

Code

See Contribution Definition of Done in GitHub.

Documentation

As a contributor, you are expected to document your UI design and code

Development documentation in the code to comply with the SAP guidelines for coding rules and guidelines (VPN required)
Design guideline as part of GitHub (see example component)

Sample Component in Code (GitHub)

Check out the sample component in the GitHub repositories

Sample Component in Design (Design Kit)

Check out the sample component in the Design Kit and Design Specification and learn how to design for the mobile design system

Resources

Design Specification Cheat Sheet: Learn how to specify a component for the mobile design system for SAP Fiori for Android or SAP Fiori for iOS
Design Guidelines for Android & iOS: Understand which components and patterns are already available in the design system for SAP Fiori for Android
Figma Design Kit for Android & iOS: Leverage the existing Design Kit and reuse components and patterns to build your contribution
Development Documentation for SDK Android & iOS: Learn about APIs and development documentation
SAP Fiori Mobile Roadmap: Understand what’s next and maximize your impact (access needs to be requested)

Overview

InnerSource for Mobile serves as a platform for reusable community components and extensions for the SAP Design System and SAP BTP SDK for Android & iOS. It enables you to build state-of-the-art SAP business applications.

Currently, the SAP BTP Software Development Kits and mobile design system are maintained by the SAP Core Design and SAP BTP SDK teams. We encourage contributions to both code and UI design to foster innovative solutions and collaboration across multiple app teams. InnerSource for Mobile provides a shared platform for this collective responsibility:

InnerSource for Mobile on GitHub

We invite you to contribute to InnerSource for Mobile and make a meaningful impact at SAP and beyond. Here, you can maintain the UI design, source code, and development and design documentation for community components and extensions.

Assets and apps showcasing the SAP Design System environment

How to contribute

Get started by joining our iOS and/or Android repositories and Figma project.

How the governance works

Understand the governance model about ownership and responsibilities.

How to get support

Check out our communication channels and whom to contact if you have questions.

How to Contribute

Everyone within SAP is welcome to contribute, regardless of their location or business unit. To make your contribution a success, please take a look at the following guidelines. We recommend that you always include both UI design and code when making a contribution.

You have the following contribution options to choose from:

New Component: Add a new community component to this project.
Component Extension: Add a community component extension to this project by reusing an existing common component.

Learn more about Contribution.

Sample Component in Design (Figma Design Kit)

Check out the sample component in the Design Kit and Design Specification and learn how to design for the mobile design system.

Sample Component in Code (GitHub)

Check out the sample component in the GitHub repositories.

How Governance Works

Currently, all contributions are incorporated into the Community Components & Extension of the Mobile Design System & SDK – a separate code repository and design kit that extends the common Mobile Design System & SDK.

The SAP Design System & SDK are divided into two main areas: common and community components.

Common Components: They are owned and maintained by the Core Design & SDK Team.
Community Components: They are owned by the respective contributor.

Learn more about Governance.

How to Get Support

If you have any questions or requests, please contact us through the various communication channels or contact the admins directly.

Learn more about support.

Helpful Resources

InnerSource for Mobile on GitHub
Mobile Design Specification Cheat Sheet
Design Guidelines for Android & iOS
Figma Design Kit for Android & iOS:
Development Documentation for SDK Android & iOS
Fiori Mobile Roadmap (access needs to be requested)

Updates in 24.4

This article provides an overview of the new and enhanced topics for SAP BTP SDK for iOS 24.4.

What’s New

Updates to Guidelines & Design Kit

New Release Naming Convention

Starting in 2024, the SAP BTP SDKs for iOS and Android have changed their release naming from “Major.Minor.Patch” format to “Year.Month.Patch” format. For example, a release in April 2024 is named 24.4.0. The first patch for this release will be named 24.4.1, the second will be named 24.4.2, and so on. If the release gets delayed by a month to May, it will be named 24.5.0.

New naming convention for SDK versions

24.4 Design Kit Revamp

Updated Design Kit! The SAP Fiori for iOS 24.4 Design Kit (formerly known as “UI Kit”) has undergone significant changes, including variables, page hierarchy, in-page layout, component properties, info card, and more. Find out more details on the What’s New In Design Kit page.

SAP Fiori for iOS Design Kit 24.4

Foundation

Colors

Updated Design Kit and Guideline! The SAP Fiori for iOS color system has been refined to better harmonize with Apple’s established color system and design principles. This update leverages SAP Fiori’s design system colors while supporting alignment with Android for overall consistency. These changes include updates to label, fill, and background colors as well as adding the Materials Chrome blur effect for navigation bars, tab bars, and toolbars.

SAP Fiori for iOS color system

UI Components & Patterns

Carousel Layout

Updated Pattern! A carousel layout displays multiple cards horizontally with a glimpse of the next card visible. All cards have the same height by default, with the carousel container’s height determined by the tallest card. To scroll through the carousel, either snapping behavior or simple scrolling can be activated.

Carousel layout on a compact (left) and regular screen size (right)

Data Table

Updated Design Kit and Guideline! Read-only state has been added to data tables in edit mode. The read-only cell has a grey background. If the user taps on it, a toast message pops up to indicate that it can’t be edited. The blue background in active state data table cell is removed.

Data table active state (left) and read-only state (right) in edit mode

Feedback Indicators

Updated Design Kit and Guideline! Partial loading with loading indicator has been added, which can be used when part of the screen is being loaded. We have also added the checkout indicator to the feedback indicators with full-screen and in-a-modal variants, and processing/success/error states. The processing indicator and progress indicator are combined as a set of feedback indicators.

Checkout indicator (left) and partial loading of loading indicator (right)

Illustrated Message

Updated Design Kit and Guideline! We have added more use cases and clarifications on customizations to the illustrated messaging guideline. The horizontal layout variant is now limited to being only left-aligned instead of centered.

Illustrated message on a compact (left) and regular screen size (right)

Linear Progress Indicator

New Component! The linear progress indicator component has been added to the design kit and guideline. A linear progress indicator informs users about the status of ongoing processes, such as login progress, uploading files, or refreshing content. There are two types of linear progress indicator: determinate and indeterminate.

Indeterminate linear progress indicator (left) and determinate linear progress indicator (right)

Masonry Layout

New Pattern! The masonry layout arranges cards flexibly in a grid-like structure, with consistent width but varying heights based on content. Customizable columns determine the number of cards displayed. Cards prioritize positioning from the top left corner in this asymmetric layout.

Masonry layout on a compact (left) and regular screen size (right)

Single-User Onboarding

Updated Design Kit and Guideline! Inconsistent text input fields have been replaced with ones that match our current design system. Some of the labels for the welcome screen variants have been updated to match Android. A legal agreement feature that allows app teams to require users agree to legal policies (EULA, data privacy, terms of service) before being able to continue with onboarding has also been added.

Welcome screen with discovery basic (left) and with legal agreement (right)

SAP Fiori for iOS 24.4 Design Kit

Updated Figma Design Kit with new components and enhancements for this release, including:

New Updates page documenting release updates in Design Kit.
Go to SAP Fiori for iOS 24.4 Design Kit to learn more.

UX Consultation with Apple

Sign up for a 60-minute design consultation session with UX experts from Apple for your app. To schedule a session, contact us here.

The purpose of the consultation is to review your app design, discuss any challenges related to UI, and receive guidance on the overall user experience. You will get insights on the usage of components and patterns based on the Apple Human Interface Guidelines and receive input from a UX expert from Apple.

To leverage the feedback from Apple, we recommend inviting your product owner and lead UI developer to participate.

What’s Included

Reviewing and discussing the user experience of your app design
Guidance on suitable design components/patterns to use
Suggestions for potential improvements to your app’s UX design

What’s Not Included

Designing completely new concepts
Creating application designs or mock-ups

What We Need from You

Product name and business area
Pre-read of your app’s UI flows and any questions you may have
Brief walkthrough of persona and business process, particularly for the initial session

Get Started

The CarPlay automotive platform stands out from phones, tablets, or smartwatches, as it provides users assistance while driving. This means that activities unrelated to driving should not be included in the CarPlay experience. Driving tasks should be simple with minimal interaction and easily accessible, allowing the user to focus on operating the vehicle.

To uphold these principles, Apple regulates the content allowed in cars. The use cases for CarPlay are restricted to only support users while driving. In addition, Apple has defined categories of approved usage scenarios and UI layouts that provide clear guidance for the user experience.

Foundation

CarPlay applications are not standalone apps but extensions to existing iOS apps, similar to watchOS applications.
Before starting product design and development, Apple requires an approval process for the persona and use case. This approval process is in addition to the regular app review before a release in app stores.
To integrate with CarPlay, a special entitlement needs to be granted by Apple for each application, which enables access to CarPlay APIs.
The features of CarPlay app extensions must align with one of Apple’s predefined app types (see chapter “Introduction”).
The user interfaces of CarPlay apps follow predefined UI templates (see chapter “Templates”) provided by Apple, ensuring a consistent look and feel.
Apple’s templates do not allow for any modifications to the user interface, such as adding an SAP Fiori styling (font or colors) or SAP Fiori specific UI controls, components, or patterns.
The CarPlay simulator can be used to evaluate and test the CarPlay UI and CarPlay applications.

Resources

Apple CarPlay Design Guidelines: https://developer.apple.com/design/human-interface-guidelines/carplay

Apple CarPlay App Programming Guide: https://developer.apple.com/carplay/documentation/CarPlay-App-Programming-Guide.pdf

Design Principles

The purpose of applications for CarPlay is to assist users with driving-related tasks using the car’s built-in display(s). These applications are designed to be extensions of iOS apps, enabling users to perform specific actions that don’t distract them from driving.

Mobile devices as standalone devices with end-to-end scenario focus and auxiliary platforms as optional devices with context focus

Design Principles

When designing applications for CarPlay, there are several user experience design principles that are important to consider. These principles are essential for creating a safe, intuitive, and user-friendly experience in a car environment, where the aim is to reduce distractions and ensure ease of use.

Focus on the user

The core value proposition of an CarPlay app is to support users while driving. Those users who spend a significant amount of time driving or for whom driving is an essential part of their daily routine benefit the most from automotive applications. Examples of such users in a business context include delivery drivers, field maintenance technicians, or regional sales reps.
For a business to benefit from a CarPlay solution, the user profiles should include frequent driving activities that are necessary for completing their tasks. If the users frequently change destinations or routes, an in-car solution can be beneficial for them.

Driving-related use cases

When determining the capabilities of your CarPlay app, it’s important to focus on actions that are relevant during a drive and exclude those that occur before or after. Only include information and actions that are necessary while driving in your CarPlay application. This aligns with the predefined app types provided by Apple, which categorize use cases related to driving and give the app a clear purpose. For a CarPlay app to be approved, it must fit into one of these types in terms of its scope, UI layouts, and navigation.

For business scenarios, consider using the following app types:

Navigation apps
Point-of-interest apps

For the complete list of CarPlay app types and their functional scope criteria, see Templates.

Design Guidance

The fundamental principle of CarPlay is to prioritize safe driving and all design efforts from car manufacturers and app developers should align with this priority.

The content and interactions of apps should enhance the driving experience while minimizing distractions for the driver. The user interface should be straightforward to ensure that the driver can focus on the road and doesn’t get distracted.

Apple provides documentation on app guidelines and suggestions for designing car interfaces that also help you define the scope of your automotive app.

UI Templates

CarPlay requires specific UI layout templates and screen flows, which are determined based on an approved persona and app type.

For the complete list of general app requirements, refer to Templates.

Information

There is a limit to the number of templates (depth of hierarchy) that you can push onto the screen. Most apps are limited to a depth of five templates. Fueling apps are further limited to three templates, and driving task and quick food ordering apps are limited to two templates. These include the root template.

Resources

CarPlay Guidance: https://developer.apple.com/carplay/documentation/CarPlay-App-Programming-Guide.pdf

Updates in 9.1

This article provides an overview of the ongoing topics for SAP SDK for iOS version 9.1.

What’s New

Updates to Guideline Structure

Feedback

The Error Handling, Feedback, Offline, and Empty State View guideline articles are now grouped within the Feedback pattern.

Navigation & Search

The Navigation Bar, Sibling Navigation, Tab Bar, Side Bar, Search Bar, and Search to Select guideline articles are located within the Navigation & Search component grouping.

Example of the new guideline structure

Foundation

Iconography

SAP icons have been redesigned for the Horizon visual theme. Navigate to Iconography to learn more.

Example of the new iconography

UI Components & Patterns

Analytic Data Table Card

The analytic data card got a visual update. Additionally, the height is now flexible, and the card can contain up to three entries from the data table. It is also possible to show a thumbnail image in the header. To learn more, refer to Analytic Data Table Card.

Example of analytic data table card

In-Line Editable Data Table

As an enhancement, the data table now comes with interaction behavior that enables in-line editing. Refer to Data Table to learn more.

Example of the in-line editable data table

Empty State View

New illustration and copy added. Refer to Empty State View to learn more.

Example of empty state viewer

Form Cell

The slider form cell label has changes in label color and label font to match other form cells. Text Input will implement an interim label. Refer to Slider Form Cell and Text Input Form Cell to learn more.

Example of slider form cell and text input form cell

Quick Sort

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 list cards or to preview table views. It can also be implemented in fullscreen view, for example, in list reports. To learn more, see Quick Sort.

Example of quick sort

Semantic Buttons

Semantic buttons are now available. The tint button style can emphasize available actions and encourage users to interact with them. The negative button style indicates destructive actions and warns users to take extra precautions when interacting with the buttons. Refer to Buttons to learn more.

Example of semantic buttons

Timeline

The timeline component has been redesigned. Refer to Timeline to learn more.

Example of timeline

Timeline Preview

The timeline preview component has been redesigned. Refer to Timeline Preview to learn more.

Example of timeline preview

Toolbar

The toolbar is a component with one or more buttons that is always located at the bottom edge of the screen. To learn more, refer to Toolbar.

Example of toolbar

SAP Fiori for iOS 9.1 UI Kit

Updated Figma UI Kit with new components and enhancements for this release, including:

New Updates page documenting release updates in UI Kit.
Tutorial for theming under Foundations section.

Go to SAP Fiori for iOS 9.1 UI Kit to learn more.

Updates in 10.0

This article provides an overview of the new and enhanced topics for SAP SDK for iOS version 10.0.

What’s New

Foundation

Design Tokens

New Guideline! Design tokens are our cross-platform solution to managing color across iOS and Android. Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity. Additionally, design tokens help us to maintain visual consistency, scale design decisions, and are simple to maintain and update.

Token hierarchy shows the different levels of design tokens. 

Iconography

Updated Iconography! By utilizing the SAP Fiori Icon Library, we have created an SAP Fiori custom symbol library, which is part of the SDK. This library offers a diverse selection of SAP Fiori custom symbols in various weights and scales, enabling you to design with flexibility and adaptability. Some of the weight options include thin, light, bold, heavy, etc. The image shows the weights available.

Example of SAP Fiori custom symbols

UI Components & Patterns

Attachments Form Cell

Updated component! The redesigned attachments form cell moves the text content from within the attachment cell to below. We added additional optional fields to display file size and other relevant file information. For a more intuitive user experience, we have also introduced updated active, read-only, and disabled states.

Example of an attachments form cell

Calendar

Updated pattern! Calendars now support alternate calendars and date icon indicators with their respective legend.

Example of a calendar

Card

New component! The new card component introduces an advanced approach to utilizing cards. It is part of a new “card system” that consists of a toolkit of nested components that enable the creation of diverse card types using one and the same card container.

Information

Use the new card, as the following card types will be replaced in the future: AR card, chart card, object card, object card view, and list card.

Example of cards

Key Value Table View Cell

New component! The key value table view cell is an uneditable read-only table view cell that fits inside the table view container. It may also contain actionable text in certain use cases.

Example of key value table view cells

Filter Feedback Bar

New component! Filter buttons now have more style variations as well as the addition of modal sheets for when more complex filters are applied using the filter feedback bar.

Example of a filter feedback bar

Form Cells: Disabled States

Updated components! All form cells’ disabled states are checked and updated for consistency.

Examples of disabled form cells

Form Cells: Error Handling

Updated pattern! All form cells have an updated inline error handling approach. The new approach is more accessible and is now consistent with the existing Android approach.

Examples of new error handling approach

Inline Validation

Updated and new pattern! Inline success messages and warning messages are now available in addition to error messages. Hint text is also enhanced for multiline messages.

Example of multiline hint text (left) and success and warning messages (right)

Illustrated Message

New component! The illustrated message is a new type of feedback component that helps to inform users about various system states and suggests actions they can take to resolve an issue.

Example of an illustrated message

List Picker

Updated pattern! A new “typing” search pattern has been added to the half and full screen modal sheet views. You can now also choose to have a transparent background for section headers.

Example of a list picker

Skeleton Loading

New component! 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.

Example of skeleton loading

Stepper Form Cell

Updated component! Hint text for stepper form cells is now aligned to the form cell label for better consistency.

Example of a stepper form cell

Tab Bar

Updated component! When there is not enough space to display all tabs, the trailing tab becomes a “More” tab, displaying the remaining items in a list on a separate screen.

Example of a tab bar

Toast Message

Updated component! Toast messages now have a more distinct color difference for light and dark mode.

Example of a toast message

Toolbar

Updated component! When the toolbar variant with helper text is used, the buttons within the toolbar adjust their width to the label length instead of filling the container.

Example of a toolbar with helper text

SAP Fiori for iOS 10.0 UI Kit

Updated Figma UI Kit with new components and enhancements for this release, including:

New Updates page documenting release updates in UI Kit.
Go to SAP Fiori for iOS 10.0 UI Kit to learn more.

Updates in 9.2

This article provides an overview of the ongoing topics for SAP SDK for iOS version 9.2.

What’s New

Updates to Guideline Structure

Input & Selection

The “Form Cells” section has been renamed to “Input & Selection” to better reflect the usage of the controls. The individual component name inside the form cells section remains unchanged.

Input & Selection naming changes

Foundation

Accessibility

Updated guideline! The Accessibility guideline article has been updated to include more content on color contrast and increase contrast mode. Navigate to Accessibility to learn more.

Accessibility updates

Colors

Updated guideline! The Colors guideline article has been updated to a new structure with updated content. Navigate to Colors to learn more.

Colors updates

Rich Text Document

Updated guideline! The Rich Text Document guideline has been revised to reflect updated text styling for text heavy documents. See Rich Text Document to learn more.

Rich text document updates

UI Components & Patterns

Filter Feedback Bar

Updated component! For better accessibility, we have added the ability to toggle on or off the animation for selected filters and reduced the filter feedback bar height for an improved filter button interaction. Refer to Filter Feedback Bar for details.

Example of the filter feedback bar

List Picker Form Cell

Updated component! The list picker form cell now comes with a new flow with modal sheets and an optional anchor button. This new flow can be used to present non-immersive content or support simple tasks. Refer to List Picker Form Cell for more details.

Example of the list picker form cell

Rating Control Form Cell

New component! The rating control form cell indicates an average rating for an object in a form cell. It has now been added to the UI Kit and guidelines. Refer to Rating Control Form Cell for details.

Examples of rating control form cell

Step Progress Indicator

New component! A step progress indicator is a progress indicator for tracking and displaying a user’s state in a user flow. It allows the user to navigate to another step in both the default view and the optional “all steps” view. Refer to Step Progress Indicator for details.

Examples of step progress indicator default view (left) and “all steps” view (right)

Text Inputs

Updated component! Text inputs (text field form cell, key value form cell, note form cell) now have a new error state and an optional character counter enhancement. The new error state leverages the bounding box and hint text with color for a seamless experience that is consistent with Android. The character counter provides a familiar visual cue for users in instances where a character limit is required. Refer to Text Inputs for details.

Examples of text inputs

SAP Fiori for iOS 9.2 UI Kit

Updated Figma UI Kit with new components and enhancements for this release, including:

New Updates page documenting release updates in UI Kit.
Go to SAP Fiori for iOS 9.2 UI Kit to learn more.

Resources

This Figma Design Kit contains SAP Fiori for watchOS UI components, patterns, page types, and fundamental elements such as colors or typography. It helps accelerate design and development processes and encourages consistency across SAP applications.

Download the SF Compact font here.

Download SF Symbols here.

SAP Fiori for watchOS 1.0

Figma Design Kit

SAP Fiori for watchOS 1.0 (Link to Figma Library)

Information

For the SAP Fiori for Wear OS UI Kit, please visit SAP Fiori for Wear OS Resources.

Updates in 9.0

This article provides an overview of the ongoing topics for the SAP Business Technology Platform SDK for iOS version 9.0

What’s New

Foundations

Theming

Theming capability allows you to use a color palette to define a system-wide appearance. This visual experience can be leveraged to enhance readability in certain lighting environments and to express your unique product branding across platforms. Go to Theming to learn more.

Example of branding and theming

Chart Color Updates

The chart color palette is updated to match the Horizon color theme.

Example of chart colors

UI Components & Patterns

Navigation Bar

As an enhancement, an additional row can be shown e.g. search bar or linear progress indicator. Within deep navigation structures, a long-press on the back button opens a contextual menu with previously visited pages. Go to Navigation Bar to learn more.

Navigation Bar showing long press

Tab Bar

The updated tab bar offers variations covering 2-5 destinations with an optional notification badge. In the active state, we added filled icons to improve accessibility. Go to Tab Bar to learn more.

Tab Bar

Filter Form Cell

The updated Filter Form Cell adds a checkmark and rounded corners. Go to Filter Form Cell to learn more.

Filter Form Cell

Stepper Form Cell

As an enhancement, the Stepper Form Cell bolds text to align with buttons. Go to Stepper Form Cell to learn more.

Stepper Form Cell

Slider Form Cell

The updated Slider Form Cell adds a new input field that allows for the precise input of a certain value. Go to Slider Form Cell to learn more.

Example of Slider Form Cell

Segmented Control Form Cell

As an enhancement, the Segmented Control Form Cell adds a checkmark and rounded corners Go to Segmented Control Form Cell to learn more.

Example of Segmented Control Form Cell

Switch Form Cell

Enhancements include the addition of a disabled state. Colors, stroke, and shadow have also been updated. Go to Switch Form Cell to learn more.

Example of Switch Form Cell

Text Input Form Cell

Enhancements include additional Read-only variants (Key value, Title, Note), updated Title variant, and disabled colors. Go to Text Input Form Cell to learn more.

Example of Text Input Form Cell

Sort & Filter (Pattern)

The updated Sort & Filter pattern includes surfacing the number of search results in filter view, a more prominent reset button, and the addition of read-only variants. Go to Sort & Filter to learn more.

Sort & Filter Form Pattern

SAP Fiori for iOS 9.0 UI Kit

Updated Figma UI Kit with new components and enhancements for this release, including:

New Updates page documenting release updates in UI Kit.
Tutorial for Theming under Foundations section.
Go to SAP Fiori for iOS 9.0 UI Kit to learn more.

Updates in 8.0

This article provides an overview of the ongoing topics for the SAP Business Technology Platform SDK for iOS version 8.0

What’s New

New App Icon Style and a Complete Guide to the App Icon Creation

The app icon of SAP mobile apps communicate the purpose of SAP’s mobile experience and supports business users in recognizing the app in the App Store and on their home screens.

Our new app icon design direction complements the new SAP Horizon visual design and creates a recognizable mobile brand. The balance between individual icon metaphors, characteristic shapes and coherent visual design embraces the SAP mobile product family.

We have created a guide that describes exactly how the new style should look like and how to create a new icon.

Examples of app icons

Updates in Horizon Theme

We added two more colors to each color group. The colors offer more variety of shades, allowing flexible uses of colors in UI elements. We also updated Semantic, Fill, Accent, and Core colors to make the components better aligned with our Fiori Horizon theme. Go to Colors to learn more

Fiori Horizon core color palette

New Text Input Field

We are introducing an all-new text input field design. The design unifies form experience across platforms through Fiori design language. Go to Text Input Form Cell to learn more.

Text Input Form Cells in default, active, typing, and filled states

New Object Header

The new Object Header offers extra flexibility to fit more variety of use cases. With the introduction of the new layout, the component permits better use of space. Go to Object Header to learn more.

Object Header in an object page.

New Object Card and List Card Views

In addition to the Object Card View being updated with our refreshed button styles, we are introducing the new List Card View — a new card component that shows a preview of a set of items or objects in a vertical list format.

Object Card and List Card Views

Enhancements

Object Cell Enhancement

The new enhancements on Object Cell provide additional flexibility to fit more use cases. These include (but are not limited to) updates to the layouts, spacing, avatar & thumbnail sizing, and supporting informational elements. Go to Object Cell to learn more.

Stencil for SDK 8.0

We are release the new stencil for SAP BTP SDK for iOS 8.0. Go to Stencil to learn more

Updates in 6.1

This article provides an overview of the topics that have been added or changed, based on the SAP Business Technology Platform SDK for iOS version 6.1

What’s New

Introducing ARKit Integration

We introduce augmented reality experiences as part of our design language. The AR Annotation pattern allows users to explore, view, and interact with the information around them.

AR Scanner

Introducing AR Scanner pattern that allows users to initiate augmented reality experiences. Go to AR Scanner

AR Annotations

Introducing AR Annotations pattern that allows users to explore objects in a facility to enhance the user experience by leveraging augmented reality. Go to AR Annotations

Sidebar

Introducing iPad Sidebar that provides app-level navigation and quick access to end-users pinned contents. Go to Sidebar

In-line Signature Form Cell

Now Signature Capture has a new variant that seamlessly integrates into a form. This new form cell allows users to see the content of the form while signing. Go to In-line Signature Form Cell

Rich Text Document

Introducing a style guide for text-heavy documents, such as end-user licensing agreements (EULA), privacy policies, or terms and conditions. Go to Rich Text Document Guide

Widgets

Introducing Widgets that allow users to view key information in a glanceable format on user’s iPhones. Go to Widgets

Enhancements

Data Table Enhancement

Introducing 2-axis scrolling with sticky column and header. The data table component now supports selection mode and bulk actions.

Single-user Onboarding

Specifications for customizable onboarding screens are updated. The welcome, choose passcode, and enter passcode screens are customizable to show more identity of the app to the users.

Info View

Updates to the styling of existing Info View component, padding aligned with the What’s New component.

Resources

Design Stencil in Figma (Beta)

Introducing an all-new design stencil in Figma

Updates in 7.0

This article provides an overview of the ongoing topics for the SAP Business Technology Platform SDK for iOS version 7.0

What’s New

SAP Fiori with Horizon Theme

We are introducing a new Visual Design direction for our Fiori for iOS design language. In the first step, we offer changes to Navigation Bar, Header, Button, Colors, and many more.

Fiori Horizon core color palette

Order Picker Form Cell

This new type of Form Cells enables our customers to the advanced sorting functionality. Now multiple sort criteria and order direction can be set. Go to Order Picker Form Cell to learn more.

Order picker form cell on iPhone (left) and iPad popover (right)

Enhancements

Timeline Design Updates

Now Timeline component has a Now Indicator to help our customers locate the tasks and events easily. Together with a minor adjustment to separate past and future events.

Anatomy of Timeline

Hierarchy View Picker

Add picker mode to hierarchy views. Go to Hierarchy View to learn more.

Example of a hierarchy view in a picker mode

Stencil for SDK 7.0

We are release the new stencil for SAP BTP SDK for iOS 7.0. Go to Stencil to learn more

Updates in 6.0

This article provides an overview of the topics that have been added or changed, based on the SAP Cloud Platform SDK for iOS version 6.0, and also previews of what’s coming in the next releases.

Foundation

Improved Adaptivity

Adaptive Design has been updated to provide more detailed guidance on adaptability and general behaviors of components when they are present in different layouts. View Adaptive Design

New Color System

The new dark theme, derived from “Quartz Dark”, has been added to our design system. We improved overall color mapping and added a new layer of color parameters to enhance comprehension of color usage. View the new color system

Iconography

Guidelines for creating App icons has been added. View the App Icon guidelines

SAP Fiori for iOS App Icons

Taxonomy

“Floorplans” to “Page Types”

We call our Floorplans Page Types from now on.

“Controls” and “Views” are “UI Components”

Controls and Views are fundamental UI Elements in our design system. We restructured all components and classification hierarchy for a better understanding of our design language.

UI Components & Patterns

Data Table in Compact Width

Data Table generally transforms into an Object Cell in the compact width layout. Now, Data Table can be set to stay as a full grid table view in the compact width layout with a horizontal scroll. View Data Table

Logon Screen with Custom Logo

Logon Screen now can have an app’s own logo.

Multi-User Onboarding

A lot of times, a device is shared among multiple users. When that happens, switching users and re-authentication can be cumbersome. As a result, we introduced a new login screen to improve multiple-users onboarding scenarios. Read more on Multi-User Onboarding

New Chart Types

Stock Chart and Donut Chart are added. View Chart Types

Upcoming updates

Widget Pattern

Based on iOS 14, we will introduce a new Widget pattern. The pattern will include a guideline explaining how to create Widgets with our components and best practices.

All New iPadOS Page Types

We are introducing the iPadOS new navigation paradigm to every page type utilizing the new iPadOS sidebars.

Inline Signature Capture

We offer the alternative for the traditional overlay Signature Capture component. To improve security for signing, we are introducing the new in-context signature capture form cell.

Editable Data Table Cells

We are exploring design for better interactions in the Data Table Component, allowing direct manipulation inside the Data Table view. Now, the users will be able to edit the cell without transitioning to different pages.

Design Updates for Controls

We are updating the design of some Controls to enhance the natural comprehension of interactions.

New Inset Table View and Columns

We are introducing new visual treatment for Table View, allowing multiple columns in the process.

Resources

TBD

Updates in 5.1

This article provides an overview of the topics that have been added or changed based on the controls available in SAP Cloud Platform SDK for iOS version 5.1.

UI Components & Patterns

Signature Form Capture

New component! – Signature Form Capture allows users to authorize workflows by signing within the signature form capture cell.

What’s New Component

New component! – What’s New is for displaying highlights of feature updates, news, or happening about your application.

Resources

SAP Fiori for iOS Stencils

We have updated the stencils with new components, patterns, and enhancements for this release. Colors and typography have also been updated to be easier to consume.

Updates in 5.0

This article provides an overview of the topics that have been added or changed based on the controls available in SAP Cloud Platform SDK for iOS version 4.0 SP0.

General Concepts

Iconography

We have replaced our existing set of limited, vector-based icons with Apple’s SF Symbol icon font.

Learn more about SF Symbols in the Apple Human Interface Guidelines

Resources

SAP Fiori for iOS Stencils

We have updated the stencils with SF Symbol based icons. In addition, we aligned the UI Component and Pattern structure with the Fiori for iOS Design Guidelines and broke the pattern symbols into individual UI Component symbols.

Update in Version 4.0 SP0

This article provides an overview of the topics that have been added or changed based on the controls available in SAP Cloud Platform SDK for iOS version 4.0 SP0.

General Concepts

Colors

Our color palette and color styles have been refreshed to align with Fiori 3 colors. We also now support colors for Dark Mode in iOS 13. In support of iOS 13.0, we have introduced new color palettes, color styles, and text styles for when users choose to adopt the Dark Mode system interface.

Structure

We have updated the structure of our design system to UI Components and Patterns. Designs that previously lived in the Floorplans section have now been merged into its respective section.

UI Components

Rating Control

A new component for users to indicate an average rating for an object.

Object Card

Similar to the object cell, the object card gives a preview of an object and is highly customizable for a wide variety of use cases.

Hierarchy View

A new component to display the hierarchical structure of a single object type.

Patterns

Sibling Navigation

For apps with hierarchical navigation, sibling navigation help users easily navigate in the sequence of child objects.

Resources

SAP Fiori for iOS Stencils

We have updated the stencils with new components and enhancements for this release, including rating control, object card, and hierarchy view. In addition, colors and typography for Fiori 3 and Dark Mode have been included.

Update in Version 3.0 SP01

This article provides an overview of the topics that have been added or changed based on the controls available in SAP Cloud Platform SDK for iOS version 3.0 SP01.

General Concepts

Accessibility

A lot of our controls including slider, list picker, object cell and more now supports accessibility text sizes. We wrote some tips on what to keep in mind when designing a custom component.

Modals

This article has been updated to provide you with examples of different tasks and actions displayed in modals.

Controls

Text Input

The text field with label control now supports unit labels, phone number format and icons to trigger alternative ways of input.

New Articles

We added articles about the slider, list picker and filter form cell. The components have not been updated.

Views

Chart Types

New Chart Types: Area Chart, Bubble Chart & Scatter Chart

Area charts highlight changes on volume of data over time with color filling in the space between the lines and the axis.
Scatter charts allow you to show the correlation and relationship between two variables, x and y, and show how much one variable is affected by another. They are used to show trends. Bubble charts are similar to scatter charts in that they show the correlation between data but they add a third dimension which is visualized by the size of the circle.

Patterns

OCR Scan

The OCR Scan component is now available for you to integrate in your create forms.

Resources

SAP Fiori for iOS Stencils

We have updated the stencils with new components and enhancements for this release, including area chart, bubble & scatter chart, text field with label, and OCR scan.

Update in Version 2.0

This article provides an overview of the topics that have been added or changed. The content is based on the controls available in SAP Cloud Platform SDK for iOS version 2.0.

Visual Design

Iconography

Updated Images – Iconography has been updated with cohesive and proper images for intro, launch icons, system icons, and app icons.

Sections Added – The following sections have been added: Design language, SAP Fiori for iOS icons, KPI icons, doctype icons, map icons, indicators, icon requests, and resources.

Icon Library Added – The SAP Fiori for iOS icon library can now be downloaded in the resources section.

Floorplans

Map

New article! The Map floorplan is used to display business objects in the context of a geo map. It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative location-based data.

Views

Header

KPI Header is now available in the SDK. Includes KPIs and chart KPIs in the header to allow users to easily keep track of important information during the day.

Profile Header is now available in the SDK. Users will be able to contact a person directly or perform an action from the header.

KPIs

The Chart KPI has been added as a new type. It shows a visual representation of progress of an object, and is available in Small and Large sizes.

Timeline Preview

The timeline preview is now available. It allows the user to get a glimpse of what is coming up on their timeline.

Controls

Attachment

New article! Attachment is a control found at the end of a create screen that allows users to upload files or images stored locally on their devices.

Patterns & Frameworks

Filter Feedback

Filter feedback is a horizontal bar that appears above a list of content and provides interactive buttons to communicate to the user which filters have been applied to the list. It also allows users to quickly select between frequently-used filters.

Offline

New offline banners with actions are now available. The sync banner allows the user to ‘Cancel Sync’.

Onboarding

Onboarding now supports more services to initiate the onboarding process. The launch screen has variations to support MDM/hardcoded configurations, QR code scanning, Discovery service, and Activation links.

For Authentication, the recommended flow is now Touch ID with Device passcode as fallback. If needed, app passcode can still be used as fallback to Touch ID.

Screens have been updated to reflect the new SAP Fiori for iOS tint colors.

Scan

Updated the animations.

Update in Version 2.0 SP01

This article provides an overview of the topics that have been added or changed. The content is based on the controls available in SAP Cloud Platform SDK for iOS version 2.0 SP01.

Visual Design

Colors

Chart colors have been updated. We now have 12 chart colors!

Floorplans

Chart

New article! The chart floorplan displays data using a full-width chart and allows users to select chart items to see specific values, drill in to explore more details, and adjust a variety of chart criteria using filter options.

Views

Data Table

New Article! 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.

Object Cell

We have updated the content of the article to include the possible interactions and behaviors of an object cell.

Charts

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. The chart content table view cell is read-only, and is placed within the content area of another floorplan.

Chart Card

The chart card displays a thumbnail view of a chart, with key information shown.

Chart Header

The Chart Header displays simple chart data inside an object header.

Chart Types

SAP Fiori for iOS supports four chart types: horizontal bar, column, line, and combination (column + line) charts. This article discusses when to use each type of chart to best meet your users’ needs.

Controls

Pickers

We have updated the content for this article.

Patterns & Frameworks

Time & Date Formats

New Article! There are many different time and date format conventions, with no “right” approach for all situations. Conventions also vary widely around the world. This article shares some general tips on how to present time and date information to users in your SAP Fiori for iOS apps.

Resources

SAP Fiori for iOS Stencils

We have updated the stencils with new components and enhancements for this release, including the map floorplan, chart floorplan, chart views and other minor fixes.