Creating a Library Application using SAP AppGyver-low-code-no-code-challenge

In the previous blog, I have explained how you can use Barcode scanner functionality to scan the barcode of any book to fetch their details using Google API.

For creating this app please refer to my blog

Part 1: https://blogs.sap.com/2022/05/16/isbn-barcode-scanner-using-sap-appgyver/

Part 2: Creating a Library Mobile Application

In this blog, we will learn how we can enhance the app to create a real-time application which can be used in any Library to Issue/ Return books.  This app will have capability to identify the details of any books with the help of barcode scan and anyone with a Library ID can get the book issued in their name or return the same.

Prerequisites:

• Create an AppGyver trial account here.
• SAP AppGyver Preview mobile app can be downloaded from in your App Store.
• Google Firebase for storing Data

Steps for creating the Library Application:

• Create the landing page using Part 1 of this blog series
• Rename the landing page as “Library App Home Page” and title as “Library Application”
• Add a Container and put the title under it. Set the Container layout as Horizontal
• Add an Icon(Refresh) after Title in the container

Please Note: You can edit the existing app and enhance it or create a Copy of the same.

• Create two more pages “Return” and “Issue” respectively
• Navigate to the Variable Window and create the below App Variables:

           bookAuthor: Type(text)

           bookID: Type(text)

           bookName: Type(text)

           libraryID: Type(text)

           issueDate: Type(date/time text)

           returnDate: Type(date/time text)

           variable1: Type(true/false)

• Set the page Background color under Style as “Warning”
• Add a button after Scan Button and name it as Action. Set Style as “Danger Button”
• Click on the Action button and add the below logic for Navigation to Return and Issue respective pages:

• Action Sheet( Can be downloaded from Flow Function Market):
• Under Action sheet options add two custom values

         Label(Return Book): value(return)

         Label(Issue Book): value(issue)

• If Condition: outputs[“Action sheet”].pickedAction.value==”return”
• Click on Scan Barcode button and set Style as “Secondary Button”
• Go the Logic Flow and make the changes as below:

• Set App Variables: bookAuthor, bookName, bookID, variable1 as:

data.GoogleBook1.items[0].volumeInfo.authors[0]

data.GoogleBook1.items[0].volumeInfo. title

data.GoogleBook1.items[0].id

data. GoogleBook1.items[0].volumeInfo.imageLinks.thumbnail

• Visibility:

Set Visibility of Action Button as : IF(appVars.variable1,true,false)

Set Visibility of Scan Button as : IF(appVars.variable1,false,true)

Set Visibility of parent Container as : IF(appVars.variable1,true,false)

Set Visibility of Image as : IF(appVars.variable1,true,false)

• Under Flow logic of the Icon Refresh, set Variable1 as false

 

• Create a project in Google Firebase

Add a Firestore Database as “Books”. Set the collection as books, document as books and add the below fields :

bookID, issueDate, libraryID, returnDate

Add an app of type Android from the Project Overview page.

Under AppGyver, navigate to Data and Add the android app configuration from the Firebase project under connectors.

Add Data Resource as books and add the fields from Firebase as new properties.

Select Global Canvas page, under App Variable logic flow add Initialize Firebase(Can be Installed from Flow Function Market). Connect it from App Launched Event.

 Add a datastore “books” of type Google Firebase/Cloud Firestore

 Navigate to Issue Page and change the title as “Issue Book”

• Set the page background color under Style as “Warning”

• Add another Tile under the above tile and set the content as “Book Details”
• Add three Containers with Layout as Horizontal and add two Text fields in each.
• Set First Text fields in respective Containers as Book Name, Book Author, Book ID
• Map the Second text fields as App Variables “ bookName”, “bookAuthor”, “bookID”

• Add a title below the container and set content as “Enter the below details:”
• Add a container and then add two containers(Say C1 and C2) inside it. Set Layout as Horizontal
• In C1 add two text fields and set content as “Enter Library ID”, “Select Issue Date”
• In C2 add a Input Field, mapped to variable libraryID and Date Field(Can be downloaded from Component Market), map it to variable issueDate

• Add a button and set the Label as Style Secondary Button
• Click on the Issue button and create the below logic flow:

• IF Condition: IF(IS_EMPTY(pageVars.libraryIDPV),true,false) || IF(IS_EMPTY(pageVars. issueDatePV),true,false)

• Alert: Please enter the Library ID and Issue Date
• Create Record:

Resource Name: books

Custom Object: issueDate, libraryID, bookID

           Dialog : Dialog Message: “Do you want to issue the book?”

           Dialog: “Book has been issued

Return to Homepage”

• Navigate to Return Page and change the title as “Return Book”

Set the page background color under Style as “Warning”

Navigate to the Variable Window and create the below Page Variables:

issueDatePV : date/time text

libraryIDPV : text

Add Logic to the page as below:

• Get Record:

Resource Name: books

Id:bookID

• Set variables issueDate and libraryID to the values issueDate and libraryID from the database.

• Add another Tile under the above tile and set the content as “Book Details”
• Add four Containers with Layout as Horizontal and add two Text fields in each.
• Set First Text fields in respective Containers as Book Name, Book Author, Book ID, Library ID
• Map the Second text fields as App Variables “ bookName”, “bookAuthor”, “bookID”, ”libraryID”

• Add a title below the container and set content as “Enter the below details:”
• Add a container and then add two containers(Say C1 and C2) inside it. Set Layout as Horizontal
• In C1 add two text fields and set content as “Issue Date”, “Select Return Date”
• In C2 add an Input Field, mapped to variable issuedatePV and Date Field(Can be downloaded from Component Market), map it to variable returnDate

• For issueDate mapping using formula as FORMAT_DATETIME_LOCAL(pageVars.issueDatePV,”DD.MM.YYYY”)

• Add a button and set the Label as Style Secondary Button
• Click on the Return button and create the below logic flow:

• IF Condition: IF(IS_EMPTY(appVars.returnDate),true,false)
• If True: Dialog à Please select the Return Date
• If False: IF Condition: DATETIME_IS_BEFORE(appVars.returnDate, appVars.issuedate)

• If True: Dialog: Return date cannot be before the Issue date
• If False: Create Record
• Resource Name: books
• Custom Object: issueDate, libraryID, bookID, returnDate

• Dialog : Dialog Message: “Do you want to issue the book?”
• Dialog: “Book has been returned
• Return to Homepage”

Demo Video:

Conclusion:

Creating applications with SAP AppGyver is very easy where instead of worrying about the how part, focus is on what is needed. From a logical thought process to creating a real-time enterprise ready app journey is something I have never witnessed in the past that too without a single line of code.
Welcome again to the world of LCNC(Low Code No Code) !!!!
I truly hope this blog can be useful for some of you. I would be happy to read your thoughts and comments, please leave it in the comment section below.
Also please do follow my profile for similar content.

Happy Learning !!!!!!!

#SAPLowCodeNoCodeChallenge  #SAPAPPGYVER