Technical Articles
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:
- SAP Business Technology Platform(BTP) Account
- SAP Cloud Foundry CLI
- 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.
- SAP Commissions user with RestAPI Basic Authentication. I have used the sandbox tenant for this use case.
- A code editor (Eg: Visual Studio Code)
The blog post will be divided into 3 sections:
- Creating a python app to make REST API calls
- Host app in SAP BTP
- 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.
- Procfile
- manifest.yaml
- requirements.txt
- 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
cf login
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.
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.
Excellent Deepan Shanmugam Chandrasekar !
Well explained how to integrate with Appgyver and much awaiting for your next blog ...
What was the need of Python app in the middle when AppGyver has capabilities to call Rest API directly, Could you please elaborate the use case a little further?
Thanks.
True, Appgyver can call REST API directly. For my use case however, I want the json file to be returned in a certain format, so all of this formatting and parsing is handled in a python script.
Good one !!
Has anyone tried using Appgyver to call directly Commissions REST API?
Am getting CORS error. No issue via POSTMAN.
Hello Eric,
the flask_cors package that you see in the python script was specifically used to address this issue