Pack Handling Units App using SAP AppGyver (No-Code Challenge)

 SAP AppGyver is in my to-learning list since its beginning. I started with SAP Fiori in 2015 and lived the BUILD age. I worked with BUILD in real life projects,  and I wanted to catch up on the new prototyping tools.

Purpose

In this article I will describe my experience using SAP AppGyver for the No-Code Challenge. SAP AppGyver is SAP’s No-Code / Low-Code Platform. The challenge details are described here:

 

My App – Pack Handling Units

You can find the web version of Pack Handling Units app here:

• https://packhandlingunits.appgyverapp.com

This app aims to help warehouse clerks to pack handling units and do stock transfer using mobile device and  barcode scanner. 

A common activity in warehouses is to pack handling units (HUs) in boxes, pack boxes in pallets, and transfer these package to a staging point to be loaded onto the transport truck. 

In SAP S/4HANA, transaction HU02 is used to pack hadling units, and transaction LT10 is used to do bin-to-bin transfer. The warehouse clerk needs to do the physical pack, write the handling unit codes in a paper, and then go to desktop and use the SAP GUI transactions to do the pack and transfer in the system. Now a mobile device can be used to do the pack and transfer in real-time!

I have separated this project in 2 apps, Pack Handling Units and Stock Transfer. My entry contains the Pack Handling Units App.

 

The first page contains 2 buttons: Pack HUs and Display Packages

Pack HUs button navigates to a page to insert barcode numbers. It is possible to scan barcodes using mobile camera, or type the text manually in the input field.

The code read is inserted into the list, showing the barcode number and material description.

When a list item is clicked , the app navigates to a barcode details screen, calls an API to retrieve barcode details, and shows some details about the material. A button for delete this record is available.

Back to the page to insert barcode numbers, this page also contains a button to Pack Handling Units (same as HU02 transaction)

Pressing this button, a Package is created, and the app navigates to a page that shows a list of created Packages. This page is also showed when clicking in Display Packages button, in the first page.

The package is deleted when the line item is clicked

The next challenge for me is to insert all the read barcodes inside this package, and create a header-items hierarchy.

And I also want to know how to exclude all itens with one action, and exclude only selected lines of a list.

 

My Experience

I started in AppGyver with the built-in tutorials in Composer only. The tutorials are easy and can be completed quickly. After finishing the built-in tutorials I just started my prototype using my BUILD experience, developer experience and intuition. 

I had already created this Pack Handling Units and Stock Transfer app using SAPUI5 Freestyle, so my objective was to replicate it in AppGyver.

In this process I learned how to work with query parameters and Data Variables initialization in AppGyver, and the search for a public API increased my API knowledge significantly! 

I worked with these APIs. Some of them I played in POSTMAN, others I added in AppGyver. My first idea was use an API to retrieve material description by barcode, and other API to retrieve images by material description. 

 

https://www.barcodelookup.com/api

https://www.nutritionix.com/business/api

https://rapidapi.com/GoodFoods/api/search-grocery-product-reviews-by-barcode

https://rapidapi.com/contextualwebsearch/api/web-search

 

After finishing my prototype I wished a bigger barcode database with more product Images, so I found Open Food Facts API. And while searching for how to use URL replacements in AppGyver, I came across the getting started tutorial mentioned in challenge´s page, that uses this same API. 

At first I was shocked by the coincidence, because I really believed I was creating something new. Even though this tutorial is mentioned on the contest page, I finished my project without having read it. I started my project only with Composer built-in tutorials and found the “getting started tutorial” by chance after finish my project, because I decided to switch from Nutritionix API to Open Food Facts API.

But then I was proud of myself for having managed to create an equivalent solution on my own, with some improvements. The learning curve is different between following a tutorial and intuitively creating the solution on your own. I already feel like a winner in my personal growth.

If I had read this tutorial before doing my project, my motivation to continue with this use case would probably have been affected.

And the target user is different, then this solution might be innovative for this user.

Regarding the logic, the Data Variables looks like SAPUI5 OData Models, and I liked to work with them. The page parameters also looks like SAPUI5 routing and navigation. But I am curious to see how many time non-developers will need to understand the difference between page variables and page parameters.

While playing with logic for Pack, I could see the power the AppGyver has, providing the option to insert your own javascript logic.  And I keep this topic as a topic for further study. I believe i will need to use javascript to create some logics for header-items hierarchy.

Conclusion 

 

The BUILD experience , developer experience and MIT App Inventor experience helped me  to intuitively find the functionalities and understand them, like the different variable types, Input and output parameters, the logic tab, and API management.

But I am curious the see the learning experience of non-developers. I believe it will be necessary to at least have some concept of programming logic to do something other than the very basic.

I really want to learn how to work with loops and indexes in data collections, and do features such as deleting all items in a list with just one button, or deleting only the marked lines.

I noticed that the web version of the app does not open the camera through the browser, both in the Composer preview and in the built website. I think this is a limitation to be adjusted, because the use of the camera by the browser is already common.

I used the style options, but so far the UI looks very simple for a professional application. I may need to explore the component market further to create apps with a more professional UI.

But even so, I realized that the app is a tool that has a future. In the past I chose to delve into SAP Fiori and today I am reaping the rewards. And today I’m going to choose to delve into AppGyver because I believe this tool will be a success!

Source: https://blogs.sap.com/2022/06/02/pack-handling-units-app-using-sap-appgyver-no-code-challenge/