Technical Articles

Murali Shanmugham

September 15, 2021 6 minute read

Build your app in minutes using the AppGyver on SAP Business Technology Platform

UPDATED FEBRUARY 2022

Application Development Lobby for Low Code/No Code Development on SAP BTP

Part 1 – Getting Started

Part 2 – Build your app in minutes using the AppGyver on SAP Business Technology Platform

Part 3 – Developing a Smart Selfie App using SAP AppGyver

Part 4 – Developing a Visitor Registration App using Low Code capabilities of Business Application Studio

Beginning of 2021, SAP acquired AppGyver – a no-code platform that supports the development of React and React Native based apps for mobile and web. This service is now Generally Available on SAP Business Technology Platform (BTP).

I have spent few days exploring the capabilities of AppGyver and I am sharing my experience in this blog post for those who are looking to get started. You really don’t need any coding experience to get started. AppGyver Composer Pro is the web-based tool to drag and drop controls and configure properties. Though it’s a no-code platform, I found there are still ways in which you can add JavaScript in case you want additional flexibility.

Getting Started

AppGyver offers a trial environment for anyone to signup and use the platform to build applications. The Composer Pro provides an easy to use visual editor to configure and build your apps.

When you create your first project, you can access the on-boarding tutorials/videos at the footer and they guide you on all the fundamental concepts. You can follow the tutorials and apply those concepts on the open project and monitor your progress. I really enjoyed this feature as it gave me a structure on what I need to know before I go away and build my first app.

You can also find these video at AppGyver Academy

There are plenty of Introductory blog posts from SAP Community Members. Please go through them and you will be able to easily get started and build simple apps.

Developing your App

I recently came across a requirement to showcase AppGyver to build extensions for SAP Cloud for Customer (C4C). The end user should be able be able to lookup customer contacts and product information in real time using a mobile device. The app should also leverage some of the device capabilities like the use of camera for barcode scanning to fetch product details as well as integrate components like Google Maps to show the location of customers.

Here are the pages which I have used within the project. A Home page to display information, List & Detail page for customer contacts and a Product scan page to lookup product details.

AppGyver supports the integration of REST APIs. I have configured C4C APIs in the Data Configurations and used the List control within the List page to display customer contacts.

In the Details page, apart from using the core title label components to display the customer details, I have used WebView component from the marketplace to render Google Maps. AppGyver comes preloaded with set of core components. However, if you are looking for additional components you can browser through the component marketplace and install them for your projects.

In order to scan the product barcode, there are few options which are available to tap into the device capabilities. As you can see below, I have leveraged the “Scan barcode” in the flow logic and used it to fetch the product details from C4C.

The whole app took me about 15 mins to build. Here is the outcome of this project.

Dealing with CORS Issue

SAP Cloud for Customer (C4C) has an OData API reference library and this was helpful to identify the relevant business objects and properties. However, when I tried to use these REST APIs within the Data Configuration of AppGyver, it gave me a CORS error. Most of my time went into finding a solution for this.

Few other members in the community bumped into similar issues previously. However, they were able to overcome this by enabling CORS within their service which is deployed on SAP BTP. Since I am directly consuming a service from a SaaS solution like C4C, I had to look for alternate options.

This is where the SAP Integration Suite became handy. Many thanks to my colleague Paul Fewster who showed me this approach.

The below steps might not be easy to follow if you have not accessed SAP API Management before. I would encourage you to go through some of the Developer Tutorials to familiarize yourself before you attempt to use it to solve the CORS issue. Using API Management, I was able to create a proxy endpoint and define no routes for the preflight request which comes in via the OPTIONS method.

Within the Policies of the API Management, I was able to assign a post-flow message which sets the Header attributes for CORS.

I have also used API Keys which needs to be provided every time AppGyver invokes these APIs

These steps have also been documented in this guide. Using the API Proxy URL along with the API Keys, I was able to successfully create a data configuration within AppGyver.

Below is the Solution Diagram of how AppGyver connects with C4C using SAP Integration Suite

App Deployment

You can easily preview your app either using the preview portal or using Preview app from the iOS/Android store. The video which I have recorded above is using iOS Preview App. Though there are debugging capabilities which you can turn on to evaluate status of events and variables, I found the preview portal convenient as you have access to the browser developer tools to trace any issues.

You can explore the distribute menu which gives you options to build the app for Web/Mobile usage

I would like to point you to a blog post from Lalit Mohan Sharma where he describes how you can build and enhance the Web App and finally deploy it in the Cloud Foundry runtime of BTP. I hope these manual steps will be automated soon.

Availability & Pricing

You can find more details on AppGyver in the SAP Discovery Center – including the regional availability and pricing. Existing SAP BTP customers on CPEA & Pay-as-you-go consumption model would also get access to this service.

Tutorials

