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

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

 

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

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

      25 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 Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Robin Van Het Hof,

      Check out these new SAP Developer tutorials

      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.

       

      Author's profile photo Kevin Annfield
      Kevin Annfield

      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

      Author's profile photo Kemal Atakan Tokgoz
      Kemal Atakan Tokgoz

      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"

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

      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)

      Author's profile photo Kemal Atakan Tokgoz
      Kemal Atakan Tokgoz

      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!

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

      Glad to know that it worked.

      Author's profile photo Tom Sh
      Tom Sh

      Hello Kemal, please can you help me?

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

      Author's profile photo Kemal Atakan Tokgoz
      Kemal Atakan Tokgoz

      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

      Author's profile photo Piotr Tesny
      Piotr Tesny

      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

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

      Thanks for your comments Piotr Tesny

      Author's profile photo Praveer Sen
      Praveer Sen

      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.

       

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

      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.

       

      Author's profile photo Praveer Sen
      Praveer Sen

      Hi Murali,

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

      Regards,

      Praveer.