SAP AppGyver - CRUD Operation with REST API - SAPLowCodeNoCodeChallenge

[former_member15402]

Purpose

This blog is an entry to the #SAPLowCodeNoCode challenge using SAP AppGyver. SAP AppGyver is a very cool tool and any developer can build a fully functional application with almost no-coding.

The link to the challenge - No-Code Challenge: 0% Code, 100% App (and hoodies!) | SAP Blogs

Let's get started.

My Application

AppGyver is a very exciting tool that can be used for rapid application development using ODATA/Rest API. I have developed an application using AppGyver(Just for exploring LowCodeNoCode which does not solve any real life problem ) where I have used multiple components like flow functions, java script, multiple REST API calls for CRUD operation, formulas, all types of variables, navigation and different native capabilities.

Prerequisite for this application

1. AppGyver account – SAP AppGyver community edition


2. Google Firebase Account


3. Open Rest API - mockAPI

Application Flow

• Sign Up Page -

Users need to sign up to the application using the email ID and password as a first step and upon successful sign up, user can login to the application. Here I have used Google Firebase open API for both Sign Up and Sign In functionalities. Firebase Doc reference - Firebase Auth REST API (google.com)

Note - I have not used the AppGyver Google Firebase Authenticator.





Here the following components have been used

• Java script to validate the input parameters


• IF condition is used to check the result from the java script and proceed to the next step.


• After above successful client-side validations, the application will create the user record using POST call to Google firebase REST API.

Upon processing the request, the API will send the response in JSON format and the message will be displayed on the application screen.

• Sign In page –Once the user completes the sign up successfully, the app will redirect to sign in page automatically. In this page, user must provide the email and password used in the previous step to Sign Up. The input will be validated in the client-side using java script and upon successful validation, REST API will be called. In case of error, the response will appear on the screen.

(Note – I have a used a very simple data model – Employee. All the further operations will be on this data model)

• Employee Home Page

This is the first page after login and will display list of existing employees (GET Operation with data variable). Here I have used the scroll view to scroll down the list.

Here the data variable is bound to the list on the screen to repeat and display the entire list.

• Employee Details Page

On click of any row in the above page, the app will navigate to next page to display the employee details. By default, the values will be in read-only mode and the read-only toggle should be disabled to edit the fields.

This page has two buttons i.e., Update Employee – To update the details and Delete Employee – To delete the employee record permanently.

• Create Employee Page

In the Employee Details page, a button added with a link to navigate to Create Employee Page where new employee can be added. In this page, I have used the flow function - device GPS location to get longitude and latitude. Later this value is used in a reverse geolocation API to get the location name. On this screen, I have used another flow function to take a photo using device camera.

This page will create a new employee on with the given details. All fields are mandatory using the java script logic.

My Experience

The overall experience of building the basic app with CRUD operation was super awesome. For this app, I have not written a single line of code, except the java script code. It has many features available in the marketplace. Starting from building the UI styling to consuming the APIs – everything can be developed using the AppGyver composer pro with very minimum coding.

However, it would be great if some more no-code features like back button handling, customized CSS like the JS along with the composer pro styling options available in future. So that developer can design the UI with customized styles.

I have build the application for Android. Here is the android application video -