SAPUI5: The Comprehensive Guide is available for purchase from SAP Press. ASUG members can enjoy 15% off any SAP Press titles with the discount code 15ASUG.
As part of SAP’s effort to modernize the user experience, the company brought together a small group of developers in 2008 to build SAPUI5, a JavaScript and HTML5 framework and coding language purpose-built for modern, flexible applications across different platforms and devices.
The framework went live in 2012 and in conjunction with SAP Fiori, a design system that helps users create custom business applications that have a consistent, simple user experience that's extensible throughout SAP platforms. Now, SAPUI5 is used for applications on SAP S/4HANA, SAP Cloud ERP, and SAP Business Technology Platform (BTP). Developers outside of SAP customers can also use OpenUI5, an open-source version, to contribute, share knowledge, and further develop the framework.
Four developers at CloudDNA GmbH, an Austria-based consulting and development firm and SAP partner, have trained clients around SAP technology for years, including publishing courses in the SAP training catalogue. Many of them hold SAP certifications, focus on full-stack development, and have long consulted international SAP customers on SAP Fiori and other applications. “We thought if it’s possible to explain in the training, it should also be possible to explain in a book,” said Daniel Krancz, General Manager, Software Developer, and Consultant at CloudDNA GmbH.
Krancz—together with CloudDNA GmbH colleagues Martin Koch, Managing Director, Rene Glavanovits, SAP Consultant and Developer, and Maximilian Olzinger, Software Developer and Consultant—wrote SAPUI5: The Comprehensive Guide, an SAP Press publication that goes in-depth on this framework, released earlier this year. It walks readers through fundamentals and development to work with SAPUI5 and create applications.
In an ASUG interview, these developers and authors discussed the importance of SAPUI5, how this book will help end users improve their SAP Fiori applications, and how SAPUI5 fits into the wider SAP BTP ecosystem.
This interview has been edited for brevity and clarity.
ASUG: SAPUI5 has been around since 2012. What's been its impact so far, and what do you envision for its future?
Glavanovits: As accessibility becomes more important, it’s necessary that applications are developed in an accessible way to everyone. There's more capability with today's applications than the ones we had back then.
Koch: I started with the very first version of SAPUI5 in 2012. In the beginning, it was such a niche technology. Now it’s used among nearly all SAP products. In the future, I think it will be used in all SAP products in order to improve the user experience.
Olzinger: One of the most important parts of SAPUI5 is compatibility with SAP Fiori itself, to the whole design system that represents SAP Fiori. In my opinion, one of the major downsides for a lot of customers is that when you’re utilizing a lot of different products, all the products look different from one another. When you are in the role of an end user, you want a coherent, consistent, simple user experience. SAPUI5 is great at providing exactly that. Everything more or less looks the same. You know what everything looks and feels like. You know where to press a button, you know where to do your customization. Basically, you not only have a technological framework that you can use, but you also have the large experience that SAP provides in building applications, mainly throughout Fiori design guidelines.
ASUG: For developers using SAP Fiori, how does your book help them?
Krancz: We are really starting from the basics, the core concepts of this framework. It is for beginners to know the framework, how to use basic components SAP is providing in their component library, how to use all of these themes. We’re starting at the beginning. Throughout the book, all the readers will be introduced to not only custom business applications, but also SAP standards — starting from easy-looking, single-page applications to more complex ones.
ASUG: Can you discuss Fiori for front-end UX design language as a complement to ABAP, this back-end programming language for creating business logic?
Koch: Right — I don’t think you can really compare it, because ABAP is for the back-end side. It is more about logic you have in the core and the stack in BTP.
In the past, you developed the interfaces using ABAP, but now it has shifted to the client side, so everything is done within the browser and you don’t need to download any application like SAP GUI for accessing the system. It has moved completely to the browser. Some things are going back to the ABAP system, like server-side rendering, but that’s a very advanced topic and is not widely used so far, even not by SAP. Some parts are going back to ABAP because of performance.
Krancz: It’s not only about shifting to the client because of new technology, but all the other advantages like the wide support, not to have to download a dedicated tool for accessing these applications, but also browser-end compatibility to be used on desktop, tablets, and mobile devices. There is now a big range of support with a framework that also supports these different devices and screen sizes.
ASUG: Why is UI still an important part of application development? How does SAPUI5 help with this?
Glavanovits: It will always be an important part of developing business applications, because UI is what you see in the end. SAPUI5 offers many prebuilt components that can be used and integrated, but also options for local development, which improves the speed of development, and improves efficiency. It lets you easily create business applications.
Olzinger: I think that the question answers itself. If you compare, for example, the SAP GUI next to a SAPUI5 application, you directly see the difference. Of course, user experience is highly subjective to each user, but you need to have a modern UI and modern access, modern interactions and modern controls, modern colors, and so on to be competitive.
SAP, in my opinion, understood this and is going away from the SAP GUI which hasn’t changed much in the past few years. With the usage of SAP Fiori design language, they are taking a big step in the right direction to also make a stand against other frameworks like Angular. These frameworks needed much more understanding of how to develop great UIs, whereas SAPUI5 takes you by the hand and says, “here’s a table, use it,” and you get a great-looking table, for example.
ASUG: What role does Joule have in UI5 development or coding?
Koch: It’s something we’re talking about with SAP Press currently. It plays a big role already, because you can use it to speed up or expedite the development process. But at least from my point of view, you still need to know the basics and evaluate if it is right for you.
I think it’s not just about Joule. You can also use other tools or some other models like ChatGPT or Cursor for developing UIs and just integrate it with the documentation of SAPUI5. There are a lot of things going on at the moment. You can also use the complete documentation for generating UIs outside of the SAP ecosystem. You can use other tools in the development process, but Joule is the way to go if you’re coming from an SAP world.
It’s also a question of the pricing or which way you choose to go. But it has a huge impact. There are different versions of Joule. There’s one for consultants that you can use, for instance, to explain coding and accessibility options. The other one, for developers, you can use for the development process itself, and it’s fully integrated into the SAP ecosystem.
ASUG: Many companies using SAP BTP are currently setting up their organizations for the future with AI. How does SAPUI5 underpin this technology, and what should developers know?
Krancz: The big advantage of this framework is that it’s not only dedicated for SAP Business Suite, can not only be deployed on an SAP system, but it is also a JavaScript framework that can be used in a non-SAP scenario or in a standalone BTP usage. You can deploy your business applications to BTP and use it as a platform—as a platform-as-a-service offering, giving external users the opportunity to access your application via SAP Build Work Zone.
Whenever it gets to the deployment in usage of BTP, we are starting to use more services and software-as-a-service offerings, in combination with SAPUI5 in order to develop cloud-native applications. We are connecting services offered in BTP with SAPUI5 as the framework for UI.
ASUG: Tell us about how this book will help developers gain knowledge around concepts like modularization and drag-and-drop.
Olzinger: Each developer knows that, when you go to develop, you have multiple different tabs for different resources open. With our book, you have everything in one resource. If you’re going to switch from different topics, you can just scroll up or down or search for what you want to find.
Taking, for example, modularization and drag-and-drop, each area we describe is interconnected to other parts of the book. If you’re learning about modularization, you will need to know each step of UI5 application — you need to know what a module is, and how to use it, for example. In developing drag-and-drop, for example, you will be able to apply your existing knowledge from the modularization chapter. Everything is more strongly interconnected, and you need to have just one resource open.
Krancz: It’s a single source of truth, as opposed to everything you search for on the internet, which exists in different blogs, on different trainings and so on — what we are really seeking is for a developer to have one source. The exercises in the book build on each other, step by step, to build these advanced concepts you mentioned.
ASUG: How will they be working with OData and RESTful services?
Krancz: Every developer will be to some extent be in RESTful services, because it’s the main interface protocol that SAP has been using, that they introduced and would use back in 2011. The SAPUI5 framework is built upon and fully supported on OData, because it was also the decision of SAP to use OData as a protocol on their interfaces in their technology.
But SAPUI5, as I mentioned, can also be used in non-SAP scenarios. It could be used for RESTful services and OData, but also used for JavaScript. In a basic way, it also supports communication with RESTful services, but it’s fully supported on OData, and that is also what it is really designed for.
ASUG: How will this book help developers concerned about security to increase their knowledge there?
Olzinger: We, as SAPUI5 developers or as SAP developers in general, are in quite a safe space, because SAP UI5 and the backend of this technology mostly handles all of the security by itself. There are a lot of security features implemented in the framework itself. We don’t need to worry too much about security when developing SAPUI5 applications.
However, there are some small adjustments you can make, and some security features that you can implement, in order to make this already relatively safe application more safe as a consumer and as an application provider. We talk about these adjustments in our book.
ASUG: Are there any additional trends around SAPUI5 that you think ASUG members should know?
Krancz: Let’s start with the backend development part—because it’s connected with SAPUI5 development—which is the usage of ABAP RESTful programming model. You’re developing core data services and framework in the backend, so this framework is offering guided development. I think, in the future, ABAP RESTful Application Programming Model (RAP) will be as important as the usage of SAP Fiori and SAP Fiori for developers.
Olzinger: Another trend has been the usage of disordered web components — the definition of custom HTML tags that look and feel like UI5 controls. New controls that SAP is building for SAPUI5 will first of all be available as web components. That’s why the look and feel of SAPUI5 can be used in other frameworks, which will give us as developers lots of possibilities to build monolithic applications, where SAPUI5 framework is capable but not as capable as maybe other frameworks. We also retain the look and feel of UI5 and SAP Fiori in external parties, with other applications.
From a web development approach, there’s a lot going on right now. Additionally, the integration of AI controls—where SAPUI5 provides buttons that provide AI functionalities to end users, where they can connect AI to business data, service questions, and so on—will be fully integrated in UI5.
Koch: Another interesting trend is that, if you’re using Joule, you don’t have a fully blown user interface. You’re talking to Joule in natural language; for some cases, you don’t need to use an interface of Fiori applications. If you ask Joule for the sales figures for the last month in North America, that can directly give you an output without using any Fiori applications. The user action is currently changing. For me, the trend to watch is the evolution of BTP.
ASUG: Is there anything else that ASUG members and potential readers of your book should know?
Glavanovits: Another topic is the Cloud Application Programming Model (CAP), used for side-by-side extensions and for backend development in the cloud. This is quite an easy way to implement your backend — very efficient development with less lines of code. That’s quite an important topic, I think.
SAPUI5: The Comprehensive Guide is available for purchase from SAP Press. ASUG members can enjoy 15% off any SAP Press titles with the discount code 15ASUG.