When Low-Code becomes Wow-Code with Neptune DXP Open Edition
An example of a self-checkout app built with SAPUI5 and Bootstrap UI, developed with Neptune DXP Open Edition

When Low-Code becomes Wow-Code with Neptune DXP Open Edition

Some 9-10 years ago, SAP introduced an HTML5-based development toolkit called SAPUI5. This toolkit helped developers to create responsive enterprise-ready web applications with a consistent user experience in an efficient way. Because it opened up a lot of freedom to tweak and extend using standard practices and web technologies, as well as the ability to create rather good-looking results pretty quickly, it soon became hugely popular with SAP front-end developers.

Widespread adoption came in 2013 when SAP announced the first SAP Fiori applications, a suite of approximately 20 apps that were highly responsive and utilized a more modern-looking, mobile-friendly set of SAPUI5 controls. These new controls quickly became the standard controls of SAPUI5, and the original ones were soon deprecated.

Over the years, SAP has regularly updated the SAPUI5 framework by adding controls, modernizing them, and extending its powerful enterprise features. Today, SAPUI5 as an enterprise-grade user interface technology is stronger than ever. It provides a remarkable UX, thanks to a rich set of hundreds of enterprise UI elements complying with product standards such as security and accessibility. And because of the excellent connectivity and data-binding capabilities, it is fairly simple to have a SAPUI5 app perform CRUD operations to SAP systems using the OData protocol, or 3rd party services using standard REST. Furthermore, its extensive and decoupled theming options allow for creating and using different visual designs for all applications without modifying them. And at the time of writing, the SAP Fiori suite consists of a whopping 14568 applications...?

For developers, the learning curve for SAPUI5 has never been steep. It supports the Model View Controller concept which encourages you to keep the data model handling, the application logic, and the user interface into separate building blocks. And for the most-used use cases, the development tooling provides application generation wizards which help speed up the initial scaffolding. Inevitably, it is still required to implement a huge amount of coding.

This is where platforms like AppGyver and Neptune Software jump in. These so-called Low Code / No Code platforms facilitate app development based on application building blocks; scalable, reusable, modular, and composable controls and components. This approach leads to shortened development cycles and improved visual consistency as well as a more harmonized UX while still following the SAP Fiori design language.

And that is a bit of a problem.

Because of the enterprise-grade roots and nature of SAPUI5, and despite the fact that SAP Fiori design language has won numerous awards (including multiple prestigious Red Dot Awards), it doesn't exactly look 'consumer-grade' at all. By default, all SAPUI5 and SAP Fiori applications have the same minimalistic, sometimes complex yet robust look and feel. And while a significant amount of business users may find these apps aesthetically pleasing, most non-business users find them quite overwhelming. Typically these people are used to websites and applications built with friendlier, consumer-grade UI technologies such as React with Google's Material UI, or UIKit, or Bootstrap. And while it is perfectly possible to create robust, enterprise-grade applications using these technologies on top of SAP, it will require a huge amount of 'reinventing the wheel' coding with regards to connectivity, offline capabilities, security, and authentication/authorization.

Companies are more and more aware of the importance of establishing and enhancing their reputation. If users -- business users, customers as well as consumers -- for whatever reason don't like an application's user experience, they will not fully use it. Or worse, completely abandon it. In other words, application adoption by providing the best user experience is key to success.

Now, what if you could harness all of SAPUI5's enterprise power, and utilize its features and integration with SAP systems, such as seamless data-binding and security features, while at the same time utilizing highly aesthetically-pleasing consumer-grade UI controls and elements? Sounds like a unicorn?

Enter Neptune Software's DXP Open Edition.

No alt text provided for this image

The latest version of this Low-Code / No-Code development platform provides all of the above. While the list of controls is rapidly extending with each update of their platform, they have already added dozens of controls, elements, and layouts to their App Designer IDE. Developers now have the ultimate freedom of using both SAPUI5 and Bootstrap elements and controls in whatever combination they please.?

No alt text provided for this image

And the best part? All these Bootstrap elements are enhanced to support SAPUI5 capacities such as data-binding and property-binding, including the use of formatters and expression binding! This way you can design, develop and deploy fully functional SAPUI5 applications but with the added UX of Bootstrap controls.?

