Enterprise Resource Planning Blogs by SAP
Get insights and updates about cloud ERP and RISE with SAP, SAP S/4HANA and SAP S/4HANA Cloud, and more enterprise management capabilities with SAP blog posts.
cancel
Showing results for 
Search instead for 
Did you mean: 
PrasanthPadmanabhan
Product and Topic Expert
Product and Topic Expert
1,915

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:" default

 

Now, 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


Now, go back to the Start Page by selecting ‘Purchase Orders’ and then choose ‘Login’



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