No-Code Challenge…Expiry Date Mgmnt App Using SAP AppGyver
This article is about my learning journey on creating a mobile app using SAP AppGyver a.k.a. #LowCodeNoCode
The app that i created can be found at EDMApp
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.
This app however has limited functionality and is meant only to showcase main areas.
- The Product data is fetched from the open source Northwing oData service Northwind Service – Products and Product by Categories Products_by_Categories
- The Home page contains list of products with some basic details
- The user can enter the expiry date by using Calendar ( Pick Date Flow Function)
- The user can also scan a barcode or sort a list
- The user can navigate to the ‘Overview’ page to get a summarized list of ‘Products count per Product Category’
- Clicking on a Product ID or Product Name, will navigate to the Details page where some more details will be shown
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.
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
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.
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
- Authentication setup
- Integration of these apps on onPremise as well as BTP (cloud) based Fiori Launchpads
- An Icon property to the Button
- Recommended way to interact with Composite Components ( It gave me a lot of headache to access the Page, app, Data variables )
- Scroll to an Item function. When I scan a barcode, I would like to scroll to that item(position) in the list
- 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.
- 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.