[SAP-Appgyver] – CREATE MOBILE APP WITH SAP APPGYVER AND INTEGRATE CHAT BOT

Hi guys, in this artcile I want to share end to end How to …? which combine..

SAP Appgyver
SAP API Management
SAP Conversational AI

Active service API_PURCHASEORDER_PROCESS on S/4 HANA

In this step, we will active service API_PURCHASEORDER_PROCESS of S/4 HANA on-premise. To do this we use T-Code : SEGW

/sap/opu/odata/sap/API_PURCHASEORDER_PROCESS_SRV/?$format=json

CONFIGURATION SAP CLOUD CONNECTOR

CREATE DESTINATION CONNECT FROM SAP BTP TO ON-PREMISE

In this step we will create and configuration destination to connect from SAP BTP to S/4 HANA On-premise. And after that SAP Appgyver will be use this destination. For SAP Appgyver use this destination we have to add properties in destination as

HTML5.DynamicDestination	true
WebIDEEnabled	true
sap-client	<sap client on-premise>
WebIDESystem	Gateway
WebIDEUsage	odata_abap, dev_abap

Whatever you do, remember to define the following properties for the destination (without them they won’t appear in AppGyver)

CONFIGURATION API MANAGEMENT FOR CORS ISSUE

Everytime active service by SEGW in backend (On-premise or public cloud), service will be added into catalogservice of IWFND

/sap/opu/odata//IWFND/CATALOGSERVICE;v=2/ServiceCollection

So, in API management, we will create API Provider from here

HOW TO FIX ISSUE CORS BY USING API MANAGEMENT

preflight

With method of request is “OPTIONS” then policy “preflight” will be trigger

<!-- 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>
            <!-- Set up this header, however if you come across to this error: " 'Access-Control-Allow-Origin' header contains multiple values, but only one is allowed when executing the test on Build Apps ", then remove it and try it again: <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, apikey,username,password</Header>
               <Header name="Access-Control-Allow-Origin">*</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>

NOTE

if request api have header then you have to add all header into AssignMessage

All done, test on SAP AppGyver we will see request

Although status is CORS issue but we should be take a look on status code. In this time, status code 503 – service unavaiable. No issue about CORS

CREATE NEW APP – SAP AppGyver

CREATE INTERFACE AND VARIABLE FOR PAGE AND APP

BINDING DATA CONTROL TO PAGE VARIABLE

EVENT OF BUTTON

When click button, page variable will be assigned to app variable.

DESIGN SECOND PAGE – Purchase Order

CONFIGURATION DATASOURCE TYPE ODATA

Base on create and configuration API Proxy above, we will use it in this section, configuration datasource

Test

CREATE DATA VARIABLE AND CONFIGURATION

BINDING DATA VARIABLE INTO LIST

CREATE PAGE FOR DETAIL – Purchase Order Detail

In this section, we will design one more page for Purchase Order Detail when click one item on list.

Create app variable for Purchase Order Detail

Create UI with input field corresponding with app variable above

Create event for list item on Purchase Order pages

Take the same for remaining fields

TEST APP

INTEGRATED WITH CHAT BOT

In this section, we will integrate with chat bot which using SAP Conversational AI. Consider we created chat bot on SAP Conversational AI. And we also have account facebook with one page in it.

Next we will configure fanpage first

CONFIGURATION FANPAGE

CREATE APP

Meta for Developers (facebook.com)

GET PAGE TOKEN

Save this page token

GET APP SECRET

ADD APP SECRET AND PAGE TOKEN INTO BOT SAP CONVERSACTION AI

Done, at this time we go to URL : https://www.messenger.com/t/<Page ID>

We will use this URL in out SAP Appgyver

ADD CHAT BOT IN SAP APPGYVER

INSTALL COMPONENT OPEN URL

ADD ICON AND LOGIC FOR CHAT BOT

Done. You can test by yourself

SUMMARY

In this article I shared end to end Create application with SAP Appgyver. I used SAP API Management to fix issue CORS when call ODATA backend. I also shared how to configure and embeded chat bot SAP Conversational AI to chat with fanpage of facebook. You can do this by yourself by use ODATA Northwind. Thanks for your reading and any advise kindly leave your comment on this.

Thanks

Joseph.