In addition, most Bootstrap controls offer a large array of properties for all kinds of foreground and background colors, text and font size, line styles, paddings, etc. which are also available for data-binding... The possibilities are now truly endless.

One example where the ultimate user experience, as well as the best fail-safe, enterprise-grade operations, are required is for these self-scanning-and-checkout apps used in supermarkets. These apps are to be used by the most non-tech-savvy users.

Imagine a persona called Monique, a mother of two. Whenever she walks into her (fictitious) local supermarket 'Superrr', she first opens the shop's 'Scanrrr' app. The app logs her in seamlessly, and then Monique picks the goods and products she needs.

No alt text provided for this image

For every product, she scans the barcode and the app registers the scanned items in her virtual shopping cart before she puts them in her physical shopping cart. When Monique is done shopping, she doesn't have to go to the cashier. Instead, she goes to one of the self-checkout terminals near the store's exit. She clicks the 'Checkout' button on the app and has the barcode that now appears in her app scanned by the terminal. Monique's shopping list is now transferred to the terminal, and she can now pay with a card before leaving the store.


It is clear that the store's Scanrrr app should be self-explanatory and should be as simple to use as possible. Anyone who has ever developed a SAPUI5 application would agree that presenting a broad range of customers with an app built solely with SAPUI5 might not yield the most intuitive user experience. The robustness and security aspects would be top-notch though.

With Neptune Software DXP Open Edition, you could now design and build such an app. A developer can create a simple view with buttons to scan a product and checkout, and show a list of scanned products. By clicking on a product you can then view some product details or remove the product from the shopping list. And most of the views can be developed using Bootstrap controls, to provide a near-perfect user experience. In addition, the platform comes with a built-in 'Application Building Blocks Store' where you can download a barcode scanner component which can then easily be integrated into the app.

No alt text provided for this image

Because the Bootstrap controls are modified for use with SAPUI5, all the Bootstrap buttons and tables use the same data-binding and event handling mechanism as you are used to with standard SAPUI5 controls. And since this is a Low-Code IDE, even the data binding and configuration of events is made much more straightforward. Data binding is just selecting the model and properties to use, and there is no extensive coding except for a few lines in the event handler (see for instance the model binding for the Bootstrap Table in the screenshot above).

To be fair, you may be able to achieve more or less the same look and feel by using plain SAPUI5 and then extensively modifying the CSS. But any change to the platform or to the SAPUI5 framework, as well as future updates and changed requirements to the app itself would involve a significant amount of refactoring and fixing CSS and/or layout issues. Instead, all the application screenshots you see here are used with the standard controls and building blocks, and no CSS changes or theme has been applied.

No alt text provided for this image

With Neptune DXP Open Edition, companies and developers always had the productivity boost from its Low-Code development tools and simplified integration to SAP and 3rd party systems. Now they also have a beautiful, powerful, modern approach to application design using proven consumer-grade UX embedded in enterprise software.

You can download a fully functional trial version from https://www.neptune-software.com, install it on your laptop or cloud provider, and try it out for yourself.

Ceyhun ALP

SAP HANA & BI Solution Architect

2 年

Thank you for the great content. I am curious on how Neptune Software differantiate itself from Appgyver or what extra features it actually offers. At the high level, they both appear to be addressing the same problem, but I'd be happy to hear more about it.

回复
Matthias Steiner

Techie and product manager with a focus on enterprise software (SAP), open source, app development and emerging technologies

2 年

Great wrap up of the past decade "all things UX @SAP" and greta segue into our new meta design system - while the final name is to be revealed later, let's go with NUI for now as a TLA moniker. I'd love to listen to the reactions - thanks for brokering an interesting and exciting conversation!

Solen Dogan

SAP Fullstack Developer

2 年

Nice blog Robin??

Henny Claessens

Multipotentialite - now enjoying life (retired). Main focus: SAP Community Evangelist.

2 年

Nice blog Robin. This kind of ‘Red Line telling stories’ from the beginning until where we are standing now are all time favourites IMHO ??????♂?

We are WOWed by this blog! We promise to keep it up, Robin ??

要查看或添加评论,请登录

社区洞察

其他会员也浏览了