Exploring Technology and Development Tools

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Describe SAP Fiori elements
  • Discover the support offered by SAP Fiori

SAP Fiori Elements

The SAP Fiori UX

Now that we have looked at the principles of SAP Fiori design, let us now have a quick look at technology and development tools.

The easiest way to enjoy SAP Fiori apps is to use or adapt SAP-delivered apps. Nevertheless, where standard apps are not available, you can develop your own – most easily using SAP Fiori elements, if the supported patterns fit your needs, or using freestyle with the powerful SAPUI5 HTML5/JavaScript framework.

If you use SAP S/4HANA or the SAP Business Suite, and your users are not happy with specific transactions, SAP Screen Personas offers you an easy way to simplify SAP GUI screens and thus bring them closer to the Fiori experience provided by SAP Fiori apps.

Components of SAP Fiori Elements

SAP Fiori elements reduce the effort for front-end development by 80% compared with freestyle SAPUI5 development – and that is already quite efficient because SAPUI5 is a powerful HTML5 / JavaScript development framework.

SAP Fiori elements ensure that updates to the Fiori design are automatically incorporated into apps built with Fiori elements.

80% of typical enterprise use cases are supported by the SAP Fiori elements page types.

Page Types - List Reports and Object Pages

We will now examine two typical page types, a list report and an object page.

SAP Fiori elements provide all the features listed here, which are essential for enterprise-ready apps – all out of the box.

We provide many features out of the box, none of them requiring a single line of code, features such as searching and filtering lists, saving filters as variants, personalizing, and sorting the list, exporting to Excel, and navigating to details.

In addition, SAP Fiori elements support accessibility, internationalization, that is, translation, right-to-left languages, mobile device support and responsiveness, and more – all out of the box.

That is why you are so much faster developing with SAP Fiori elements – if the use case fits one of the supported patterns.

The figure, Development Approaches with SAPUI5, shows how much effort you save using SAP Fiori elements. Even if your use case does not exactly match the out-of-the-box scope of SAP Fiori elements, you can extend the scope yourself by adding code and still end up with less effort than freestyle development.

SAP Fiori Tools


To further increase the efficiency of your development processes, we recently introduced SAP Fiori tools, which are available in the cloud through SAP Business Application Studio, or on-premise offline on your laptop using Microsoft Visual Studio code.

Efficiency and Code Consistency

SAP Fiori tools give the user operating a wizard-style approach with step-by-step instructions – overall, reducing the effort and skill level required. Code consistency is improved, and it simplifies the maintenance of your apps in the future.

As we have already mentioned earlier, the SAP Fiori design system includes design languages for iOS and Android. We also provide SDKs that allow you to develop native SAP Fiori mobile apps easily. In addition to the respective SDKs, the SAP Mobile Services also provides a mobile development kit, which allows you to code once and then create native versions of the app for iOS, in addition to Android. These innovations allow you to save significant time on design and development.

SAP Fiori in SAP S/4HANA

SAP Fiori and SAP S/4HANA

For SAP S/4HANA, all applications and transactions used should be accessed using the SAP Fiori launchpad. The innovations of SAP S/4HANA come through Fiori apps, so you will lose out if you do not implement SAP Fiori and only use SAP GUI. Furthermore, selectively implementing individual SAP Fiori apps breaks the user experience and results in high implementation costs.

The good news is that, by leveraging the SAP Fiori launchpad, all users can profit from SAP Fiori, including those users who still end up doing a lot of their work in the classic UIs: SAPGUI and WebDynpro.

Transition to SAP Fiori

For the transition to SAP Fiori, we are not simply taking the old transactions and rebuilding them with new technology. Instead, we are doing user research to understand how people work these days and leveraging the new possibilities of SAP Fiori to build innovative new user interactions. SAP Fiori apps provide a new way of working and are the only way to profit from many innovations in SAP S/4HANA. Of course, we cannot replace over one hundred thousand transactions with SAP Fiori apps in a year or two, so these new Fiori apps are supplemented with classic UIs. Nevertheless, over time we are increasing the number of Fiori apps available to you.

As we have seen, the SAP Fiori launchpad gives each user only those apps relevant to the roles assigned to them.

Different roles will have a different set of apps assigned – with some apps being used by multiple roles.

