Skip to Content
Technical Articles
Author's profile photo Murali Shanmugham

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

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.

 

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.

 

Assigned tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre COL
      Pierre COL

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

      Thanks Murali!

      Author's profile photo Pankaj Yadav
      Pankaj Yadav

      Thanks Murali.. for this blog

      Author's profile photo Jibin Joy
      Jibin Joy

      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 ?

       

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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/

      Author's profile photo Jibin Joy
      Jibin Joy

      Hi Murali ,

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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      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?

      Author's profile photo Brendan Farthing
      Brendan Farthing

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

       

       

       

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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.

      Author's profile photo Gaurav Karkara
      Gaurav Karkara

      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

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

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

      Author's profile photo Kemal Atakan Tokgoz
      Kemal Atakan Tokgoz

      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.

       

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      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.