Hello Everyone :
This blog post is my entry to the SAP Low Code No Code Challenge where I would like to share my experience on working with LCNC Tool SAP AppGyver.
I had already developed a simple app which gets Covid Data via Public REST API based on selected country from drop down and displays the numbers on screen which gave me a basic understanding of how SAP AppGyver works, I wanted to push and challenge myself to exploit this tool a little more.
I decided to build a basic prototype for an Employee App - wherein the Employee will Login and he can view his profile, apply for a leave, see his leave history and also scan a QR code to register his Entry Time ( I wanted to try out the QR Code functionality to be honest ).
I used a Firestore DB for storing data. Working with Firestore DB was an added bonus to my list of learnings through this competition. Also building an APK file using Keytool was a new experience.
Being an ABAPer, I decided to go with the Fiori Theme and keep it simple.
Link to the App : Employee App
APK File Link for the App ( As there are some bugs on the Web App Build ) : APK File
Below is a video which takes you through the app - all the screens and its functionality.
Building this App was fun and I was amazed at the functionalities provided by this tool. Initially, I thought it to be just an other 'drag & drop' tool through which we can achieve only 30-40% development of an App - mainly UI and Navigation. But this tool has a lot of potential and we can easily build 100% full-fledged working app.
I found the UI to be very user-friendly. Of course, it would take a while to understand where the variables can be stored, configure data resources, build flow logic. But once you get a hang of it, its a smooth sail. It was easy for me to understand and configure the REST APIs and use them in the Flow Logic.
I can just take you through the screens and my learnings developing each of them :
a. Login Page
This is the landing page for my App. Its a simple page with just a text, image, input and a button.
I wanted to disable the Navigation Menu for this page. I learnt how to Enable the Authentication and replace the Initial View with this Page in the Auth tab, to achieve this requirement.
I have used IS_EMPTY() formula to check for blank Employee ID and when Employee ID is entered, it would fetch the corresponding records from Firestore DB and set the App Variables or EmpID, EmpName and EmpImage.
b. Employee Homepage
This will be the Homepage once the Employee logs in. The Image and the Employee Name is mapped to the App Variable that was set in the previous screen. Explored the settings to display circular shape for the Image. I have also used the element 'List Item' to display the 4 options which looked better in terms of UI/UX.
The logic for each option is simple, which is open the corresponding pages, except for Scan to Login' which I would discuss later in the post. The logout button would just return to Initial View.
c. Employee Profile
The page displays the Employee Details with his Picture.
I have retrieved all details on 'Page Mounted' event and displayed them on the screen.
d. Apply Leave
This provides user with the From Date and To Date and Reason Field to apply for the leave.
I bound the Content field of the Text field displaying Number of Days to Formula to calculate the Total Number of Days to change as per Date Selected by the Employee.
Apply Leave Button trigger a HTTP Request Logic (installed from Flow Function Market ) with POST request with the Request Body containing all the details in JSON format to be stored in the Firestore DB and navigates back to the 'Employee Homepage'.
e. Leave History
The page shows the Leave History for an Employee - fetched from the database.
I have used Card element to hold all the information for particular Leave. I have used Formula for the Content and concatenated all information separated by new line and also used Nested Formula to set the Date Format and Total Number of Days field.
I have bound the Repeated With property with Formula to bind with LeaveDetail Data Variable and sort the Cards by "Applied On" value which is bound to "createTime" field provided by Firestore DB when Record is inserted so I did not have to create a separate field for Applied On in the DB. This would list all the Leave Details sorted by Applied On.
f. Scan to Login
I wanted to use the QR Code element and thought to use it to register the Entry Time of Employee.
As I would not get current time and date directly from a QR Code, I found a REST API which returns me the current time and date and generated the QR Code for the REST API link. On scanning, I would get the link from QR Code, call the API and am displaying the values returned from the API on the screen.
This kind of summarizes my experience and learning throughout this challenge. I would certainly thank the AppGyver Community Forum, where I could find all the answers to 100s of questions I came across. A dedicated forum indeed helps.
The app is just a basic prototype and still has some bugs, missing validations ( I have not validate the From Date/To Date and taken into account weekends), I have duplicate API calls at some places. Would certainly look forward to develop for real-world Business Use cases with integration with SAP On-Premise / SAP BTP, complete with authentication and authorization.
There wasn't anything I can complain about but would really like out-of-box Layout Options, Page Layouts like Master Detail Page, Object Page, etc (not sure if we can achieve it in current version), more UI elements and fix for existing elements ( Date Picker 😉 ).
Also, I faced inconsistent behavior between Web App and Mobile App - Some UI elements do not work as expected one either Mobile or Web App (eg Date Picker), navigation issues are there - If I navigate via selecting the options on Homepage, corresponding Navigation icons are not highlighted on Mobile App but works perfectly on Web App and currently the Header of my Pages doesn't seem to change when I navigate on the after building Web App but works perfectly on Mobile App. Hopefully these are resolved soon.
Also the tool is kind of addictive and you would surely want to play around with it the whole day !! 😄
Purpose
This blog post is my entry to the SAP Low Code No Code Challenge where I would like to share my experience on working with LCNC Tool SAP AppGyver.
My App
I had already developed a simple app which gets Covid Data via Public REST API based on selected country from drop down and displays the numbers on screen which gave me a basic understanding of how SAP AppGyver works, I wanted to push and challenge myself to exploit this tool a little more.
I decided to build a basic prototype for an Employee App - wherein the Employee will Login and he can view his profile, apply for a leave, see his leave history and also scan a QR code to register his Entry Time ( I wanted to try out the QR Code functionality to be honest ).
I used a Firestore DB for storing data. Working with Firestore DB was an added bonus to my list of learnings through this competition. Also building an APK file using Keytool was a new experience.
Being an ABAPer, I decided to go with the Fiori Theme and keep it simple.
Link to the App : Employee App
APK File Link for the App ( As there are some bugs on the Web App Build ) : APK File
Note : The Date Picker Element seems to have a bug on the Web App and hence, the Apply Leave screen will not work on the Web App correctly.
Below is a video which takes you through the app - all the screens and its functionality.
My Experience
Building this App was fun and I was amazed at the functionalities provided by this tool. Initially, I thought it to be just an other 'drag & drop' tool through which we can achieve only 30-40% development of an App - mainly UI and Navigation. But this tool has a lot of potential and we can easily build 100% full-fledged working app.
I found the UI to be very user-friendly. Of course, it would take a while to understand where the variables can be stored, configure data resources, build flow logic. But once you get a hang of it, its a smooth sail. It was easy for me to understand and configure the REST APIs and use them in the Flow Logic.
I can just take you through the screens and my learnings developing each of them :
a. Login Page
This is the landing page for my App. Its a simple page with just a text, image, input and a button.
I wanted to disable the Navigation Menu for this page. I learnt how to Enable the Authentication and replace the Initial View with this Page in the Auth tab, to achieve this requirement.
I have used IS_EMPTY() formula to check for blank Employee ID and when Employee ID is entered, it would fetch the corresponding records from Firestore DB and set the App Variables or EmpID, EmpName and EmpImage.
Login Flow
b. Employee Homepage
This will be the Homepage once the Employee logs in. The Image and the Employee Name is mapped to the App Variable that was set in the previous screen. Explored the settings to display circular shape for the Image. I have also used the element 'List Item' to display the 4 options which looked better in terms of UI/UX.
The logic for each option is simple, which is open the corresponding pages, except for Scan to Login' which I would discuss later in the post. The logout button would just return to Initial View.
c. Employee Profile
The page displays the Employee Details with his Picture.
I have retrieved all details on 'Page Mounted' event and displayed them on the screen.
d. Apply Leave
This provides user with the From Date and To Date and Reason Field to apply for the leave.
I bound the Content field of the Text field displaying Number of Days to Formula to calculate the Total Number of Days to change as per Date Selected by the Employee.
Apply Leave Button trigger a HTTP Request Logic (installed from Flow Function Market ) with POST request with the Request Body containing all the details in JSON format to be stored in the Firestore DB and navigates back to the 'Employee Homepage'.
RequestBody of HTTP Request
e. Leave History
The page shows the Leave History for an Employee - fetched from the database.
I have used Card element to hold all the information for particular Leave. I have used Formula for the Content and concatenated all information separated by new line and also used Nested Formula to set the Date Format and Total Number of Days field.
I have bound the Repeated With property with Formula to bind with LeaveDetail Data Variable and sort the Cards by "Applied On" value which is bound to "createTime" field provided by Firestore DB when Record is inserted so I did not have to create a separate field for Applied On in the DB. This would list all the Leave Details sorted by Applied On.
f. Scan to Login
I wanted to use the QR Code element and thought to use it to register the Entry Time of Employee.
As I would not get current time and date directly from a QR Code, I found a REST API which returns me the current time and date and generated the QR Code for the REST API link. On scanning, I would get the link from QR Code, call the API and am displaying the values returned from the API on the screen.
This kind of summarizes my experience and learning throughout this challenge. I would certainly thank the AppGyver Community Forum, where I could find all the answers to 100s of questions I came across. A dedicated forum indeed helps.
The app is just a basic prototype and still has some bugs, missing validations ( I have not validate the From Date/To Date and taken into account weekends), I have duplicate API calls at some places. Would certainly look forward to develop for real-world Business Use cases with integration with SAP On-Premise / SAP BTP, complete with authentication and authorization.
There wasn't anything I can complain about but would really like out-of-box Layout Options, Page Layouts like Master Detail Page, Object Page, etc (not sure if we can achieve it in current version), more UI elements and fix for existing elements ( Date Picker 😉 ).
Also, I faced inconsistent behavior between Web App and Mobile App - Some UI elements do not work as expected one either Mobile or Web App (eg Date Picker), navigation issues are there - If I navigate via selecting the options on Homepage, corresponding Navigation icons are not highlighted on Mobile App but works perfectly on Web App and currently the Header of my Pages doesn't seem to change when I navigate on the after building Web App but works perfectly on Mobile App. Hopefully these are resolved soon.
Also the tool is kind of addictive and you would surely want to play around with it the whole day !! 😄
- SAP Managed Tags:
4 Comments
