Exploring Technology and Development Tools

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.

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.

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.

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.

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.

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.

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 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.