SAP Developer Tutorials to get started

Tech Byte Videos

To see LCNC in action, check out the SAP Low-Code/No-Code Learning Journey – designed to increase low-code/no-code skills and teach citizen developers the basic concepts of software development and learn how to build mobile apps for free. Check out LCNC and Discover BTP plus much more free learning at SAP Learning site.

Overall, I found it easy to get started and build simple apps. These would be great for customers who don’t have professional developers and want their in-house teams to build apps quickly to support some of their business requirements.

If you have any questions on this topic, please raise a question in the SAP Community Forum.

28 Comments

You must be Logged on to comment or reply to a post.

Pierre COL

September 15, 2021 at 7:07 am

Great intro tp SAP AppGyver, now available on CPEA contract for any SAP customer.

Thanks Murali!

Pankaj Yadav

September 15, 2021 at 10:33 am

Thanks Murali.. for this blog

Jibin Joy

September 16, 2021 at 6:58 am

Hi Murali ,

Thanks for blog . Please help us for below query . Tried to search but no luck

1. Roadmap for SAP AppGyver

2. Can be linked to SAP mobile service ?

3. How authentication will work ?

Murali Shanmugham

Blog Post Author

September 16, 2021 at 10:47 am

Hi Jibin Joy,

Thanks. This product has just gone GA and I believe the roadmap is in the process of being published. Please check the roadmap in few weeks time.

I don't see any connectivity with the SAP Mobile service. Its best to raise this as a question in the forum for the product experts to respond.

With regard to authentication, since the app will be deployed on SAP BTP, it would follow the existing authentication/SSO setup for SAP BTP. Here is a link to a blog post where authentication part has been covered - https://blogs.sap.com/2021/05/10/sap-btp-showcase-combining-appgyver-and-enterprise-capabilities-part-1-authentication/

Jibin Joy

September 17, 2021 at 7:55 am

Hi Murali ,

Thanks for information . Is it possible to share the link where we can raise our concern to Product Expert

Robin Van Het Hof

September 16, 2021 at 10:52 am

Hi Murali,

Great blog! I have one question though: you mentioned AppGyver is now GA on SAP BTP, but I can't seem to find it on both the trial as well as a productive accounts. The trial environment you mentioned seems to be outside of SAP BTP, or am I mistaken?

Brendan Farthing

September 16, 2021 at 11:12 pm

It's visible as an Entitlement productively in my BTP (EU10).

Murali Shanmugham

Blog Post Author

September 17, 2021 at 11:16 pm

Hi Robin Van Het Hof

Its not yet available on Trial environment. For now you can use the trial option directly at appgyver.com. Hopefully the roadmap which gets published will provide more clarity on the availability in the free tier. As Brendan mentioned, you should be able to see it in the entitlements of BTP cockpit. I will update you once I have more info with the steps to enable AppGyver inside BTP cockpit.

Murali Shanmugham

Blog Post Author

September 22, 2021 at 7:22 am

Hi Robin Van Het Hof,

Check out these new SAP Developer tutorials

Gaurav Karkara

September 17, 2021 at 9:50 am

Hi Murali,

Thanks for this blog post.

Is there any plan to provide Fiori components here? Considering UI as Fiori strategy, It makes more sense for customers to be able to generate no-code Fiori applications.

Regards

Gaurav Karkara

Murali Shanmugham

Blog Post Author

September 17, 2021 at 11:17 pm

Hi Gaurav, We will have to wait for the roadmap to see the plans for Fiori Components within AppGyver.

Kemal Atakan Tokgoz

September 17, 2021 at 2:29 pm

Hi Murali Shanmugham ,

Great post, especially the CORS part! I've been fiddling with AppGyver for a while but was always blocked with the cors issue. I have followed your steps but still receiving the error. Am I missing something?

Here's what I did:

Copy the standard c4codataapi from the discover catalog. I used tickets for my case.
For proxy endpoint maintained request.verb == "OPTIONS" in route rules.
Did nothing for the target end point.

In policies maintained the following message to the postflow

<!-- 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">setcookie, origin, accept, maxdataserviceversion, x-csrf-token, apikey, dataserviceversion,accept-language, x-http-method, content-type, X-Requested-with</Header>
    <Header name="Access-Control-MaxAge">3628800</Header>
    <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>    
    <Header name="Access-Control-ExposeHeaders">set-cookie, x-csrf-token, x-http-method</Header>    
    </Headers>
    </Add>
	<IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
	<AssignTo createNew="false" type="response">response</AssignTo>
</AssignMessage>

Haven't added any pre flow (don't know how to create the APIKey) instead I'll be sending the credentials authorization request header for test purposes.
When I add a data source in AppGyver it returns the CORS error.

Murali Shanmugham

Blog Post Author

September 17, 2021 at 11:21 pm

