My participation in the No-Code Challenge is described in this blog post. If you’re not familiar with the challenge, please read Daniel Wroblewski blog article for more information. But, in short, it’s an opportunity to learn more about SAP AppGyver and share what you’ve created with the SAP Community.

My goal was to build a mobile app that will be more like Incident Management App where we can raise an incident or withdraw the incident. Similar to that, I wanted to have asset compliance so that by scanning the asset we can see the details of the asset.

My experience building the App

I’d never used SAP AppGyver before, yet I was able to create the app in about three hours. My background in software engineering has helped me avoid several mistakes. However, using the included tutorials and documentation, non-developers should be able to achieve the same goals.

Let’s get into the details now.

Datastore

So, for datastore I have created a local data store for maintaining the Incident List which has seven properties like incident_id, incident number, incident name, reporter, priority, and many more, and for asset compliance, I have created a mock API https://62862b9d96bccbf32d708da3.mockapi.io/assetlist/asset

The automatic schema recognition of the REST API response amazed me. It automatically captures the property name, data type, and even example values. I had to tweak the data type here and there, but overall it works.

Datastore-Incident List

API – Asset List

While dealing with the data resource, I discovered that SAP AppGyver verifies the data type. As a result, only the appropriate data type can be used. This makes it easier to avoid mistakes when putting the App together.

Example values are useful since they appear as preview texts in the App editor. The preview also aids in the proper construction of the data when wiring it to components or using it in formulae.

Creating the App

This is obviously just a learning/proof of concept kind of application. But I want to try some things I’ve never done with AppGyver before.  The main thing I want is to build a List/Detail UI kind of pattern. I want an introduction page that will list all the incidents and Assets and then when I tap on one of the items in the list it should navigate to a detail page with more information about that Incident/Asset. I also will have a separate page for creating the incident by entering some important information which will eventually get stored in the local data store.

Pages of Project

There are a few “standard” components that can be utilized to create a UI right away. More components are available on the market. A marketplace is truly a fantastic idea. I’m not sure what the objective is, but sharing or monetizing bespoke components with coworkers could be fascinating. For listing the details I tried to use the custom component list, but there was some issue I don’t know, after googling, I came to know it was not only me who was facing that. So I stuck to the common list component. For adding the gap between submit and back button, I have used the Row component. For the styling purpose of list component, I have just changed the theme to Black and Powder Blue to make it more aesthetic.

App Variables

Asset Data Variable

Incident Data Variable

Incident Page Variable

Created two app variables for setting the current component value while navigating to the next page, a page variable for local CRUD operation, and data variables for displaying values from AssetAPI and the local data store. Now coming to the most important part of everything, LOGIC!!!!!!!

Logic for displaying incident details

Logic for creating the incident

Logic for deleting the incident

Creating the logic for components was the most interesting part, it was like a trial and error thing. The most time-consuming logic during this AppGyver Development was writing the JSCode for parsing the output into JSON format. That is the only 5-6 lines of code I have written which really amazed me!

Logic for Scanning the assets

Parsing the output into JSON

Logic for displaying assets list

Testing

For testing your product, you can use the Launch menu where you can either directly have a web app preview(not happy with the alignments and responsiveness) or you can use the AppGyver app which is available on both Android and iOS smartphones, just need to open the app and scan the QR code that’s it. We can iterate quickly with an accurate preview on my phone without needing any build, deploy or install steps.

Launch Menu

I have recorded my app preview on my phone, please have a look at it. Also, you can download the APK file from here.

Conclusion