Learn how to configure a new AppGyver app that allows you to upload screenshots or scans of Covid vaccination certificates to your CAP OData service. After successful validation of the certificate, the app will display the validity date and status retrieved by your service.
-
Go to your SAP BTP Subaccount and subscribe to the SAP AppGyver service offering.
-
Open SAP AppGyver from your SAP BTP Subaccount.
-
Create a new SAP App Gyver project and call it e.g. CovidChecker.
-
Switch to the Auth tab of your project and add Authentication.
-
Follow the screenshot details.
-
Follow the screenshot details.
-
Once Authentication is activated, you will see that the Log In page is loaded for authentication as it is defined as Initial View.
-
Change the name of the initial view by switching to the page editor and selecting the Log In page. Change the page name to OAuth. Save your changes of required.
-
Remove the default content of the Log In page and then open the Component Marketplace to add a new component.
-
Follow the screenshot details to add the WebView component.
-
Follow the screenshot details.
-
Drop a new WebView component to the canvas.
-
Save your changes and switch back to the Auth tab of your project. You will see that the name of the initial view has changed as you've changed the name of your page.
-
Before you setup the navigation, rename the initial Empty page which was created by SAP AppGyver automatically. Therefore switch to the page overview and select the Empty page.
-
Change the page name to Office Access - Covid Check and save your changes.
-
Switch to the Navigation tab and modify the existing Built-In Navigation. Change the icon and tab name of the existing page as displayed in the screenshots.
Hint: The icon used in this tutorial can be found by searching for superpowers in the icon library.
Apply the SAP Fiori theme to your project in the Theme tab of SAP AppGyver. Details can be found in the screenshot.
Your SAP AppGyver app will need a variety of variables to store information like access tokens or business data.
-
To add these variables, first open the Office Access - Covid Check page and change the toggle in the top right from View to Variables. Start adding the required App Variables as you can see in the screenshots.
-
Create two page variables required for the current page as you can see in the following screenshot.
-
Save your changes and switch to the OAuth page which requires some more page variables. Create them as visible in the screenshot and save your changes again.
-
Open the OAuth page and follow the screenshot details.
-
Modify the general page settings as visible in the following screenshots.
-
Modify the WebView component settings as visible in the following screenshots.
Hint: A preview value does not need to be set!
-
Being on the OAuth page, open the SAP AppGyver logic section in the bottom of the screen. This is where you will configure the logic applied when the OAuth page is loaded.
-
Please add the following components to your logic flow and connect them as depicted, before you start with the individual component configurations.
# Type Feature 1 Event Page mounted 2 View Hide spinner 3 Storage Get item from storage 4 Utility If condition 5 Storage Get item from storage 6 Variables Set app variable 7 Data HTTP request 8 Variables Set app variable 9 Storage Set item to storage 10 Storage Set item to storage 11 Navigation Dismiss initial view 12 JS Java Script 13 Variables Set page variable 14 Variables Set page variable #1 Event - Page mounted
#2 View - Hide spinner
#3 Storage - Get item from storage
#4 Utility - If condition
If-Condition: IF(DATETIME_DIFFERENCE(DATETIME(NOW("")), DATETIME(outputs["Get item from storage"].item), "seconds")<7776000, true, false)
#5 Storage - Get item from storage
#6 Variables - Set app variable
#7 Data - HTTP request
URL (Formula): "https://<<SAP IAS url e.g. sap.accounts.ondemand.com>>/oauth2/token?grant_type=refresh_token&client_id=<<app registration client id e.g. 0df641d4-1234-abcd-5678-06eaec363780>>&refresh_token="+appVars.auth.refreshToken
#8 Variables - Set app variable
authToken: STRING(outputs["HTTP request"].resBodyParsed.access_token)
expiresIn: STRING(outputs["HTTP request"].resBodyParsed.expires_in)
idToken: STRING(outputs["HTTP request"].resBodyParsed.id_token)
refreshToken: STRING(outputs["HTTP request"].resBodyParsed.refresh_token)
#9 Storage - Set item to storage
#10 Storage - Set item to storage
#11 Navigation - Dismiss initial view
#12 JS - Java Script
JavaScript Code: Click here (Please check the licenses of the polyfills used!)
#13 Variables - Set page variable
#14 Variables - Set page variable
Web URL (Formula): "https://<<SAP IAS url e.g. sap.accounts.ondemand.com>>/oauth2/authorize?client_id=<<app registration client id e.g. 0df641d4-1234-abcd-5678-06eaec363780>>&scope=openid&code_challenge="+outputs["Get PKCE parameters"].challenge+"&code_challenge_method=S256&redirect_uri=http://localhost/&response_type=code"
-
Being on the OAuth page, open the SAP AppGyver logic section in the bottom of the screen. This is where you will configure the logic applied when the user authenticated using SAP Identity Authentication service.
-
Please select the Web View component in your canvas, add the following components to your logic flow and connect them as depicted, before you start with the individual configurations.
# Type Feature 1 Event Component onLocationChange 2 JS JavaScript 3 Utility If condition 4 Variables Set app variable 5 Navigation Dismiss initial view 6 Data HTTP request 7 Variables Set app variable 8 Variables Set app variable 9 Storage Set item to storage 10 Storage Set item to storage 11 Variables Set app variable 12 Variables Set app variable #1 Event - Component onLocationChange
#2 JS - JavaScript
JavaScript Code:if(inputs.input1.url.includes('localhost/?code')){ var code = inputs.input1.url.split('code=')[1].split('&state')[0]; return { code : code, codeAvailable: true } }else{ return { codeAvailable: false } }
#3 Utility - If condition
#4 Variables - Set app variable
#5 Navigation - Dismiss initial view
#6 Data - HTTP request
#7 Variables - Set app variable
Value: STRING(outputs["HTTP request"].resBodyParsed.access_token)
#8 Variables - Set app variable
Value: STRING(outputs["HTTP request"].resBodyParsed.refresh_token)
#9 Storage - Set item to storage
#10 Storage - Set item to storage
#11 Variables - Set app variable
Value: STRING(outputs["HTTP request"].resBodyParsed.id_token)
#12 Variables - Set app variable
Value: STRING(outputs["HTTP request"].resBodyParsed.expires_in)
-
Being on the Office Access - Covid Check page, open the SAP AppGyver logic section in the bottom of the screen. This is where you will configure the logic applied when the content page is loaded.
-
Please add the following components to your logic flow and connect them as depicted, before you start with the individual component configurations.
# Type Feature 1 Event Page mounted 2 Storage Get item from storage 3 Variables Set app variable 4 Storage Get item from storage 5 Variables Set app variable 6 Data HTTP request 7 Variables Set page variable 8 View Hide spinner 9 Event App variable 'auth' changed 10 Event Page focused 11 Utility If condition #1 Event - Page mounted
#2 Storage - Get item from storage
#3 Variables - Set app variable
Country (Formula): outputs["Get item from storage"].item.country
Name (Formula): outputs["Get item from storage"].item.name
Photo (Formula): outputs["Get item from storage"].item.photo
ValidUntil (Formula): outputs["Get item from storage"].item.validUntil
#4 Storage - Get item from storage
#5 Variables - Set app variable
Message (Formula): outputs["Get item from storage"].item.message
Status (Formula): outputs["Get item from storage"].item.status
UploadTime (Formula): outputs["Get item from storage"].item.uploadTime
#6 Data - HTTP request
URL: https://<<CAP service endpoint e.g. sap-dev-covidapp-srv.cfapps.eu10.hana.ondemand.com>>/rest/verification/getAvailableCountries
#7 Variables - Set page variable
Value: outputs["HTTP request"].resBodyParsed
#8 View - Hide spinner
#9 Event - App variable 'auth' changed
#10 Event - Page focused
#11 Utility - If condition
Condition (Formula): IS_NULLY(appVars.auth.idToken)
-
Being on the Office Access - Covid Check page, open the view design canvas. This is where you will configure the logic applied when the content page is loaded.
-
Please add two containers to your canvas.
#1 Container - Certificate
#2 Container - Upload
-
Please add the following components to your view design canvas and set the individual component configurations. Not all items (e.g. plain text fields) are described in detail.
#1 Title
#2 Title
#3 Image
#4 Text
#5 Text
#6 Text
Visible (Formula): NUMBER(appVars.certificate.validUntil) >= NUMBER(NOW("YYYYMMDD"))
#7 Text
Visible (Formula): NUMBER(appVars.certificate.validUntil) < NUMBER(NOW("YYYYMMDD"))
#8 Text
-
Please add the following components to your view design canvas and set the individual component configurations. Not all items (e.g. plain text fields) are described in detail.
#1 Text
#2 Dropdown
Option list (Formula): MAP(SORT(pageVars.countries, "asc"), { label: item, value: item})
#3 Button
Label (Formula): IF(appVars.upload.status === 'PENDING', "Processing...", "Select screenshot")
Disabled (Formula): appVars.upload.status === 'PENDING' || IS_EMPTY(pageVars.selectedCountry)
#4 Button
Label (Formula): IF(appVars.upload.status === 'PENDING', "Processing...", "Scan certificate")
Disabled (Formula): appVars.upload.status === 'PENDING' || IS_EMPTY(pageVars.selectedCountry)
#5 Text
#6 Text
Content (Formula): appVars.upload.uploadTime + ' - ' + appVars.upload.status
#7 Text
Content (Formula): appVars.upload.message
-
Being on the Office Access - Covid Check page, open the SAP AppGyver logic section in the bottom of the screen. This is where you will configure the logic applied when the content page is loaded.
-
Please select the Scan certificate button in your canvas, add the following components to your logic flow and connect them as depicted, before you start with the individual configurations.
# Type Feature 1 Event Component tab 2 Device Scan QR/barcode 3 Variables Set app variable 4 Data HTTP request 5 Variables Set app variable 6 Storage Set item to storage 7 Variables Set app variable 8 Variables Set app variable 9 Variables Set app variable 10 Storage Set item to storage #1 Event - Component tab
#2 Device - Scan QR/barcode
3 Variables - Set app variable
4 Data - HTTP request
URL: https://<<CAP service endpoint e.g. sap-dev-covidapp-srv.cfapps.eu10.hana.ondemand.com>>/rest/verification/decodeCertificateString
5 Variables - Set app variable
Country (Formula): outputs["HTTP request"].resBodyParsed.country
Name (Formula): outputs["HTTP request"].resBodyParsed.name
Photo (Formula): outputs["HTTP request"].resBodyParsed.photo
ValidUntil (Formula): outputs["HTTP request"].resBodyParsed.validUntil
6 Storage - Set item to storage
7 Variables - Set app variable
Message (Formula): outputs["HTTP request"].resBodyParsed.message
UploadTime (Formula): NOW('DD-MM-YYYY HH:mm:ss')
8 Variables - Set app variable
Message (Formula): outputs["HTTP request"].resBodyParsed.error.message
Status (Formula): outputs["HTTP request"].resBodyParsed.error.code
UploadTime (Formula): NOW('DD-MM-YYYY HH:mm:ss')
9 Variables - Set app variable
UploadTime (Formula): NOW('DD-MM-YYYY HH:mm:ss')
10 Storage - Set item to storage
-
Please select the Upload certificate button in your canvas, add the following components to your logic flow and connect them as depicted, before you start with the individual configurations.
# Type Feature 1 Event Component tab 2 Media Pick image from library 3 Variables Set app variable 4 Media Convert to base64 5 Data HTTP request 6 Variables Set app variable 7 Storage Set item to storage 8 Variables Set app variable 9 Variables Set app variable 10 Variables Set app variable 11 Storage Set item to storage #1 Event - Component tab
#2 Media - Pick image from library
3 Variables - Set app variable
4 Media - Convert to base64
5 Data - HTTP request
URL: https://<<CAP service endpoint e.g. sap-dev-covidapp-srv.cfapps.eu10.hana.ondemand.com>>/rest/verification/decodeQrCode
6 Variables - Set app variable
Country (Formula): outputs["HTTP request"].resBodyParsed.country
Name (Formula): outputs["HTTP request"].resBodyParsed.name
Photo (Formula): REPLACE_ALL(REPLACE_ALL(REPLACE_ALL(outputs["HTTP request"].resBodyParsed.photo, "\r\n", ""),"_", "/"), "-", "+")
ValidUntil (Formula): REPLACE_ALL(outputs["HTTP request"].resBodyParsed.validUntil, "-", "")
7 Storage - Set item to storage
8 Variables - Set app variable
Message (Formula): outputs["HTTP request"].resBodyParsed.message
UploadTime (Formula): NOW('DD-MM-YYYY HH:mm:ss')
9 Variables - Set app variable
Message (Formula): outputs["HTTP request"].resBodyParsed.error.message
Status (Formula): outputs["HTTP request"].resBodyParsed.error.code
UploadTime (Formula): NOW('DD-MM-YYYY HH:mm:ss')
10 Variables - Set app variable
UploadTime (Formula): NOW('DD-MM-YYYY HH:mm:ss')
11 Storage - Set item to storage
You can launch your app initially from the Launch tab. Therefore we recommend using the SAP AppGyver app which is available in the Google Play or Apple AppStore. Just scan the QR code and the app will start on your device.
If you want to get the full picture about the entire sample app, please read the corresponding blog post.