Hi Kemal,

Thanks. Can you please try keeping noroutes entry at the top of the "Route Rules". I had the same issue and keeping it at as the first entry gave it priority. I would suggest you raise this as a question in the SAP Community forum for experts to provide support.

Kevin Annfield

September 20, 2021 at 2:07 am

Hi,

Can you confirm the OPTIONS request is being made before the GET request? In my testing the OPTIONS request is being made second, after the GET which results in a CORS error. You can use the Network tab in Dev tools to see the request order.

Thanks

Kevin

Kemal Atakan Tokgoz

September 21, 2021 at 8:10 am

Hi Kevin Annfield,

When I call it, for a second I can see that OPTIONS is being called first (after the error they switch places as shown in the screenshot below).

In the error status I have "Cross-Origin Resource sharing error: Header Disallowed by preflight response"

Murali Shanmugham

Blog Post Author

September 21, 2021 at 10:41 am

Did you try testing this in API Management or REST Client to see if the OPTIONS is returning the right response? Kevin was able to sort out his issue (related to a typo)

Kemal Atakan Tokgoz

September 21, 2021 at 2:27 pm

When I try it via Postman I can see that the header is actually set.

OPTIONS:

GET:

I have cross-checked with several guides and fixed some typos but still receive the error.

<!-- 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, apikey, 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>

Then I debug it with APIM saw that the option is returned but not the GET. The only time I saw GET was when there's actually a mistake (i.e no authorization header).

Edit: The issue was related with "Access-Control-Allow-Headers" missing the "authorization" value. Since I use basic auth instead of apikey, I have removed the apikey value and added authorization value. As soon as I added, it worked!

Murali Shanmugham

Blog Post Author

September 22, 2021 at 6:38 am

Glad to know that it worked.

Tom Sh

November 4, 2021 at 1:52 am

Hello Kemal, please can you help me?

I have done all the steps but still receiving the error.I use a basic authentication :

Kemal Atakan Tokgoz

November 9, 2021 at 8:31 am

Hello Tom Sh

In AppGyver can you please remove the parenthesis in your authorization header?

Additionally you can add a preflight flow (plus icon and write it manually)

You can check my guide in AG Forum

https://forums.appgyver.com/t/how-to-solve-cors-issues-with-sap-api-management/9752

Piotr Tesny

September 21, 2021 at 9:51 am

Helo Murali,

A truly inspiring blog. it seems like the LCNC is gaining traction and attention.

Long story short I came across your blog only after I had published mine...on this very topic...Astronomy Picture of the Day. With no-code.

Moreover, we had exactly the same idea to leverage the power of APIM coupled with the Appgyver swag....

And of course the deployment blog post from Lalit Mohan Sharma . what a jewel! Cheers. Piotr

Murali Shanmugham

Blog Post Author

September 21, 2021 at 10:41 am

Thanks for your comments Piotr Tesny

Praveer Kumar Sen

September 22, 2021 at 8:20 pm

Hi Murali,

Thanks for sharing this blog.

I have tried few of the features and displayed data using public api's.

I am trying to use EPM services using API option however getting CORS related error. Trying to understand above reply from @Kemal Atakan Tokgoz. Can you help me with more details and screen if possible.

Best Regards,

Praveer.

Murali Shanmugham

Blog Post Author

September 23, 2021 at 8:30 pm

Hi Praveer Sen,
I checked this earlier with SAP ES5 system and it does not support the use of OPTIONS. When I used POSTMAN to test this, it says "specified HTTP method is not allowed".
This setting needs to be enabled in the ES5 system. Hence, the use of API Management as a work around might not help here.

Praveer Kumar Sen

September 23, 2021 at 8:34 pm

Hi Murali,

Thanks for the reply. Let me try with some other system. Where I can maintain given settings.

Regards,

Praveer.

Haden Molina

January 2, 2023 at 1:56 am

Nice blog and very detailed.

Is there a wokaround to the CORS issue for customers who doesn't have the API Management?

I tried disabling the CORS in the transaction RZ11 with no luck.

Murali Shanmugham

Blog Post Author

January 9, 2023 at 2:06 am

Hi Haden, If you are using the Enterprise version of AppGyver (now called Build Apps), you can create destinations in BTP Cockpit to avoid CORS issue.

Haden Molina

January 10, 2023 at 1:47 pm

Hi,

I'm not, I directly created the api on the SAP Backend.

I'm now able to avoid the CORS policies but it only works on the web app, from the Appgyver preview app (phone) is impossible!

I think I better forget about it and build my apps with others platforms. Thanks anyway.

Technical Articles

Build your app in minutes using the AppGyver on SAP Business Technology Platform

Getting Started

Developing your App

Dealing with CORS Issue

App Deployment

Availability & Pricing

Tutorials

Assigned Tags