Interfacing web apps with SAP

[evora-it]

Businesses are unique, and so are their challenges. Evora designs, builds, and implements custom-tailored solutions based on modern technologies and best practices. As a long-time SAP partner, we have extensive experience in developing custom apps and connecting them to SAP backend systems. I spoke to my colleague fredericpollmann about his project experience so I could share the learnings with the SAP community.

Leveraging SAP Gateway

SAP Gateway is part of SAP NetWeaver, which allows to connect devices, applications, and platforms to SAP systems. For the integration, the Open Data Protocol (OData) is used, so any programming language or model can be used to connect SAP systems with non-SAP applications.

Using a familiar RFC interface, developers can easily create OData. As a JSON dialect, it offers easy integration with all kinds of frontend technologies and frameworks that are prepared to consume data out of REST services, even if you do not want to use or implement the entire OData functionality. While the main job of the gateway is to pass data on, it can also be used to fetch, refine, and transform it based on your requirements along the way.

Leveraging SAP Gateway

Our Technology Stack for hybrid web apps

In one customer case for a field service app at a technology company, we built a hybrid web app using Angular, Bootstrap, and Apache Cordova. The core of this application runs on iPads and Windows 10 convertible devices and is accessible as a web page - all built from the same code base.

Flexible Architecture

The application logic is built with Angular and is heavily dependent on rxjs and the reactive programming paradigm. This allows us to easily update the application whenever data changes.

Beautiful User Interfaces

Using Bootstrap as the UI framework allows us to quickly achieve results and build applications that the user intuitively understands. Applying a theme allows us to easily match the app to the customers corporate design colors and style guide.

One Code Base

Everything is bundled together in a Cordova app which gives us cross-platform capabilities. And thanks to using a mono-repository approach, the source code for the core libraries and different app shells lives in the same code repository and ensures that we don’t have problems with broken dependencies.

Automatic Synchronization

By integrating the Apple push notifications service into the RFCs, we can trigger a sync between mobile clients and backend whenever required without manual refresh.

What technology you use? What piece of knowledge regarding web app development you would like to share? Looking forward to the discussion, please provide feedback in the comments section here.

Disclaimer: all information and images are created by Evora IT Solutions.Note that this post first appeared at https://www.evorait.com/2022/02/11/interfacing-web-apps-with-sap.

[MustafaBensan]

Hi Genia,

I agree that you can implement a great consumer-grade user experience with the Bootstrap UI Framework.  With your engagements, how have you balanced this approach with SAP's Fiori-based UX Strategy?  For which use cases would you use Bootstrap vs SAPUI5/web components?

Regards,

Mustafa.

[evora-it]

Hi Mustafa,

thank you for the question. I briefly discussed it with my colleague Frederic and he told me, that when we started this particular implementation, UI5 was not yet mature enough for what we wanted to achieve.

From today’s perspective, he explained, that if the requirements can be fulfilled with a UI5 approach, then that would be the better choice. Apart from that, if a more complex solution and absolute flexibility on the implemented features is needed, then it can still make sense to go with a custom implementation as we did here.

Hope this helps!

Best regards

Genia