Summary

We just published the code of a new SAPUI5 + CAP sample app at GitHub, similar to – and based on learnings from – the app we built in March to help the Foreign Office of Germany fly back citizens from abroad.

You can use this app as blueprint for similar full-stack apps or as example for the usage of the OData V4 model and its “draft” mode.

Prelude

One of the never-deemed-possible events of 2020 was the shutdown of international air traffic and the necessity for governments to help their citizens abroad get back home. The Federal Foreign Office of Germany did so as well and reached out to SAP, to take care of collecting and managing the traveller data.

In the evening of March 17th, this call for help reached us. The task was to develop an app over the night, having it ready and demoed to the Foreign Office the next morning and productive soon after.
We and experts from other areas readily engaged and ultimately succeeded – helping 240.000 people to get home. This was likely a more direct value provided to humans than 12 average hours of UI framework development…

More about the effort can be read in this SAP News article.

rueckholprogramm.de – the original app for German citizens to register for repatriation flights

Anyway, apart from stress and satisfaction, this night also came with lots of learnings about our own UI5 framework, the stack below (CAP on Node.js), how it all works together, and where examples and guidance are missing. With only a small handful of experts and huge time pressure, it really makes a difference that you can’t call another colleague with the missing expertise because it’s 4 a.m.! And design thinking? Fiori guidelines? UX experts? Nope.

So we decided during that night that we would build a similar app on the same stack again after all the turmoil had settled. That we would reach out to experts of all involved areas (including UX) and double-check that we were doing things right. That we would report issues and publish this new app along with documentation as an example how such a full-stack UI5+CAP app can be implemented properly. Finally we are done.

The App

Just like the original app built in March, this sample app consists of three parts: one UI5 freestyle app for data entry by end-users, one metadata-driven Fiori Elements app for data administration, and the CAP server. The scenario we chose is the registration for a company party, but you’ll see that the collected data is minimal and generic, so this app can be the base for any kind of data collection. Technically, the focus is on the UI5 freestyle side of things, in particular on the V4 ODataModel and the “draft” mode – an end-to-end scenario which we found to be under-documented back in March. Some thought has also gone into how a repository with those different parts can be structured.

The sample app is now available under the Apache 2.0 Open Source license on GitHub at https://github.com/SAP-samples/ui5-cap-event-app

In the documentation.md file, there is an extensive description which walks you through all areas of the code and the overall project. So we’ll not dive into the technical details in this blog post.

If you want to get started running the app locally first, then follow the instructions in the readme file.

On http://localhost:8080/index.html (user: employee@test.com, password: 123), you can then open the data-entry Form UI.

The Form UI where end-users enter their data

Thanks to “draft” mode, users can leave this app at any time during data entry (without saving!) and come back later to complete and finally send the data.

The same Form UI when re-opened after the user left it without saving the data

Administrators can log in on http://localhost:8081/index.html (admin@test.com / 123) to inspect the data (including Spreadsheet export) on the SAP Fiori elements list report page. They can also drill-down to the object page to edit the data.

The Fiori elements app used by administrators to work with all entered data

We hope this sample app will help you as much as it would have helped us!

Enjoy!

Andreas, Peter, and Joaquin

Previous post: UI5ers Buzz #55: Adaptation Project – your one stop tool for extending SAPUI5 Applications

All UI5ers Buzz Blog Posts

Authors

Andreas is software developer and architect at SAP since 2005, focusing on web-based user interfaces. Member of the UI5 development team since its inception and a main driver behind open-sourcing it as OpenUI5.

Peter is one of the initiators who started the Phoenix project (a.k.a. OpenUI5/SAPUI5) grown into the role of the UI5 Chief Architect mainly focusing on UI innovation in the area of the UI framework (UI5 Evolution), controls (UI5 Web Components), tooling (UI5 Tooling).

Joaquin works currently as Area Architect in UI5 Flexibility area with focus on Cloud Services. He started coding at the age of 9 and has not stopped yet. When he is not busy coding or with his family, you might find him training for his next triathlon.