Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Latest Release: SAP Fiori for Android & iOS – Enrich your mobile experiences with cards, accessibility improvements and more

EmilVoutta
Advisor
Advisor
‎10-10-2022 11:52 PM


Showcase of selected components, app icons and SAP apps



The latest release of SAP BTP SDK for Android 5.0 & iOS 8.0 marks an important next step in improving SAP’s mobile experience. To support our enterprise users best, we keep building on the strength of Apple iOS and Google Android to support our enterprise users with scalable mobile experiences. To cover diverse industries and domains and to enable the SAP community, we keep providing our mobile design and technology building blocks directly to our partners and customers.


This blog about our recent releases covers the following components and enhancements:

  • New card types to feature relevant content as the entry point to detail pages with more comprehensive data and actions

  • Redesign of frequently used core components with new interactions, behaviors, accessibility by design, and features to serve even more business use cases

  • More enhancements to our mobile design system documentation, resources, and software development kits



Benefits of the SAP mobile design system and software development kits


High quality re-useable components and patterns are a key ingredient to build scalable mobile applications with a low total cost-of-ownership. By leveraging our mobile design system and SDKs, application teams can skip spending time and money on building foundational controls and can better focus on business values and end user needs. To allow for a flexible usage in various business contexts, SAP Fiori mobile components are themeable, extendable, and adaptive. This results in a secure, robust, and performant set of components that meets enterprise requirements.

 

New in SAP Fiori for Android 5.0 & SAP Fiori for iOS 8.0


The latest additions to our mobile design system and software development kits are providing you with further improvements and new components, ready for your mobile app projects.

Object card and list card


We are introducing the first set of card components available for SAP Fiori for Android and SAP Fiori for iOS: The object card and list card.

The object card is a flexible container with critical information regarding a single object. It previews the object and serves as the entry point to the full object detail page. In addition, it is highly customizable to accommodate various content types and use cases. In SAP Fiori for iOS, the “object card view” is the newer version of the existing object card and for now, we have decided to keep both object card versions in parallel to avoid disruption when updating existing apps to use the latest SDK release.

The list card displays a set of items or objects in a vertical list format.
It serves as an entry point to the full list page or an individual item’s details page. It’s highly customizable, supporting title, subtitle, footnote, image, icon, and inline actions. For optimal usability, it holds up to five list items in the set.


Object and list cards from Fiori for iOS



Object cell


Object cells are a powerful tool to list compact information of numerous objects on one screen. As this is a very common business workflow requirement, we have brought additional business content related features to the essential out-of-the-box components of Apple iOS and Google Android.
The object cell is made up of text, images, or icons that fit inside a container. They can be configured in many ways to accommodate a wide variety of uses. We’ve added flexibility depending on which content is shown. It supports additional content types like tags, avatar row, badging on icon and avatar, and description.


Object cell from Fiori for iOS and Fiori for Android



Object header


Business objects can become comprehensive and important data points might not stand out by default. Addressing this common need, we have designed the object header, prioritizing key information into a glanceable view.
The object header provides an area that contains information such as object title, subtitle, and description, among other supplementary information.

As for the object cell, we’ve added flexibility depending on which content is shown. Furthermore, we support additional content types like tags, different layout options, and label items that can have an image (thumbnail, profile, or icon) next to a text label.

The large, bold title emphasizes the object's importance on the page. We’ve added the KPI view on the top of the header.


Object Header from Fiori for iOS and Fiori for Android



Buttons


Buttons allow users to trigger an action or make a choice with a single tap. They come in three variations: contained button (primary), tonal button (secondary), and text button (tertiary). We’ve added the tonal button as a new button variation to represent actions that are significant in a user’s workflow but have a lower priority. Accessibility improvements have been made to support assistive devices.

On Android, we offer the FAB button as a new button type additionally to highlight main actions on the screen.

On iOS, we offer the negative state button style to indicate destructive actions and warn users to take precautions when interacting with the buttons. Single icon buttons can be used instead of text buttons.


Button variations for light and dark mode



Text input


With the new version of the text input control, we have carefully balanced a coherent cross-platform experience while adhering to iOS and Android standards, ensuring familiarity.
Text input controls are used to request text entries from users. They are found in creating and editing patterns as part of completing the task. With the new text input layout and visual design, we increase usability and accessibility.

Iconography indicates the user errored fields or helps the user to perform actions like clearing fields, and toggle visibility for passwords. To indicate that a text field is required, an asterisk can be included next to the label.


States of Text Input component



Onboarding


Onboarding users to new mobile applications is an essential part of the overall user experience and an important pre-requisite to achieve active usage and adoption. The onboarding flow covers various requirements: consent to legal agreements, system connectivity, authentication, user preferences, and consent to operating system features and data.
To allow a quick and easy onboarding, we aligned the UI texts between Android and iOS. The new text input component has been added and passcode creation screens have been optimized.

On iOS, consent forms and authentication screens can be opened in modals sheets for fast access.


Onboarding pattern from Fiori for iOS and Fiori for Android


 

Additional accessibility updates for SAP Fiori for Android 5.0


The mobile operating systems offer a great set of features to create inclusive mobile experiences and we are ensuring that SAP applications are making best use of it. Therefore, we are constantly testing and improving the accessibility features of new, renewed, and existing mobile components and patterns:

  • Chips: Chips are interactive elements that provide users with a set of options to select out of. Chips can be used for single and multiple selection. We’ve added checkmarks to both single and multiple selection chips as well as by differentiating the shape of unselected and selected chips.

  • Slider: A slider is a control that enables the user to adjust single values within a specified numerical range. We’ve updated the interactions for editing values, added validation messages, and improved the touch target area.

  • Switch: The switch control mimics a physical switch that allows users to turn individual settings “on” or “off”. We’ve improved the color contrast and added a validation message.


 

Try out the latest UI components


Are you already aware of potential mobile app scenarios in your business? Are you wondering what the new UI components look like in your existing mobile app?
Get started and use the SAP Fiori Design Guidelines and Figma Stencils to start designing along your end-user needs. With the latest SAP BTP SDK releases, you bring your design to code immediately.

SAP Fiori Design Guidelines and Figma Stencils


Check out the latest release on our SAP Fiori Design Guidelines for SAP Fiori for Android and SAP Fiori for iOS.

Download the latest SAP BTP SDK releases
Get ready to use the UI components right away and download SAP BTP SDK for Android 5.0 and iOS 8.0.

Download the SAP BTP SDK for iOS
Download the SAP BTP SDK for Android

We are looking forward to hearing what content you are interested in. Keep us posted in the comments on what you think about our design system and the latest features. Make sure you give me a +Follow on SAP Community and see you next time.

Additional information


Learn more about the new approach to the SAP mobile user experience in my earlier blogs:

Discover all new updates for SAP BTP SDK for iOS and Android:
Labels:
1 Comment
Labels in this area
Popular Blog Posts