The SAP Fiori launchpad provides you with a single entry-point for each user to access all their apps, as well as the shell services such as search and personalization.

Finally, the SAP Fiori launchpad content defines the role-specific navigation networks. This is very powerful, and something that SAP provides out of the box through the so-called SAP Fiori launchpad content.

The User Experience of SAP S/4HANA

The figure, SAP S/4HANA - User Experience, summarizes what we have just explained: the SAP Fiori launchpad as the single entry-point, which allows users to navigate to new and innovative SAP Fiori apps. These, in turn, give users an overview that shows them where to direct their attention. This enables them to drilldown to the most relevant details.

On the bottom left of the figure, we see an example of an SAP Fiori app showing an Object Page. On the right side of the figure, there is an example of a classic UI (va02 for those who know the transaction code).

We have applied the SAP Fiori theme to all UIs in SAP S/4HANA, both Fiori apps and Classic UIs. This enusre we have One Look for the whole product, providing you with a consistent user experience.


SAP Fiori is how business users access SAP S/4HANA innovations. This means that customers who want to make the most of these innovations may need to activate 100s and, in certain cases, 1000s of SAP Fiori apps and classic UIs. Naturally, in your project, you want an easy way to do this – now here it is!

The recommended way to approach SAP Fiori activation of your SAP S/4HANA system is to identify the business roles that are relevant to your business in the SAP Fiori apps reference library. Using this, you can find information about all the standard SAP Fiori launchpad content delivered by SAP. 

In the next step, you activate the relevant SAP Business roles using the rapid deployment of SAP Fiori Design for activation task lists. This is the quickest way to get started because they allow you to enable all associated apps and generate a role and a test user for each role in just one step. 

Explore the standard business roles by experiencing them as a business user in your sandbox system. This will great assist you and your business experts gain a good understanding of how these roles work, such as what insights are provided and how a user navigates between apps and classic UIs to complete their day-to-day work. 

When you have a clear idea of which business roles, which apps, and which app-to-app navigations you want to run in your system, you can start adjusting the Fiori launchpad content. For a fast way to copy and customize the SAP business roles, you can now take advantage of the Fiori launchpad content management tool.

SAP Mobile UX

Start with the basics, allow for choice and flexibility, and the ability to grow and adapt to users’ needs and preferences organically and incrementally.   The desire and awareness to use mobile are discovered by exploring the way everyone lives - experience-by-experience, brand-by-brand, country-by-country, and person-by-person.

Start on desktop and continue to a tablet or smart phone, or vice versa. Provide native mobile applications for truly mobile use cases.

SAP S/4HANA provides several native mobile apps for select use cases, most of which are industry-specific – those in gold color are available for SAP S/4HANA on-premise in 2020, the white ones are planned. A special mention goes to SAP Mobile Start, which is planned to be your native mobile entry point for all your apps, be they native apps or web-based.

Digital Assistant

Digital assistance in SAP S/4HANA is based around 2 pillars, which are outlined in the figure, Digital Assistance in SAP S/4HANA.

SAP Conversational AI

SAP Conversational AI is the operationa purchaser chatbot for SAP S/4HANA Cloud:

  • Role - Operational Purchaser
  • Process - Procure to Receipt | Operational Proc.
  • Planned Go to Market - SAP S/4HANA Cloud (Release 2016) for on-premise deployment SAP S/4HANA > 1909

The scenario and key features of SAP Conversational AI are extremely useful and enable multiple efficiencies. The operational purchaser oversees the automated execution of procurement processes and handles exceptions. One challenge is the ability to multitask between topics while depending on pertinent information being readily available.

The operational procurement assistant enables the operational purchaser to perform the following tasks:

  • Derive context-relevant information from purchasing documents such as contract consumption, without moving to other apps.
  • Navigate fast and efficiently to procurement apps without deep expertise or system knowledge, thus easing the onboarding process of new users.
  • Efficiently collaborate with trading partners, such as directly initiating MS Teams calls for business critical events.

The business value of this is as follows:

  • Fast ROI with reduced onboarding efforts
  • Enhanced end user satisfaction with intuitive and integrated UX
  • Improved process automation and efficiency

Save progress to your learning plan by logging in or creating an account

Login or Register