Northwind App with AppGyver - LCNC Journey

[GK817]

There has been a lot of activity regarding AppGyver during last a few weeks. A lot of blog posts highlighting very interesting and innovative AppGyver applications created by community members under #SAPLowCodeNoCodeChallenge challenge came my way. In addition, a series of blog posts by daniel.wroblewski about his 100 days of LCNC journey is very inspirational. Therefore, to address my FOMO, I decided to create an application myself using AppGyver and find out what is this new buzz all about.

Following Daniel’s MLB Fantasy app, I thought I should create a similar one for IPL. However, unfortunately, I could not find many completely free API resources for the same. I could have created API myself and used response data from some available APIs, but then I decided to focus on the part I want to learn. I decided to use beloved Northwind service. In this blog post, I will share my experience about creating this my very first application using AppGyver.

I wanted to create a read-only application with associations/navigations to more than one level with multiple lists. I wanted to add multiple dynamic behavior, multiple pages, on-device storage (add/remove), navigation between pages, dealing with both collection of records & single records and deployment of application too.

Here is how the app works:

First Page - In the drop-down option, all the product categories are proposed as option. User can choose a category to display products in that category.

There is a checkbox to include ‘Discontinued Products’ also in the displayed products. By default, discontinued products are not shown. Products display area is scrollable while drop-down stays at the top of the screen (only works in mobile).

Product Details: Tapping a product on first page takes user to product details page where all the details related to that product are shown. In the bottom area, all the orders related to this particular product are shown. Orders display area is scrollable in mobile while product details stay at top of the screen. There is also a checkbox to display only the orders where there is no discount applied.

Clicking on an order takes you to the order details page. Order details page has information about products, quantity and discount for that specific order.

 

You can also add product as your favorite using the green button in Product Details page. This info is saved in device memory and would be preserved. Once added as favorite, button would become disabled. For favorite products, button would show disabled, while it would display enabled for non-favorite products.

Favorites - You can go to Favorites page to see list of favorite products. You can also remove a product from favorites by clicking on it. An option to remove it from favorites would be displayed.

 

 

There is another page to show list of all categories with their descriptions.

Here is the video of the application.

During the development of this application, I called multiple OData services using URL parameters and system query options. I created new flow functions and re-used them. I wrote custom java script too. Filtering of information and dynamic behavior at multiple places really helped me understand better, how the flow works and how different functions are used.

APIs to get Products, Categories, Order details etc are part of Northwind service. For on-device storage, I have used ‘On-device storage’ data resource, though there is a good option of using flow function – set item /get item from storage, but it works only for a single item.

This application is available at northwind.appgyverapp.com.

To conclude, I have the nice experience working on this app. It is really easy and smooth to work on once you know component functions and how they work, and there are not many components.

Also, I am aware that, very soon, we will have options to directly access APIs using BTP destinations, thus, avoiding CORS issues (Yes, there are alternatives available). It would be nice to build such an application with on-premise APIs. In addition, seamlessly using HANA DB with AppGyver as front-end tool, I believe, is on the cards.

I hope that features like click and deploy to BTP are available soon too. As its adoption increases, I am sure component marketplace will also blow up. Looking at SAP’s special interest in AppGyver, I am expecting lot of exciting news in coming months.

Let us keep the momentum going. I will be trying more ( practical ) applications using AppGyver. Please provide your thoughts about this app and ideas about more such applications in comments.I also plan to write a further detailed blog post on how this application was created.

To see SAP AppGyver in action, check out the SAP Low-Code/No-Code Learning Journey - designed to increase low-code/no-code skills and teach citizen developers the basic concepts of software development including SAP AppGyver, SAP Process Automation, and SAP Work Flow and learn how to build mobile apps for free. Check out LCNC and much more free learning at SAP Learning site.

I would recommend following SAP Community  - AppGyver to keep yourself updated on the topic:

 

Gaurav Karkara

[vimadaan]

Excellent blog Gaurav. With you writing these blogs I will never feel FOMO

[shantanusharma]

Very helpful. I have configured a destination in BTP for the Northwind service and I am able to successfully create the data entity using this destination. Works like a charm. Your app has inspired me to create something similar as a way to learn SAP Build Apps.

Thanks a lot!