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 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).
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.
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
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.
SAP Developer Tutorials to get started
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.
Great intro tp SAP AppGyver, now available on CPEA contract for any SAP customer.
Thanks Murali.. for this blog
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 ?
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/
Hi Murali ,
Thanks for information . Is it possible to share the link where we can raise our concern to Product Expert
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?
It's visible as an Entitlement productively in my BTP (EU10).
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.
Hi Robin Van Het Hof,
Check out these new SAP Developer tutorials
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.
Hi Gaurav, We will have to wait for the roadmap to see the plans for Fiori Components within AppGyver.
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:
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.
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.
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"
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)
When I try it via Postman I can see that the header is actually set.
I have cross-checked with several guides and fixed some typos but still receive the error.
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!
Glad to know that it worked.
Hello Kemal, please can you help me?
I have done all the steps but still receiving the error.I use a basic authentication :
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
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
Thanks for your comments Piotr Tesny
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.
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.
Thanks for the reply. Let me try with some other system. Where I can maintain given settings.
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.
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.
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.