To kick off this month’s spotlight topic of Low-Code/No-Code on SAP Community, let’s jump into the world of application development with two products: SAP AppGyver and SAP Business Application Studio. I’ll first present an example of how these tools can be connected to create a finance solution for large organizations. Then we have some exciting announcements about our learning opportunities and an exciting No-Code Challenge!
Capital Expenditure (CapEx) Scenario📈
While SAP AppGyver and SAP Business Application Studio offer two distinct approaches to app development, they can (and should) also be combined to make use of SAP-opinionated technologies, such as SAP Cloud Application Programming Model, as well as creating digital touch points in the form of mobile apps. This use case illustrates how it’s possible to create an app for submitting capital expenditure requests. We successfully tested out this scenario during our own internal product sessions, so I’ll include some screenshots here so you can see the results and how these solutions can come together.
What exactly is capital expenditure (CapEx)? CapEx refers to a company’s budget for purchasing, upgrading or repairing long term physical assets, such as vehicles, new office buildings, furniture, etc. CapEx has a large impact on a company’s cash flow, and having a simplified, digital solution for managing such requests can significantly speed up the process.
Part 1 - Creating a backend service in SAP Business Application Studio
In the first part of this scenario, we used the low-code perspective in SAP Business Application Studio to create an API service that includes persistence on SAP Business Technology Platform. These are the steps we took:
Creating a data model – using visual programming in SAP Business Application Studio, we created a service that persists business data and exposes it as an OData service for applications to consume later.
Adding some sample data – Populating the data model with some sample data allowed us to test out the service.
Creating a service – After creating the data model (persistence layer) we selected what to expose to the outside world as an API. This service exposed our data model as an OData V4, RESTful API to our application.
Creating a List Report UI Application – Once we’ve created the service with several entities, we created a list report with an object page based on SAP Fiori Elements (a library of common floor plans that gives you a head start on developing applications efficiently).
Previewing & deploying the service and application – Now that there’s a running service and a UI application on top of it, we were able to preview both before deploying to the cloud. Once ready, we deployed the project to SAP Business Technology Platform and retrieved the service URL for use in SAP AppGyver.
Part 2 - Creating a mobile application with SAP AppGyver
This brings us to the second half of the scenario, which switches over to the no-code approach in SAP AppGyver. After setting up a new project in SAP AppGyver and getting the Preview App up and running on our device, we were able to set up OData integration with the service URL created in SAP Business Application Studio.
Creating and testing a new data resource – Using SAP AppGyver’s Data Resource Configurator allowed us to set up a new resource of the OData type and test out the API connection.
Setting up the "create a capex request" page components – The Component Market comes with a full library of options for drag-and-drop creation. The Properties tab let us adjust input field labels and other aspects of the UI.
Setting up a data variable and bindings – We created a variable for “new data record” which essentially gives an empty variable (or object) set up with the schema from the data resource. We used bindings to attach input components to the data variable fields, which automatically updated the variable with the input field contents.
Creating new records with the form – From the Logic Canvas, we added logic to the submit button to enable saving new records to the OData resource. Adding logic for displaying a message that the record is saved or alternatively any errors occurred was also possible.
Adding QR scanning functionality – With SAP AppGyver’s Scan QR logic flow, we could auto-fill the cost center input. As cost center identifiers can often be long and tedious to type in, they could also be provided as QR codesto improve speed and usability of the app.
Adding basic client-side validation – Using a simple formula with the “Submit Request” button we enabled validation of any data being entered. If either of the fields being checked are empty, the formula returns true, disabling the submit button.
Testing the app and the scenario – The SAP AppGyver Preview apps allows us to instantly test the app on our device (with a sample QR code, of course).
Once we tried that, we were able to head back to the list report in SAP Business Application Studio and view the new record.
And that’s it! Hopefully this overview gave you an idea of how low and no-code can be combined to create enterprise-grade solutions faster and more efficiently, and to leverage solutions you might already work with, such as SAP Fiori.
What else is new in Low-Code/No-Code App Development?💡
This month, there will be all new units added to Low-Code/No-Code Applications and Automations for Citizen Developers on SAP Learning. If you haven’t already, I highly recommend jumping into this course to get a head start on everything you need to know about becoming a citizen developer. We’ll be releasing lessons on how to build extensions to SAP Sales Cloud in SAP AppGyver, how to automate with SAP Process Automation, and running a no-code hackathon in your team. With the addition of these final units, you’ll also be able to earn certification to become an official SAP Certified Citizen Developer!
By this point, you’re hopefully feeling pumped up to build some apps in SAP AppGyver. If you are, we have some great news – this summer, you’ll have a chance to win some #NoCode hoodies for building apps and sharing your journey. The all-new No-Code Challenge kicks off on May 9! Check out the challenge details here.