Fiori Mobile Experience

Introduction

SAP Fiori elements has become the gold standard for developers looking to build standard SAP Fiori apps quickly and easily. SAP Fiori apps are, by default, responsive and can run on all three major device types. Since most business transactions in SAP systems are executed via desktop, we concentrated on optimizing our framework for large screen sizes. Now, many organizations are shifting to a mobile-first development, where they specify a minimal feature set for mobile use and then add capabilities for larger screen sizes. So, we have enhanced the functionality of SAP Fiori elements to make it easier for you to build apps that work great on phones and tablets, as well as desktop systems. 

Device agnostic mobile apps with SAP Fiori elements

You have heard that SAP Fiori apps are device agnostic and can run on all three major device types: desktop, tablet, and smartphone. True to this statement SAP Fiori apps are designed to seamlessly work between device types

The advantage of this responsiveness is that when users switch across devices, our apps automatically accommodate the resolution, image size, and scripting. This way, our users can work how and where they want, regardless of device. Additionally, developers can adjust the size of the controls to match the type of interaction (such as touch device or keyboard/mouse) without requiring additional coding and maintenance efforts. 

General Settings

Decide if your application is destined to be used on mobile phones. For this app functionality and/or information should be offered unaltered on different device types. To do this include the below Manifest settings to configure the app to run seamlessly on Mobile Phones. 

• If (due to the use case, the available screen real estate, or the device capabilities), the app should be adjusted manually according to device-specific requirements. Make sure the setting  phone:true is set under deviceType as shown below .  

         "sap.ui": { 
            "_version": "1.2.0", 
            "technology": "UI5", 
            "deviceTypes": { 
            "desktop": true, 
            "tablet": true, 
            "phone": true 
          }, 
 } 

• Additionally, also set Cozy Mode to true;                                  

             "contentDensities": { 

                  "compact": true,         

                  "cozy": true        } 

 

Recommendations for SAP Fiori elements Floorplans  

Before we begin it is advised to Think “mobile first” i.e. to Starting your application development with mobile first design approach helps one to stay focused. Begin with the core functionality and progressively enhance features when moving to larger devices. 

Let us further look at some of the recommendations to improve the user experience along with some examples wherever applicable. 

Tip 1: Set UI.Importance as high for the most Important fields alone as this will help eliminate additional space as seen in below example. 

UI importance is set to most fields here above		When UI.Importance is set to only required fields

Tip 2: Use Dynamic header for Object Page as mobile specific feature won’t work for standard header.

Standard header		Dynamic header

Additionally, any new SAP Fiori elements application created using Web IDE or BAS comes with dynamic header by default.  Older applications can switch to dynamic header by adding the below manifest setting as below.  

          "sap.ui.generic.app": { 

               "_version": "1.3.0", 
               "settings": {      
               "objectPageDynamicHeaderTitleWithVM": true       

               }, 

Below are some of additional generic recommendations which will help the applications to perform best at mobile landscape.   

• Use responsive controls to support Mobile; example: Use responsive table instead of Grid, analytical table or tree table. In case of sap.ui.table types, please ensure that the extensions are available for responsive table type as well. 
• It is recommended not to use  sap.ui.commons libraries in the application. 
• Test your custom actions with dialogs and custom implementations in Mobile phones 

• Test your applications on the real devices whenever possible, if using simulators delete application cache each time to ensure correct behaviour 

Behaviour Specifics for each of the floorplan 

Let us look at some of the prominent improved Mobile only experience in each of the SAP Fiori elements floorplans. 

 List Report /Object Page   

• Expand table to full screen option appears automatically in the table toolbar: This allows user to use entire available screen for display of data in the table  

Smart Filter Bar collapses automatically on click of Go button – By doing this user will not only be aware of what is happening in the table area but will avoid the need to scroll down on each search to see the results 

• Sap.ui.table types automatically switches to responsive type in mobile phones:  
• OP (Object Page) header shows summary line in header area instead of a collapsed header: While object page header in collapsed mode takes lesser space in desktops but on mobile phone replacing it with even shorter summary line further enhances the experience as show screenshot.

 Analytical List Page  

1. Visual filters are shown vertically : Visual filters provide important information in Analytical format and by placing it vertically user can see multiple charts together helping them in better interactions.

Overview Page 

1. OVP (Overview Page) cards are positioned in vertical manner : This ensures user can see one full card at a time and then navigate to corresponding application to get the details 

Due to the use case, the available screen real estate, or the device capabilities in the Mobile device, you may have to switch off some of the functionality on mobile device and also some of the features are excluded in the mobile  

• Hide editing functionality and focus on display 
• Hide functions from toolbar 

• Hide alternative columns and views in tables 
• External navigation is possible only for mobile compatible applications 
• Some of the select dialogs size are optimized for mobile usage and they take full screen to show information better. Ex: Value Help dialog, Quick View, Tab Selection in icon tab bar mode etc <screen shot- Mobile 3 ppt)  
• Flexible Column Layout is supported only in Tablet and large screens. Mobile phone shows full screen layout 
• In Analytical List Page, hybrid mode and KPI cards are disabled on mobile phones 

References

Do take a look at these reference topics where you will find more information related to the mobile, responsive design and controls.

• https://sapui5.hana.ondemand.com/#/topic/0096cd2e7abb4c3fb11cf4dedc9fa740
• https://experience.sap.com/fiori-design-web/responsiveness-adaptiveness/

And continue your learning journey at

• https://www.youtube.com/c/SAPUXEngineering

.  

Conclusion 

Hope this blog post has helped you to visualise and experience your SAP Fiori elements application on Mobile with its improvised and enhanced support to automatically adapt themselves to the capabilities of each device and make the most of the available real estate without having to write lines of code or change any of the existing UI controls.  We also learned about things to be taken care while developing an application for a mobile use case. 

Thanks for reading this blog post. Kindly provide your valuable feedback in comments section additionally follow the relevant Tags for FAQ’s or any questions that you may have for relevant topics.  

Special Thanks to  Suneet Agarwal  and Rohith Deraje for all the valuable content and Peter Spielvogel and Stefanie Hager for your review.