SAP Build Apps and UX – Perspectives and Cool Features

[former_member654546]

Overview:

This blog is authored by 3 designers in Digital Labs, Innovation Office APJ, Rena Yu Ning Wang, Stella Ang, and Sujit Adichikat. In this blog, we will be sharing our experience working on SAP Build Apps (previously called AppGyver).

Introduction:

The SAP Build Apps tool is a professional no-code development platform, it was acquired by SAP in February 2021, and has been helping SAP to better support customers and partners adapting to their IT systems efficiently to their specific needs.

SAP Build Apps can enable the user to quickly develop apps with drag-and-drop capabilities. Business developer can easily build an enterprise-grade applications without the need to write a single line of code, making the software development journey faster and more productive. Typically, the target users for SAP Build Apps (or any other No-code development tools) are nontechnical users in business functions, as well as developers who are looking to build everything faster, to visualize and understand the bigger picture.

Ever since the acquisition, SAP Build Apps has been getting a lot of attention within and outside of SAP. We hear many people talking about how low-code/no-code tools can save the users hours in coding and maintenance, helping businesses to not only meet the increasing demand for digital product creation, but also adapt to audience needs.

We, as designers, are very intrigued by the many benefits it brings. Thus, to help us understand SAP Build Apps better, and to learn about the potential opportunities and possibilities we can achieve by using this cool SAP technology, we had a hands-on training session with our team.

 

We discovered some handy features for designers:

1. Pre-built Business Logics

In SAP Build Apps, there are more than hundreds of templates and pre-built business logic components for the users to jumpstart on the application projects.

One amazing feature is that SAP Build Apps allows us to add this component called the Logic Flow. Logic Flows are used to capture events in an application, such as a page loading or a user tapping on a button, and to execute actions.

Having logic built into the design tool is no surprise to a designer, it is similar to adding an interactive arrow to a prototype on any design software. However, what went beyond our expectations is how SAP Build Apps provides users with customizable logic components and allowing us to tailor them to our needs.

In this example, we are building a today's deliverables page. As we are adding a logic connecting to the scan item button, we can see that there are 3 outputs for this action, and we can insert even more dynamic binding. Such dynamic binding allows us to tell the app what information to provide, which is in our case is the barcode being scanned.

We can configure the binding to the following:

• Select logic node - scan QR/barcode


• Select node output – scan QR/barcode / QR barcode content

Such logic design feature is very easy to learn and use, which will help us to save enormous time for the design, the developer, and entire team.

 

2. Preview your application

Another cool feature SAP Build apps has is that we can easily preview our app on mobile devices. This is useful when it comes to testing mobile applications because we can view the actual product and interact with it. For designers like us, it gives off a more realistic experience than viewing them on browsers or simulators – we get to not only experience what our end-users are experiencing, it also helps us gauge how users interact with it, allowing us to make better design decisions. In addition, this mobile prototype serves as a perfect tool for usability testing for designers! We can assess users' performance and their mental state as they try to complete tasks with the mobile app, identify problems they face and come up with solutions.

To launch the preview on your mobile device, follow these few steps:

1. Download the SAP AppGyver app from the app store on your device


2. Click on the “Launch” tab at the top navigation bar


3. Click on “Reveal QR Code”


4. Once the QR Code has been generated, go to the SAP AppGyver app, tap on “Scan QR Code”

And there you have it. The main page of the SAP AppGyver app provides you with a list of apps you have created. From there, you select the one you wish to launch preview on.

What we like most about this feature is that the preview is real-time! As we make edits in the development space and save progress, the preview on our mobile device refreshes automatically and displays the latest changes we have. It makes testing even more seamless and efficient. Isn’t that amazing?

 

3. Configure data resource

SAP Build apps enables us to configure data resources by creating data entities from REST API, OData and Google Firebase/Cloud Firestore. It also provides a marketplace for installable sample APIs, pre-configured with data from external REST APIs. This simple integration allows us to display content easily on the frontend of our app by using this data as “Data Variables”. Upon creation of Data Variables, logic is automatically added to create a loop to constantly check for data updates. We can then bind the data to the components we have created in the Composer. For instance, we can bind the contents in a title header to the data variable we have configured, and when the data is updated, the content in our component updates instantly.

This is extremely useful for designers as it saves us a lot of time on manual work during prototyping. Take for instance the values in a text-heavy table, as part of prototyping, designers have to manually enter values for the table headers, as well as the values to many rows and columns. With this data integration, not only can we display information seamlessly, we can also edit the values without going through every single prototype screen. Furthermore, there is not a single coding required from our end! Definitely a plus for designers!

 

Conclusion

SAP Build is a fantastic tool to create and augment enterprise applications on mobile, automate tedious processes, and design engaging business webpages and launchpads. It's a leap beyond high-fidelity HTML prototypes to build and deploy enterprise-grade solutions without coding knowledge.

One of the biggest challenges for enterprise application designers is ensuring the developed solution is aligned with Fiori guidelines, floorplans, and best practices. SAP build solves this problem by automatically applying Fiori guidelines and aligning SAP UI.5 controls to layouts and floorplans without additional effort.

When we (the 3 designers) were trying the SAP Build Apps, one thing that we have verified is how it can save time, for the designer, the developer, and the entire team. With the enormous time saved, we understand and for some projects, it is reasonable to justify the learning, implementing, and deploying of this new tool.

The learning curve of the tool is super quick. It's intuitive for anyone with zero coding or application design knowledge. With tons of in-built industry-standard business processes from SAP Signavio, even if you are not a business process expert, you can easily customize and edit the business process based on your requirement using the tool.

And if you need knowledge of advanced features, there are tons of tutorials available to ramp you up to speed. Give it a shot and go ahead and try the tool today and let us know what your think and how it can be improved further!

In the next blog of the series, we will write on how you can also build a business site with multiple entry points to your business applications using the SAP Build Work Zone. Stay tuned!

 

 

Useful resources:

https://www.sap.com/products/technology-platform/no-code-app-builder.html