This article is about my learning journey on creating a mobile app using SAP AppGyver a.k.a. #LowCodeNoCode

This was created with the context of the SAP challenge SAPLowCodeNoCodeChallenge mentioned byDaniel Wroblewski . Many thanks for this great idea and inspiring all of us to join in.

The app that i created can be found at EDMApp

Purpose

The Purpose of this Expiry Date management app is in a retail store where employees visit all the shelfs every day to check the expiry dates and discard/discount the ones which are nearing the expiry. Many times, it is a paper based process so this app aims to reduce the manual efforts and errors and improve process efficiency.

The app presents a simple list of the items from an oData based API for which the expiry date is within next ‘X’ number of days. The employee visits /scans each app and enters the Expiry date from the article present on the shelf. The data is saved in the backend and a new check date is calculated so that the same article will appear again when the date is equal to check date.

My App

This app however has limited functionality and is meant only to showcase main areas.

1. The Product data is fetched from the open source Northwing oData service Northwind Service – Products and Product by Categories Products_by_Categories
2. The Home page contains list of products with some basic details
3. The user can enter the expiry date by using Calendar ( Pick Date Flow Function)
4. The user can also scan a barcode or sort a list
5. The user can navigate to the ‘Overview’ page to get a summarized list of ‘Products count per Product Category’
6. Clicking on a Product ID or Product Name, will navigate to the Details page where some more details will be shown

My Experience

I started with a bit of anxiety as starting with a new tool, getting to know new way of working is always a challenge. But within no time , I was up and running. With some basic tutorials on the internet, I was able to configure the external oData source and a list and I was ready with the Home page

I then proceeded to create the list interaction. I wanted to show multiple attributes in a list item and also include an input for the Date. So I created a composite component with some properties

Based on the tap event on the Product ID or Product Name , I wanted to set the navigation but I couldn’t do it from the Logic of Composite Component, So i triggered an event using ‘Trigger Event’. Then on the Home Page , Logic section, i used ‘Receive Event’ flow function and then navigated to the next page by passing the Product ID as a page parameter.

I used a flow function Pick Date to set the internal property of the Composite Component which has a 2 way binding property enabled/ so that once  a date is selected , it is set to the Date field

On Home Page, after the Data Source <-> Data variable is populated with the data, I wanted to create a list(array) for the summary view

For Barcode scanning feature, I used a data logic which first checks if the scanned product is present in the list or not. If found then find the product in the list and set the value of a page variable. Otherwise show a Toast message

Formula to find if the scanned product is present in the list or not

In the end, I also set the color of the selected Item, so whenever user selects the Product ID or Name OR whenever a user scans a product ID and it is found in the list, the selected item gets highlighted with a yellow color.

Summary

Some screen shots from the app itself

The learning curve was very steep and the biggest gain was the confidence on creating the mobile apps and integrating them with the SAP APIs with AppGyver and all within under one hood of BTP.

In general, I was very satisfied with the product that was built within couple of days albeit a very simple one but still I have a firm belief that this will be really become an important feature of SAP BTP offerings and. I expect that the AppGyver product and community will grow more n more and become more mature in terms of the knowledge.

Limitations/Would love to have

What I still would love to add is

1. Authentication setup
2. Integration of these apps on onPremise as well as BTP (cloud) based Fiori Launchpads
3. An Icon property to the Button
4. Recommended way to interact with Composite Components ( It gave me a lot of headache to access the Page, app, Data variables )
5. Scroll to an Item function. When I scan a barcode, I would like to scroll to that item(position) in the list
6. Home Page -> Clicking on Product Id -> Details Page -> Click on navigation ‘Overview’ -> Overview Page -> And then click on again Home page -> takes me back to the ‘Details’ page where as I expect to go back to ‘Home’ Page. I don’t what is wrong but needs to be fixed.
7. More tutorials on How Tos in AppGyver would be really handy

Thank you again and can’t wait to see SAP AppGyver become mainstream topic in SAP systems.

Regards,

Nilesh Puranik