Simple application to read Purchase Order details ...

PrasanthM · ‎05-13-2022

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.