SAP Mobile Design System and Apps
SAP Fiori for Wear OS and SAP Fiori for WatchOS
SAP Fiori for Wear OS
SAP Fiori for WatchOS
Get started with SAP Fiori for Wear OS | Get started with SAP Fiori for watchOS
New in SAP Fiori for Android 7.0
Our latest design system and Android SDK release has brought significant enhancements to a number of UI components that further enhance the mobile user experience.
Buttons
Button styles: tint (A), neutral (B), and negative buttons (C)
Buttons come in different variations (contained, tonal, and text) and styles that add another layer of complexity to the UI. The new negative button style that we have added to the latest release of SAP Fiori for Android indicates destructive actions and warns users to take extra precautions when interacting with the buttons.
For more information, check out the Buttons article in the SAP Fiori for Android Design Guidelines.
List Picker Form Cell
List picker half-screen view (left) and full-screen view (right)
The list picker form cell, which allows users to select one or more options among specific values within a defined category, has been updated to replace the drill-down transition on mobile with a modal bottom sheet to provide more context for users. For both mobile and tablet, we have added a “Select All” feature to the “All Value” list for multi-select. We have also introduced a new floating anchor button that takes the user back to the top of the list. To exit the list view, the user can tap on “X” to discard changes or select the “Apply” button to save the selection.
Find out more about these new functionalities in the List Picker Form Cell guideline article.
Persistent Footer
Persistent footer on mobile (left) and tablet (right)
A persistent footer is a section at the bottom edge of the screen that displays a description, label, or buttons. It is used for closing or finalizing actions that impact the current view. To reflect the latest SDK update, the footer article has been changed to persistent footer.
See Persistent Footer to learn more about this component.
Circular Progress Indicator
Circular progress indicator with one-line success message (left) and two-line success message (right)
The circular progress indicator, a variation of the progress indicator component that keeps users informed about the status of ongoing processes, has been updated to the latest SAP Fiori for Android visual style, which includes error and success states for failed and successfully completed actions.
Refer to Progress Indicators for more details.
Timeline View
Timeline on mobile (left) and tablet (right)
The timeline view component, which displays a list of items in chronological order, now comes with an updated visual design that is consistent with the timeline view component for iOS. We have introduced new node shapes and indications to enhance timeline cell functionalities.
Check out the Timeline View article to learn more about these changes.
Timeline Preview
Timeline preview on mobile (left) and tablet (right)
Along with the timeline view component, we have updated the timeline preview by introducing new node shapes to reflect the new design of the timeline view component, and we have also enhanced the flexibility of text labels.
See Timeline Preview for more details.
New in SAP Fiori for iOS 9.2
Our mobile design system and software development kit for iOS have received significant upgrades, incorporating a range of enhanced UI components alongside new additions. These advancements are aimed at providing an unparalleled mobile user experience.
Rating Control Form Cell
Rating control form cell in compact width (left) and regular width (right)
The rating control form cell, which indicates an average rating for an object in a form cell, has been added to our UI Kit.
For more information, check out the Rating Control Form Cell article in the SAP Fiori for iOS guidelines.
Step Progress Indicator
Step progress indicator in compact width (left) and regular width (right)
The step progress indicator is a new UI component that has been added to our SDK for iOS. It is an indicator for tracking and displaying a user’s state in a user flow and allows them to navigate to another step in both the default view and the optional “All Steps” view.
See Step Progress Indicator to learn more about this component.
Filter Feedback Bar
Applying fast filters in filter feedback bar
The filter feedback bar is a horizontal bar that appears above a list of content. For better accessibility, we have added the option to toggle the animation for selected filters on or off and reduced the height of the filter feedback bar to improve interaction with filter buttons.
Refer to Filter Feedback Bar for more details.
List Picker Form Cell
List picker on compact (left) and regular (right)
Just like the list picker form cell for Android, the iOS version 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.
Check out the List Picker Form Cell guideline article.
Text Inputs
Compact width text input on iPhone (left) and regular width on iPad (right)
Text inputs such as text field form cells, key value form cells, and note form cells 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.
See Text Inputs for more information.
SAP Concur Mobile App
SAP Concur mobile app screens
As mentioned earlier, we heavily rely on the feedback of app teams. That’s why the SAP Concur team and SAP Fiori Mobile Design System team joined forces to reimagine the user experience of the SAP Concur mobile app that has multiple millions of active users worldwide. By using the SAP BTP SDK that comes with built-in accessibility features, the app was completely updated, for example with a new dynamic home screen that offers users a quick glance at contextual information, allowing them to easily manage their travel expenses. The SDK also provides theming options, including a dark theme, giving users the freedom to personalize the visual experience of their app.
Download the SAP Concur mobile app from the App Store or Google Play Store.
Mobile Design Guidelines
SAP Fiori Mobile Design Guidelines for Android and iOS
A detailed documentation on component anatomy, behavior, and interactions allows you to use components that match your use case. Crosslinks to Google’s Material Design Guidelines for Android and Apple’s Human Interface Guidelines for iOS, as well as links to development documentation, help you navigate to these resources. Additionally, you can find a feedback function on each guideline article that allows you to provide feedback.
SAP Fiori for Android Design Guidelines | SAP Fiori for iOS Design Guidelines
Figma UI Design Kits
Figma UI Design Kit
With the updated SAP Fiori for Android and iOS Figma UI design kits, it’s now easier than ever to use the latest components and patterns in your mobile design. By using the design kits, you can quickly create a consistent user experience that enables app implementations at scale.
SAP Fiori for Android 7.0 UI Design Kits | SAP Fiori for iOS 9.2 UI Design Kits
SAP Fiori Mentor App
SAP Fiori Mentor App for Android and iOS
The SAP Fiori Mentor app is an interactive playground that allows you to explore the flexibility of mobile components and patterns available through the SAP BTP SDKs for Android and iOS. By adjusting component settings within the app, the behavior, interaction, and features of components can be previewed live. If you’re a developer, you can export code samples with predefined settings into your preferred development tool. If you’re a designer, you can easily understand the scope of functionality for a specific component and specify your designs with applicable parameters, and hand over the respective code snippets to your development partners. To provide some tangible examples of the actual UI component usage in apps, the best practices section provides a selection of app design examples. By highlighting specific areas, each app design indicates which UI components are used, so you can deep dive into their additional features.
Apple App Store | Google Play Store
Software Development Kits
SAP BTP SDKs for Android and iOS
The SAP BTP SDK for iOS and SAP BTP SDK for Android include the SAP Fiori framework that contains user interface components. These frameworks are standalone and do not have a dependency on other parts of the SDK. These libraries make it easier to create applications that conform to the SAP Fiori design language. On iOS, the SAP BTP SDK offers “SAP Fiori framework“ and the “Fiori” controls extend Apple’s UIKit/SwiftUI. These controls can be used programmatically or through storyboard files. On Android, the SAP BTP SDK UI components are contained in the “Fiori” library and extend Material Design controls.
SAP BTP SDK for iOS | SAP BTP SDK for Android
Experience matters. Follow our journey as we transform the way we build products for enterprise on www.sap.com/design.
- SAP Managed Tags:
