How to Transition from HTML5 to SAP Fiori UI
10 min read
This article provides an overview of the SAP Fiori strategy and contains technical tips on how to move from HTML5 to SAP Fiori UI seamlessly. The focus of the technical recommendation is on the ticket business object.
Table of Contents
Introduction to SAP Fiori Strategy
SAP has a made a strategic decision to adopt one User Experience (UX) technology across all of it’s solutions. In 2015, SAP announced that SAP Fiori represents its strategic direction for User Experience (UX) across the business suite. SAP Service Cloud's new Responsive User Interface (RUI) technology is aligned with the SAP Fiori strategy, and brings with it the ability to easily adapt to the myriad of available device forms and screen sizes.
The SAP Fiori user experience philosophy is based on five principles:
- SAP Fiori is designed for your business, your needs, and how you work. It draws from our broad insights on the multifaceted roles of today’s workforce. SAP Fiori provides the right information at the right time and reflects the way you actually work.ROLE-BASED
- Apart from making you work smarter, SAP Fiori also enriches your work experience by allowing you to simply do your job.DELIGHTFUL
- Whether you fulfill a sales order, review your latest KPIs, or manage leave requests, SAP Fiori adheres to a consistent interaction and visual design language. Across the enterprise, you enjoy the same intuitive and consistent experience.COHERENT
- With SAP Fiori, you can complete your job intuitively and quickly. SAP Fiori helps you focus on what is important, essential functions are easy to use, and you can personalize the experience to focus on your relevant tasks and activities.SIMPLE
- SAP Fiori enables you to work how and where you want, regardless of the device you use. Additionally, it provides relevant information that allows for instant insight.ADAPTIVE
SAP Fiori UI Adoption Timeline
As announced with the 1808 release, the HTML5 user interface (UI) will be sunset with the 1911 release for all users.
The 1908 release (August 2019 release) is the last productive release
for HTML5 UI. This UI will stop working after the 1911 production upgrade (November 2019) due to
technical limitations and its use cannot be extended beyond November 2019.
- All users, key users and business users will only have access to the SAP Fiori client UI as of the 1911 release upgrade.
- All business user functionality (feature parity with HTML5 UI) is now available in the SAP Fiori client as of the 1902 release.
- All key user functionality is planned to be available in SAP Fiori client by the 1911 release.
Are you asking yourself how you can prepare for the transition and which specific actions you should perform? In this section, you can find the answer to your questions.
With the 1908 release (August 2019), the default client for all users is SAP Fiori. Key users can still change the company setting back to HTML5, if required. Key users can access the company settings and change the client as indicated in the screenshot below.
It is also possible to access the SAP Fiori Client using the parameter client_type=newhtml in your system's URL. See example below where XXXXXX is your tenant ID.
If you have performed configuration activities using the Key User tool or you have extended your solution using SAP Cloud Applications Studio, the next two sections should interest you. Below, you can find the list of actions required for activating your extensions in SAP Fiori UI.
Please note that the instructions in the configuration section are only relevant for the ticket object. If you have performed configuration activities using Key User Tool in other objects within the service or sales scenario, for instance you have created extension fields in the registered product or opportunity objects, the instructions below are not relevant and no further actions need to be taken to use the SAP Fiori client.
Configuration (Ticket Object)
Have you performed configuration activities within the ticket business object using the Key User tool in HTML5 client? If so, when switching from HTML5 to SAP Fiori client, you might notice that some of the configurations performed within the ticket object are not visible. This behavior is a peculiarity of the ticket object. In fact, the ticket object presents two different floor-plans, such as the desktop and the tablet. The desktop floor-plan presents the grey header section positioned on top of the screen while the tablet floor plan shows the header section on the left side of the screen.
Desktop Floor Plan
Tablet Floor Plan
The configurations performed in the desktop floor plan are not automatically visible through the SAP Fiori client. If you have performed configuration activities in the desktop floor plan, you need to either activate the changes in the tablet UI or in the SAP Fiori client. These options are respectively described in the examples below as option 1 and option 2.
As you might be more familiar with the HTML5 adaptation functionalities, it might be easier to adjust the configuration in HTML5 tablet UI. To the other end, you can use this opportunity to familiarize with the SAP Fiori Adaptation functionalities. Please remember, after the 1911 release (November), it will no longer be possible to access the HTML5 client. After the 1911 release, the only applicable option will be option 2.
Example - Extension Field
Let's consider the example of a new field created in the desktop floor plan. The field is called "Transition to Fiori" and has been created in the Additional Information section within the ticket overview Tab.
OPTION 1 - Tablet UI
You can activate the field "Transition to Fiori" in the tablet UI. After performing this action, the field will also be visible in the SAP Fiori client.
- STEP 1: Adapt - Edit master layout.
- STEP 2: Open tablet UI.
- STEP 3: Adapt - Edit master layout.
- STEP 4: Add the field "Transition to Fiori" in the additional information
- STEP 5: End layout changes (twice).
- STEP 6: Log in SAP Fiori and check if the change has been reflected.
The process steps indicated above can be followed for the page layout and field properties.
OPTION 2 - SAP Fiori UI
You can activate the field "Transition to Fiori" in the SAP Fiori UI.
- STEP 1: Start Adaption.
- STEP 2: Select the Additional Information section and drill down option.
- STEP 3: Search for the field and select the show field.
- STEP 4: The field "Transition to Fiori" has been added in the Additional Information section. End adaptation.
For specific configuration activities, such as adding a subsection, option 1 and 2 are not applicable. For instance, If you have created a subsection within the Additional Information section, you need to re-create it in the HTML5 tablet floor plan. After re-creating the subsection in the HTML5 tablet floor plan, the subsection will be visible in the SAP Fiori client.
Have you extended your solution using the SAP Cloud Applications Studio? If so, when switching from HTML5 to the SAP Fiori Client, you might notice that some custom UI built using the SAP Cloud Applications Studio (also known as PDI/SDK) are not visible. To enable them, update the property ‘Supported Devices’ as ‘Desktop and Tablet’. The entry Device = ‘Tablet’ will make sure that the work center views are rendered in the SAP Fiori UI.
Or, for an existing one, open your work center view in the UI Designer and in the properties window locate Configuration >Tags > select the popup and add two entries:
1) Device: Desktop
2) Device: Tablet
For additional information about SDK development, please refer to the following blogs:
- How to enable custom screens in the SAP Fiori Client: https://blogs.sap.com/2016/12/19/how-to-enable-custom-screens-in-responsive-ui-extended-app/
- How to set primary navigation in chunk view for smartphone support/tablet support: https://blogs.sap.com/2016/12/14/primary-navigation-settings-of-owl-for-response-ui/
Now, you know how to leave HTML UI behind and unleash the power of SAP Fiori. By following the configuration steps indicated in this article, you will be able to transition your service users from HTML to SAP Fiori seamlessly. For further support with the transition to SAP Fiori UI, feel free to contact your SAP representative (for example, CSM, CEE, and others) or send an e-mail to CXWorks@sap.com and we'll route you to the right resources.
For an introduction to the SAP Fiori UI client features such as navigation pane, app launcher, favorites, quick create, notifications and many more, you can watch the video below: