SAP Mobility

UI5 is mainly developed for SAP mobility which means SAP Fiori.

The SAP User Interface (UI) and User Experience (UX) revolution is truly underway. There are some tactical solutions out there, but the chief strategic solution that SAP is basing its UI/UX future on is UI5.

Newsxsys Technologies

Re-imagine the SAP user experience with SAP Fiori

Fiori and SAPUI5

SAP Fashion Management provides a comprehensive solution for fashion companies to: break down barriers and inefficiencies across sales channels, increase speed of range introduction and gain up-to-the-minute visibility across all partners to expedite deliveries.

SAP Retail/FMS/CAR includes the standard SAP ECC System components.

As the SAP partner with the SAP ecosystem, our learning’s and expertise is unparalleled, providing you the best strategies for implementing and leveraging the SAP fashion solution

SAPUI5

SAPUI5 is the name of the toolkit that SAP has been building for the past three or so years. You’d be forgiven surprise at the length of time it’s existed,

because it’s only really started to gain attention for the last year or so. I wrote about SAPUI5 in May 2012, describing it as “the future direction of SAP UI development”, and I stand by my prediction. And the official name? In the same way that the characters in Iain M Banks’ masterful science fiction series about The Culture have very long names, and practical short ones too, the official name for SAPUI5 is the “UI Development Toolkit for HTML5” … which is why most people do refer to it as SAPUI5.

SAPUI5 is a series of core and functionally focused libraries and a runtime environment. The core provides essential services such as module loading and management, eventing, navigation, data management and various application development concepts (such as Model-View-Controller). The libraries provide collections of controls that are used as UI building blocks in apps – tables, lists, date-pickers, input fields and forms, buttons, and so on. Some controls are simple (like the Button), others are more complex (like the Shell, or the Table), but all work together to provide the interactive components from which applications can be built.

The applications that are built with SAPUI5 are applications that run in the browser. They are HTML5, JavaScript and CSS based. When you invoke an app, the application itself is dowloaded to the browser, along with the SAPUI5 runtime.

There’s a theming concept for the controls within SAPUI5 which is why you might have seen different designs in screenshots. The dominant theme so far for desktop-focused controls was “Gold Reflection”, where the dominant theme for mobile and responsive controls is “Blue Crystal”. You will see a convergence on Blue Crystal for desktop-focused controls – in fact, if you examine the latest SAPUI5 Software Development Kit (SDK) documentation, you’ll notice that this has already happened; the desktop-focused SAPUI5 controls (with which the SDK itself is built) are now themed with Blue Crystal.

OpenUI5

OpenUI5 is SAPUI5’s sibling. While the use of SAPUI5 is subject to an SAP licence, OpenUI5 is Open Source. This is a big deal, and very important for many reasons, best left for another post. Suffice it to say that in December 2013 SAP surprised us all by open sourcing UI5. The fact that they actually open sourced it wasn’t so much of a surprise, many of us outside and inside of SAP were lobbying for it to happen. What surprised us was how quickly they turned it around (well done SAP!).

OpenUI5 has its own SDK, and its own presence on the web on Github, which is currently the most important place for Open Source projects such as this. SAP has a way to go yet in fully embracing all of the Open Source concepts, but it’s getting there, and the all important first step has already been taken. SAP and developers like me can start to more properly engage with Open Source developers outside the SAP ecosphere, developers with skills and expertise in UI/UX and many other areas. One of the ways SAP will continue to be relevant is by reaching out in this direction.

There are a number of differences between OpenUI5 and SAPUI5, mostly related to libraries that are currently missing from the Open Source version. But the essentials (sap.ui, sap.m) are there. If you’ve written a UI5 powered app, as long as it doesn’t use charting, for example, there’s a good chance that you can just switch the toolkits and it will still work. Of course, there’s more to the detail, but that gives you a rough idea.

SAP Fiori

SAP Fiori 2.0 is the latest evolution of the user experience for SAP S/4HANA. The user-centered design concept focuses on the way employees work and offers a variety of business benefits:

Increased productivity – faster and direct access to relevant information and applications
Transparency on items needing your attention – timely notifications
Helps users decide what needs to be done next
Allows users to take quick and informed actions
Increased user satisfaction

What you need to know about SAP Fiori 2.0:

SAP Fiori 2.0 is the leading design for all SAP applications providing a harmonised user experience across on premise and cloud solutions. A new visual theme – named Belize – comes along with light and dark flavors. Using SAP S/4HANA, the UI Theme Designer allows you to adapt the theme to your corporate identity.
With SAP Fiori 2.0, the SAP Fiori Launchpad is your central and role-based entry point to access all apps.
With the viewport concept, the user’s desktop has been expanded to the left and to the right. While users can access the Me Area to the left, notifications on the right keep them well informed.
The SAP Fiori 2.0 concept also includes new SAP Fiori elements – Overview Pages, List Reports, and Object Pages – which can be easily developed using SAP Web IDE.

SAP Fiori is a series of app suites, being introduced in waves. The apps in these waves are written by SAP app developers. But Fiori is also a development approach, a design approach, which has a number of soft constraints. And when an app is built to conform to those constraints, it exhibits Fiori-like features: simple and recognisable design, easy to use, a role-based approach, and following one of a core set of UI patterns.And crucially, Fiori apps are built with UI5. More specifically, they use specific libraries from the UI5 toolkit, the most significant one by far being “sap.m”. The “m” in “sap.m” stands for “mobile”, but as we know, responsive is the new mobile, and this is essential in ensuring that Fiori apps run on all devices – smartphones, tablets and desktops, as the sap.m UI5 controls are designed from the ground up to work responsively.

So putting these two observations together – that Fiori is a design and development approach and set of constraints, and Fiori apps are built with UI5, it stands to reason that you too, as an SAP customer, can build your own Fiori apps. With some expert help and guidance, you can join in the UI/UX renewal yourself and if SAP don’t offer an app that suits your requirements, you can build one yourself. Not only that, but if you build it right, it will happily live and run inside the Fiori Launchpad alongside the SAP-delivered apps.

And if you’d like to hear more about SAP’s open sourcing of UI5, or Fiori development, Contact Us.

Let our SAP experts help you get the most from your Fiori and UI5 investment

With many years of experience and thousands of successful deployments, We have SAP Certified consultants who knows how to help you get the best from your SAP budget. We listen to what you want to achieve, then guide your technology experience to find the best way to unlock the potential from your SAP investment.