In the area of user interfaces, the SAP world has changed significantly in recent years with the introduction of SAP Fiori. New technologies, mobile devices, the medium of the web browser and aspects such as web design and user experience require a rethink and a different skill set - both in the concept phase and during development. We have been involved in these steps from the very beginning and can therefore build on many years of experience in the web sector, even off the SAP track.

For us as logistics experts, the implementation of scanner transactions in particular is a frequent and recurring task that brings its own unique challenges: limited screen size, operation with gloves (e.g. in cold stores), integration with scanners attached to forklift trucks, etc. We master these challenges with customised solutions and by using the latest technologies. We will work with you to find the right solution for your use case!

The design line: SAP Fiori

Fiori is SAP's design line and is therefore comparable in principle to the major design lines from Apple (Flat Design) and Google (Material Design). However, the starting point is completely different in the SAP context: On the one hand, the focus is on consistency across all technologies and end devices, which was a major problem in the past; on the other hand, the design specification is very detailed and quite strict.

What you can expect from Fiori apps is set out in the Fiori design guidelines: from "general patterns" (see Fig. 1) to entire page layouts called "floor plans".

Figure 1: Example from the guidelines of how buttons should be placed

We have internalised the design guidelines and therefore only develop apps that comply with the guidelines. However, we also know when we can deviate from the guidelines in order to offer you the best possible user experience.

The concept: wireframing

We use dedicated wireframing tools (wireframe) in the conception phase as well as in the requirements analysis to design customised apps together with you. The focus here is not on pixel accuracy, correct colour representation or the like, but rather on a clear and consistent layout, the desired functionality and sensible workflows that make your employees' work easier.

Figure 2: Example of a wireframe

Wireframes give you the opportunity to test new developments with future users as early as the conception phase, allowing you to incorporate feedback into the programming requirements as early as possible. In addition, the creation of wireframes goes hand in hand with a logical and technical check, so that cost-intensive undesirable developments and lengthy iterations can be avoided.

The development: Elements, UI5 and UI5 web components with React

The resulting wireframes form the starting point for front-end development. Depending on the level of complexity and context, we use

• Fiori Elements
• SAPUI5
• SAPUI5 web components in combination with React

We recommend and use Fiori Elements mainly in simple cases: when the UI maps a database table or view. In such cases, Elements keeps its promise of faster development times. However, depending on the requirements, the limits of the framework are reached relatively early on, meaning that supposedly simple customisations can result in long development times.

We also have extensive experience with extensions to standard SAP apps, both on the basis of Custom Fields and Logic and the Adaptation Project. Let us advise you on which apps can be extended with which technology.

SAPUI5 stands for classic app development in the SAP environment. From simple transactions and special extensions for Elements apps to standalone apps that can also be used without Launchpad: UI5 is a stable and powerful framework with which the vast majority of requirements can be implemented cleanly.

In addition to the classic UI5, we also rely on the latest SAP technology, which will form the basis for UI5 in the future: UI5 Web Components. The UI5 Web Components implement the Fiori design guidelines and therefore the same look and feel as UI5, but can also be integrated into any technology. We rely on the combination with React (a state-of-the-art front-end framework from Facebook) to realise complex or very special applications in a component-oriented manner and with a high degree of flexibility. Advantages over the classic UI5:

• Highly optimised design can be implemented for scanner transactions
• Utilisation of existing user interfaces (the whole world of npm.js is open here: the largest software library in the world)
• Ultra-performant thanks to Virtual DOM 

On the developer side, the advantages are even greater: the focus on components, the associated high reusability of components once created, type safety thanks to TypeScript and excellent tooling (e.g. Storybook) increase productivity and help to avoid errors. This means that even very special, large or highly complex applications can be realised that remain comprehensible and maintainable.

Let us design customised apps together to provide your employees with efficient and powerful tools. Benefit from our proven approach and our many years of front-end experience!