Discover SAP’s Mobile Design and Technology with the Updated SAP Fiori Mentor App

If you are developing or designing mobile apps with SAP’s Fiori design system and on SAP’s Business Technology Platform (SAP BTP) mobile technology, the SAP Fiori Mentor App is for you.

A visual representation of the different SAP Fiori Mentor app user interfaces featured within a variety of different smartphone and tablet devices. In the middle of the visuals is a large, blue icon representing the SAP Fiori Mentor app.

Image 1: SAP Fiori Mentor App for Android and iOS is available on Google Play Store and App Store

With the latest update, the SAP Fiori Mentor app joins the ranks of the comprehensive resources for SAP’s Mobile Design System and the respective technology platforms SAP BTP Software Development Kit (SDK) for Android and iOS.

The app now features the new SAP Horizon Light visual design theme and provides you with information on new UI components, enhancements, and UI patterns covering the feature set of the SAP BTP SDK for Android 4.0 and iOS 7.0 releases.

The SAP Fiori Mentor app is an interactive playground for mobile designers and developers to explore the flexibility of mobile components and patterns that are available through the SAP BTP SDKs for Android and iOS. Building on Google’s Material Design and Apple’s Human Interface Guidelines, the out-of-the-box UI components extend the mobile design systems with components designed for enterprise use cases and a variety of industry applications. These include the visual update of core OS components, feature enhancements, and the creation of completely new components.

Explore the flexibility of components

By adjusting component settings within the app, the behavior, interaction, and features of components can be previewed live. This not only speeds up the communication between design and development, but also allows you to identify the right component for your requirements and user needs. It also allows you to adapt standard components to best support your specific scenarios.

A user interface showing one of the UI components. On the screen, you can see the title Object Header and different Settings options for the example object “Inspect Electric Pump Motor”, with the option to choose from Regular or Compact. The user interface uses the new SAP Horizon Light visual design theme

Image 2: Live preview of a component with a variety of settings

Phone or tablet?

With the option to switch between phone and tablet mode, the UI components simulate the behavior for different amounts of screen real estate and orientations, allowing you to better predict the user experience across devices.

Two user interfaces from the SAP Fiori Mentor app shown on a vertical smartphone screen (on the left) and a horizontal tablet screen (on the right) using the new SAP Horizon Light visual design theme. The smartphone view and tablet view vary according to the amount of real estate and orientation.

Image 3: The SAP Fiori Mentor app can be easily previewed on different devices and with different orientations

Preview and export code

For developers, the code samples with the predefined settings can be exported into your preferred development tool. Designers can easily understand the scope of functionality for a specific component and specify their designs with applicable parameters, and hand over the respective code snippets to their development partners.

A user interface showing a preview of a UI component code and a UI preview on the phone.

Image 4: You can easily preview and export the code for any UI component

Get inspired by a variety of UI components

The SAP Fiori Mentor app features a wide variety of UI components (42 for Android and 82 for iOS!), which are also complemented with fundamental backend components. These directly link you to the comprehensive design and developer documentation including further information on their usage and technical capabilities.

A visual representation of the collection of UI components for SAP Fiori for Android is shown diagonally against a white background

Image 5: The SAP Fiori Mentor app features a wide variety of UI components

Learn from best practices for component usage

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 directly deep dive into their additional features.

Two superimposed user interfaces on desktop devices showing examples of a design for an application.

Image 6: Examples of app designs for SAP Fiori for iOS

Start exploring today!

Download the SAP Fiori Mentor app now for Android & iOS

• iOS: Download the app for your iPad in the Apple App Store.

• Android: Download the app for your Android devices on the Google Play Store.

Latest updates on the SAP Fiori Design Guidelines & Figma Stencils

The SAP Fiori Mentor app and additional enablement resources support you in designing and building applications with SAP Fiori for Android and iOS.

Check out the latest updates for SAP Fiori for Android and SAP Fiori for iOS, which include a new app icon style for SAP apps, new colors added to the Horizon visual theme, two new card UI components, and various updated core components including Text Input, Object Header, and more.

Are you ready to code?

Explore the SAP’s Software Development Kits

• iOS: Download the SAP BTP SDK for iOS

• Android: Download the SAP BTP SDK for Android

Additional information

To follow along with this topic, make sure you give me a +Follow on SAP Community. If you have comments or questions, please share them below and we are happy to answer you. In the meantime, keep designing and coding!

Learn more about our new approach to the SAP mobile user experience:

• Blog post: SAP Fiori for Android & iOS: An all-new user experience for enterprise-ready mobile applications

• Blog post: How SAP Mobile Leverages SAP’s New Horizon Design