- SAP Managed Tags:
Introduction
AppGyver is SAP’s new platform which helps citizen developers to create No-Code-Low-Code applications. AppGyver and how it is positioned in SAP’s existing portfolio is already covered here. You can also follow the blog, which provides a great introduction to the platform.
Purpose
This blog post is my entry to the SAP Low Code No Code Challenge, wherein I’ll walk you through the steps to connect AppGyver to SAP S/4HANA Cloud and create a simple app by consuming an API from SAP S/4HANA Cloud
My App
The App that is covered in this blog is a simple app, that reads the Purchase Order data from an SAP S/4HANA Cloud System and displays some basic details. This explains, how easy is it is for a citizen developer to consume any API from SAP S/4HANA Cloud to create Side by Side applications on AppGyver using Low-Code-No-Code principles.
My Experience
The visual programming style followed by AppGyver is very easy to learn and once you get a hang of it, you will be able to create an App in no time. You could create validations and prevent unauthorized access etc very easily. It was a fun exercise exploring AppGyver and I look forward to creating more custom application using AppGyver going forward.
Pre-Requisites
You can subscribe to the Low-Code/No-Code service in BTP by following this tutorial. Alternatively, you can also create a trial account here
Setup API Portal Application as explained here
After setting up the pre-requisites, we can start with the steps to create the application
Communication Arrangement and Communication System
Just like exposing any service from an SAP S/4HANA Cloud system, we will need to create a Communication Arrangement and a Communication System to access the service exposed via the Communication Arrangement.
For this use-case we will create a new Communication Arrangement for the Communication Scenario SAP_COM_0053.
You can follow the steps 1-4 from the blog https://blogs.sap.com/2020/12/14/setting-up-an-import-connection-setup-between-sap-s-4hana-cloud-and... which explains how to create a Communication Arrangement and a Communication System.
Now, we have the service https://myxxxxx-api.s4hana.ondemand.com/sap/opu/odata/sap/API_PURCHASEORDER_PROCESS_SRV, which is exposed via a Communication System.
Create an API Proxy from API Portal
Edit 6th July 2022: You can now use BTP destinations to connect to SAP S/4HANA Cloud. This is explained in detail in the blog My first steps with BTP destinations (S/4HANA) in AppGyver
The next step which needs to be performed is to create an API Proxy for this API. When accessing the SAP S/4HANA Cloud API directly from AppGyver, since SAP systems are unable to identify the source, will return a CORS error. The API Proxy can be used to solve this error as explained here
API Portal gives you multiple options to create an API Proxy as explained here
Login to API Portal from SAP Integration Suite in SAP BTP. This will launch the API Portal homepage as shown below
Click on the ‘Discover’ Tab and search for S/4HANA Cloud
Select S/4HANA Cloud and search for Artifact Purchase Order
Select Actions and Click on copy
Enter the details as shown below and click OK
This will create the API proxy
Click on the ‘Develop’ tab to access the API Proxy
Within the API Proxy, maintain the following under the Tab ‘Proxy End Point’
"Route Rule Name:" noroutes
"Route Rule Condition:" request.verb == "OPTIONS" and
"Route Rule Name:" defaultNow, select ‘Policies’ on the top right as shown
Select Proxy Endpoint and Click on ‘+’
Provide the name of the flow as preflight and enter the following in the condition string
request.verb == "OPTIONS"Select PreFlow and click on Assign Message
Give a policy name and select Stream as 'Incoming Request' in the pop-up
Enter the following code to the script
<!-- This policy can be used to create or modify the standard HTTP request and response messages -->
<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
<!-- Sets a new value to the existing parameter -->
<Set>
<Headers>
<Header name="Accept-Encoding">gzip,deflate</Header>
</Headers>
</Set>
<IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
<AssignTo createNew="false" type="request"></AssignTo>
</AssignMessage>Similarly, select PostFlow and click on Assign Message
Give a policy name and select Stream as 'Outgoing Request' in the pop-up
Enter the following code to the Script
<!-- This policy can be used to create or modify the standard HTTP request and response messages -->
<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
<Add>
<Headers>
<Header name="Access-Control-Allow-Origin">*</Header>
<Header name="Access-Control-Allow-Headers">set-cookie, origin, accept, maxdataserviceversion, x-csrf-token, authorization, dataserviceversion, accept-language, x-http-method, content-type, X-Requested-With</Header>
<Header name="Access-Control-Max-Age">3628800</Header>
<Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
<Header name="Access-Control-Expose-Headers">set-cookie, x-csrf-token, x-http-method</Header>
</Headers>
</Add>
<IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
<AssignTo createNew="false" type="response">response</AssignTo>
</AssignMessage>Click on update. Save and Deploy the API Proxy.
Create the Application in Appgyver
Login to AppGyver and click on ‘Create New’ to create a new Application
Provide a name and click on Create
Please note that you will have to click on Save after performing every task going forward.
Login Page
Create a login page for the application, which will use the credentials which were created in the Communication System to access the API via Communication Arrangement.
Drag and Drop 2 Input fields from the left and I have renamed the header as Purchase Order
You can rename this under Properties
Create Page Variables and App variables for the credentials.
Page Variables will capture your input from the Page and you can use App variables to store this while navigating to additional Pages
Click on the toggle button to toggle between view and variables
Add a new App variable with name Credentials and Variable Value Type ‘Object’
Add 3 properties ‘AuthenticationType’, ‘Username’ and ‘Password’
A new property can be added by providing the property name under Add new property and clicking on ‘+’
Similarly, create a new Page Variable Credentials and add the 3 properties ‘AuthenticationType’, ‘Username’ and ‘Password’
Switch back to View, by clicking on the toggle and select the first Input field
Click on the button under Value and select Data and Variables
Select Page Variables and then select Username
This will map the Page Variable Username to the input field, Username
Similarly, map the Page Variable Password to the input field, Password
Now, add a button to the Page for login
Click on the button and select Add Logic to Button1, which will open the event flow
Drag and drop, ‘Set Page Variable’ to the flow and connect the event ‘Component Tap’ to ‘Set Page Variable’
Click on the highlighted field under Variable name and click on Page variable. Set the Page Variable Field as Authentication Type and Click on Save.
Maintain the Assigned field as ‘basic’
Drag and drop, ‘Set app Variable’ to the flow and connect the event ‘Set Page Variable’ to ‘Set app Variable’. Click on the highlighted field under Assigned Value
Select Page Variable under Data variable, select Credentials and click on Save.
This will ensure that the Credentials, that are passed from the UI will be stored as App variables and Save.
Purchase Orders
Click on ‘Login’ to go to Page Overview and Click on Add New Page
Provide a name and click on OK
Click on the button, and select Add Logic to Button1, which will open the event flow
Drag and drop, ‘Open app’ to the flow and connect the event ‘Set app variable’ to ‘Open page’
Click on the highlighted button below ‘Page’ and set the Page ID as ‘Purchase Orders’ and save
Now, on login, the ‘Purchase Orders’ page will be opened
Go back to the Purchase Orders page by selecting ‘Login’ and then choose ‘Purchase Orders’
Rename the Header Field and Drag and Drop a List item to the page and rename the Primary Label.
Now, we will have to add a Data Resource to fetch data from the SAP S/4HANA Cloud system
Select ‘Data’ from top centre and click on ‘Add Data Resource’
Select ‘Odata Integration’
Choose Authentication Type as Basic Authentication and Credentials as the username and password for the Communication System and the Base URL as the URL of the API Proxy which was created in the earlier step.
Click on verify URL to fetch the API metadata and select the required Entity
Select A_PurchaseOrder click on Save Data resource
Close the Data resource page to return to Purchase Orders Page
Click on the toggle button to toggle between view and variables
Under Data Variables, select Add Data Variable and select A_PurchaseOrder
Click on the ‘X’ Button Under Basic Authentication and Select ‘Mapping’
Click on the ‘X’ button under Source Data and Select ‘Data and Variables’
Then select Page Variable and Credentials and click on Save
In the next popup, map the variables as shown and Save
This will ensure that the data fetch from SAP S/4HANA Cloud will be strictly based on the input from Page 1.
Now click on the toggle button to toggle between view and variables.
Select the Purchase Order Label and click the highlighted button as shown below.
Select the data variable A_PurchaseOrder1 and click on Save
Now click on the highlighted button under Primary Label
Select binding type as data item in repeat. Select repeat as current and select the data repeat property as Purchase Order and click on save
Purchase Order Details
Create a new page to display purchase order details.
Like the previous steps, create a new Page called Purchase Order Details, by clicking on Add New
Toggle to the variables, and create a new App Variable, Details, with the following fields
Toggle back to the app view and new Text fields for the fields created in App variables and bind them to the app variable as explained in the previous steps
Now, go back to the ‘Purchase Orders’ page, and click on the list item
Click on Show logic for ‘List Item1’ to open the event flow
This will open the event flow.
Drag and drop, ‘Open Page’.
Connect the event ‘Component Tap’ to the navigation ‘Open Page’ and bind the Navigation to the page ‘Purchase Order Details’
Drag and Drop the variable, ‘Set App variable’
Connect the navigation ‘Open Page’ to the variable ‘Set App Variable’.
Click on the highlighted field under Variable name and select the binding type as ‘App variable’
Select the app variable as company code and click on save
Click on the highlighted field under the variable assigned value and select the binding type as ‘Data Item in Repeat’
Select ‘company code’ and click on save
After mapping one field, the flow will look as follows
Similarly, map the remaining fields under details. After mapping the flow will look as follows
Save the application
Click on launch from top center
Click open app preview portal
This will open the Appgyver dashboard. Select your application and click on open
This will launch the Purchase Order app.
Enter the credentials to login to view the list of Purchase Orders and Drill down to view the details
Thus, we have created an Application on AppGyver using Low-Code/No-Code Concepts. Do try this out and create custom applications via the NCLC flavour. Feel free to add Validation checks and additional buttons and use different services to try this out.
4 Comments
