Integrating SAP AppGyver with SAP Commissions – PART 1

 

The SAP’s AppGyver is a low code platform which allows you to build apps with limited to no coding.  For more information on SAP’s AppGyver please refer to the below links:

https://blogs.sap.com/2021/03/17/appgyver-a-new-joy-to-build-apps/

https://developers.sap.com/mission.appgyver-low-code.html

Use case:

In this blog I’ll be showing you how you can build a simple app using SAP’s AppGyver to fetch commission information from SAP’s Commissions using REST APIs.

Prerequisites:

1. SAP Business Technology Platform(BTP) Account
2. SAP Cloud Foundry CLI
3. SAP AppGyver Account. There are two options. You can either go to https://www.appgyver.com/ and create your account or go through this tutorial  :https://developers.sap.com/tutorials/appgyver-subscribe-service.html which will help you get your subscription to appgyver on SAP Business Technology Platform.
4. SAP Commissions user with RestAPI Basic Authentication. I have used the sandbox tenant for this use case.
5. A code editor (Eg: Visual Studio Code)

The blog post will be divided into 3 sections:

1. Creating a python app to make REST API calls
2. Host app in SAP BTP
3. Create app using AppGyver

Below is the high level architecture for our example:

 

Creating a python app to make REST API calls

Below is the python app that interacts with SAP Commissions. Copy the below python code and save the file as App.py in your desired local directory.

Please note: As you can see in the below code, the CORS issue was addressed using the flask_cors package.

from flask import  Flask, request, make_response, jsonify
import requests
import json
import os
from flask_cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

url = <commissions tenant url>
cf_port = os.getenv("PORT")
user = <username>
password=<password>
def get_request(base_url, headers):
    r = requests.get(base_url ,headers=headers, auth=(user,password)) 
    data = json.loads(r.text)
    return data

@app.route('/webhook/<position>/<period>',methods=['GET'])
@cross_origin()
def webhook(position,period):
  
    if (request.method == 'GET'):
        base_url = url+"/api/v2/positions?$filter=name eq "+position
        headers = {'Content-Type': 'application/json', 'Accept':'application/json'}
        pos_data=get_request(base_url,headers)
        print(pos_data)
        ruleElementOwnerSeq =pos_data['positions'][0]['ruleElementOwnerSeq']
        base_url = url+"/api/v2/periods?$filter=name eq "+ period 
        headers = {'Content-Type': 'application/json', 'Accept':'application/json'}
        period_data=get_request(base_url,headers)
        periodSeq=period_data['periods'][0]['periodSeq']
        base_url = url+"/api/v2/payments?$filter=period eq "+ periodSeq + " and position eq "+ ruleElementOwnerSeq
        headers = {'Content-Type': 'application/json', 'Accept':'application/json'}
        payments=get_request(base_url,headers)
        final_payment=payments['payments'][0]['value']
        return jsonify(final_payment)
        #/AG00019/"January 2020"


if __name__ == '__main__':
	if cf_port is None:
		app.run(host='0.0.0.0', port=5000, debug=True)
	else:
		app.run(host='0.0.0.0', port=int(cf_port), debug=True)

Please note that you have to provide your SAP commission tenant’s url and credentials(basic auth with rest api user) in the App.py file before pushing this app to SAP BTP.

In order to deploy this app to SAP BTP you will need 4 other files along with the App.py file.

1. Procfile
2. manifest.yaml
3. requirements.txt
4. runtime.txt

All of these files will have to be saved in the same directory as the App.py file.

Save the below as Procfile

web: python App.py

Save the below as manifest.yaml

applications:
- name: testAppgyver
  random-route: true
  memory: 128M
  command: python App.py

 

Save the below as requirements.txt.

Flask
requests
flask_cors

 

Save the below as runtime.txt

3.x

 

Host app in SAP BTP

Go to the directory/folder where you have saved the above files using your command line or code editor(like VS Code) and login to your CF using your email id and password using the below command

cf login

Push the app to SAP BTP using the below command

cf push testAppgyver

Once successfully hosted, you can login to your SAP BTP cockpit and check if the app is up and running.

Once the app is deployed successfully you should get an Application route url, copy this. We will be using this when we create our app in SAP’s AppGyver.

Create app in SAP AppGyver

Create a new app and add the required UI components as shown in the below video.

Next let us add the Data Resource for this App. We will be using the REST API Data Resource. Follow the steps provided in the below video to set up the data resource.

Please note the following before watching the video

• The Resource URL will be the Application route URL that was generated when you deployed the app in SAP’s Business Technology Platform.
• Setup the BASE, GET RECORD (GET) as shown in video
• Make sure you have a valid position name and a period name handy which has a payment value from your commission tenant. You will need this to set the schema response

 

Next step is to setup the variables. The below video will show you how you need to setup the App and the Data Variables. For this you will need to switch the view to variables.

 

 

Now that we have our data resources and variables setup it is time to add functionalities to each of the components in our UI and your app should be ready. The formula to be used for Paragraph 1 in Container 2 has been shared below for your reference.

IF(!IS_EMPTY(data.Payment.value) , "$"+data.Payment.value, "")

You can add some images and makes changes to the styling of your UI to make it a little more appealing. You can now access the app using your mobile. For this you will have to download the app from AppStore or PlayStore depending on whether you use and Android or iPhone.

Login using your credentials or use the Scan QR Code option in the Launch section shown below

 

This is how my final app looks like after adding some styling and images.

 

 

Conclusion:

We were able to successfully build a simple app using SAP’s Appgyver which can fetch the payment information from SAP’s Commissions. The data processing and data exchange between SAP’s Appgyver and SAP’s Commissions was achieved using a python-flask app which was hosted on SAP’s Business Technology Platform.

Coming soon….

In this part we have hard coded a position and period name into the App Variable list we have created. In PART-2, I will show you how we can get more than one position and period name from SAP Commissions and have them all available in the dropdown list.

Please drop in your comments, questions if any and also share your feedback.

Thanks for reading and happy learning.