Skip to Content
Technical Articles
Author's profile photo Marc Huber

Using BTP Authentication and Destinations with SAP Build Apps (formerly AppGyver) *and deploy it to BTP

Motivation

Maybe some of you experienced that it was not very easy to access SAP data sources with SAP Build Apps (formerly SAP AppGyver) because of some CORS issues (Cross-origin resource sharing (CORS) protects your backend by allowing only the allowed domains to access your system).

Additionally, weren’t you also looking for an easy built-in authentication for your app?

Then you should read this blog. I am going to show you, how you can enable the new SAP BTP authentication feature in AppGyver and also how to use BTP destinations as data sources for your app:

  • With the SAP BTP authentication, a log on page is pushed automatically in front of your app which checks for the credentials of the end user of the app
  • The BTP destinations as new data sources allows you to easily consume data coming from any cloud or on-premise SAP system

Update 27.07.2022 – I also added guide how to deploy the app to BTP

Prerequisites:

  • Access to an SAP Business Technology Platform Account
  • SAP Build Apps service running on this BTP account (Guide to run the booster)
  • A configured destination on this BTP account and also access to this destination. The destination needs the property DynamicDestination=true and WebIDEEnabled=true

 

Getting Started

We are accessing the Low Code / No Code (LCNC) entry point called ‘Lobby’ on the BTP account to create a new AppGyver project by clicking the Create button and select Build an Application and afterwards Web & Mobile Application.

Lobby

Lobby

Now the new project is created. To consume BTP destinations in SAP Build Apps, we go directly to the AUTH tab at the top of the UI and click on Enable Authentication.

Authentication

Authentication

And now select SAP BTP authentication.

SAP%20BTP%20Authentication

SAP BTP Authentication

Confirm with OK.Enable%20Authentication

Enable Authentication

SAP BTP Authentication is now enabled. What does that mean:

Authentication%20enabled

Authentication enabled

An additional page is added to your SAP Build APpsproject, which will be automatically opened if a user  opens your app. This page checks the credentials of this user coming from the SAP BTP account. After a successful logon the initial screen will be closed automatically. You don’t have to do anything further on this page. Currently, only web apps are supported by the SAP BTP authentication. Mobile apps will be coming soon.

Additional%20Page%20added

Additional Page added automatically

Now we have authenticated BTP and can use BTP destinations as data sources. Of course, you need the necessary rights to access destinations. These rights can be typically provided by an IT administrator. Additionally, the destinations needs the property HTML5.DynamicDestination=true and WebIDEEnabled=true. If this property is missing, you will receive the following error message:

Missing%20destination%20property%20error

Missing destination property error

If you have the necessary rights and the destination is configured correctly, the data can now be accessed by clicking on the DATA tab and selecting ADD INTEGRATION

Add%20Integration

Add Integration

Select BTP Destinations

BTP%20Destinations

BTP Destinations

Now a list of all your destinations from your subaccount should appear. You can also use the search field to find the destination of your choice.

List%20of%20destination%20from%20your%20subaccount

List of destination from your subaccount

Select the destination you want to use. Now you will get an overview of all data entities on the left side of this destination. On the right-hand side, you will see all capabilities and fields of this specific data entity.

Data%20entities%20of%20the%20destination

Data entities of the destination

We are going to install the data source by clicking INSTALL INTEGRATION.

Install%20Integration

Install Integration

Let’s have a look on the data from on entity. In my example I use the email addresses of the business partners coming from a S/4 HANA Cloud system. We will use the Data Browser to preview the data.

Data%20Browser

Data Browser

This will show us a preview of the data and if we really want to use it in our app.

Preview%20of%20the%20data%20with%20the%20data%20browser

Preview of the data with the data browser

The data seems to be right for our app, so we will enable this data entity by clicking ENABLE DATA ENTITY.

That’s it!  Now we can use the Business Partner Data in our App.

Data%20entity%20enabled

Data entity enabled

To display the data we will use the component “scrollable basic list” from the component market. There close the data tab and search in the component market for the list.

Component%20Market

Component Market

Scrollable%20Basic%20List

Scrollable Basic List

Install the new component by clicking INSTALL.

Install%20scrollable%20basic%20list

Install scrollable basic list

Now drag & drop the component into the UI.

Drag%20and%20Drop%20list%20to%20UI

Drag and Drop list to UI

Last thing we have to do is to bind the data from the BTP destination to the component. Click on Configure on the properties page.

Configure%20the%20data%20binding

Configure the data binding

And select the data resource.

Data%20source

Data source

Now drag & drop the fields you want to use in the basic list. Afterwards click Save & Exit. We have connected our data to the basic list.

Map%20the%20fields

Map the fields

That’s it. Now you can preview your app. Click on the LAUNCH tab and preview the app on the web preview portal.

App%20preview

App preview

 

 

Update 27.07.2022 Deploy the AppyGver App to BTP

In the Launch Tab go to DISTRIBUTE and open the Build Service

Now you have to configure the web app.

Select any AppGyver Hosted Domain and select build scheme “MTAR” during the configuration.

After you have finished the configuration, press the BUILD button

Select File Type MTAR, define a version like 1.0.0. and press the build button.

After 10-30 minutes your MTAR should be available for download. Press the download button.

Now go back to the lobby and create an empty Business Application Studio Project. Choose a name of your choice. The initial set up of the BAS project can take some minutes.

 

Now just enable the explorer.

And drag&drop your AppGyver mtar to the project.

Open a new terminal

Run the command  “cf login” and log in you Cloud Foundry space.

Afterwards just run the command “cf deploy yourmtar.mtar”.

That’s it. Now you should see your AppGyver app in your HTML5 applications on your BTP subaccount.

 

Conclusion

With the new BTP Authentication and Destination support in SAP Build Apps, we have an easy way to create a secured app which can consume data from any SAP systems with a few clicks. Additionally with these features we can use it as a great governance feature that IT administrators can control which data sources (destinations) are available for the citizen developers.

You can also find the whole setup process in this video:

Do you want to learn more:

Find out how to build software applications, side-by-side extensions, and integrations from and to cloud applications by exploring SAP’s free learning content on SAP BTP. It is made for both integration designers and extension developers from all levels of expertise and will help you stay up to date with the latest SAP BTP innovations. Check out even more role-based learning resources and opportunities to get certified in one place on SAP Learning site.

 

Assigned Tags

      50 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Marc,

      Very good to see that the long awaited authentication and destination capabilities are now available with AppGyver.  I have a couple of questions:

      1.  Which identity provider does the Authentication feature integrate with for obtaining the user information?  I am assuming it is the identity provider configured in the trust configuration of the subaccount to which the AppGyver app has been deployed.  Is that right?

      2.  Are there any prerequisites for using the Destination feature of AppGyver, such as whether the communication protocol is REST or SOAP?  This is relevant for use cases such as integrating an AppGyver app with S/4HANA Cloud which provides both REST and SOAP based APIs.

      Thanks,

      Mustafa.

      Author's profile photo Marc Huber
      Marc Huber
      Blog Post Author

      Hi Mustafa,

      1. yes that's right
      2. SOAP is not supported. OData is the preferred way, but you can also make direct REST connections if the backend does not have an OData endpoint available

      Best regards,

      Marc

      Author's profile photo Rama Sulakshani Murari
      Rama Sulakshani Murari

      Hi Marc,

      Can you please let me know if only OData APIs can be used with destinations and not REST APIs or is there any other configuration to mention the destination I want to use when I try to make a direct REST connection ?

      Thanks and Best Regards,
      Rama.

       

       

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Can I use S/4HANA on-premise destination?

      When I do I get a red circle saying "Destination Unavailable" -- I assume this has nothing to do whether AppGyver can reach the system since (1) I have set up the destination correctly; (2) I have set up a bogus S/4HANA Cloud destination without a proper user ID and AppGyver still goes to the next page (it still cannot see any data and says invalid format) 

      Author's profile photo Aocheng Yang
      Aocheng Yang

      Hi Daniel, today I got the same error with a red circle saying "Destination Unavailable" in my BTP authentication. Any luck finding the cause and solution?

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Make sure your destination is pointing to an odata service and that it is actually connecting

      Author's profile photo Aocheng Yang
      Aocheng Yang

      Thanks it worked😃 My destination was pointing to the general system URL(BTP ABAP Environment) so changed that to specific OData and then created communication arrangement for that.

      One thing I struggled with was that, for some reason, having WebIDEUsage='xxxx' in the property interfered with BTP authentication in APpGyver and kept giving me error. After it's removed, it finally worked.

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Strange … you set it to true?

      Author's profile photo Aocheng Yang
      Aocheng Yang

      It’s WebIDEUsage I had trouble with. I had it because I thought I needed it but it turns out caused problem.

      WebIDEEnabled=true is set in the destination to make it work.

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Sorry I got the ENabled and Usage mixed up ... yes for AppGyver you do not need to set Usage, but you have to set Enabled to true. If there are conflicts between what you need for Usage and what prevents AppGyver from seeing such destinations, worth reporting the issue.

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Just a note, maybe this is obvious, but it seems destinations need to have WebIDEEnabled = true to appear in AppGyver list of destinations

      Author's profile photo Marc Huber
      Marc Huber
      Blog Post Author

      yes, you need to set the properties DynamicDestination=true and WebIDEEnabled=true in the properties of the destinations

      Author's profile photo Ulrich Hoffmann
      Ulrich Hoffmann

      Please see a video as well: BTP authentication and destinations for AppGyver

      Author's profile photo Joe Binkley
      Joe Binkley

      I've been trying to setup a Northwind destination to try this out, but I get an "Incompatible Format" when I try to add as a BTP Destination

      These are my settings:

      Name: Northwind

      Type: HTTP

      URL: https://services.odata.org

      Proxy Type: internet

      Authentication:NoAuthentication

      AppgyverEnabled: true

      HTML5.DynamicDestination: true

      WebIDEEnabled: true

      Use default JDK truststore is checked

      Northwind%20Destination%20Settings

      Northwind Destination Settings

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Next time make this a question so I can get another question answered 🙂

      AppGyver (currently) is expecting an OData service from the destination, so that when you specify the destination it will read the metadata and show you what entities you can select to be exposed in your app. So for Northwind that would be:

      https://services.odata.org/V2/Northwind/Northwind.svc

      This URL gives some metadata and AppGyver can add $metadata to get more.

      If you just use base URL, you get some stuff specific to Northwind site and AppGyver is lost:

       

       

       

      Author's profile photo Fabio Cerioni
      Fabio Cerioni

      Wonderful news!!! Previous integration wasn't easy.

      I've followed your instruction and everything worked!

      But if I go to to the appGyver preview app in the mobile device I've got an authentication message error.

      authentication%20error

      authentication error

      I've reinstalled the app (just to have the last version). But the error is still there.

      To login in into the App I've chosen the BTP option and I've scanned the QR code.

      What am I doing wrong?

      Thank you very much

      Author's profile photo Marc Huber
      Marc Huber
      Blog Post Author

      Mobile Apps are not supported at them moment, only web apps. But this feature will come soon.

      Author's profile photo Sergio Ferrari
      Sergio Ferrari

      any news about BTP Destinations and Mobile Apps?

      Thanks a lot

      Author's profile photo Gizem Nur Soylu
      Gizem Nur Soylu

      Hello Marc,

      Does any update from BTP Authentication on Mobile Apps?

      Thanks in advance.

      Author's profile photo Sebastiano Marchesini
      Sebastiano Marchesini

      In the queue to understand if there is any new about.
      There is nothing about in the road map

      SAP Road Map Explorer SAP Build Apps

      Author's profile photo Volker Buzek
      Volker Buzek

      re-pinging on this, also to Daniel Wroblewski, as this is a major awaited feature for connecting mobile apps to existing backends!

      is there any current state to share from the both of you?

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      I have no update (I'm not in PM or development 😺) but I'm sure there will be a big announcement you won't miss when it is available.

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Please also see https://blogs.sap.com/2022/07/05/my-first-steps-with-btp-destinations-s-4hana-in-appgyver/ to learn:

      • Eliminate default delay in updating the data.
      • Enable manual refresh of data.
      • Implement paging, filtering and sorting (I assume it implements OData functions under the hood)
      Author's profile photo Jan Schober
      Jan Schober

      Hey Marc Huber ,

       

      could you also add the steps to export and deploy to BTP CF?

       

      Thanks

      Author's profile photo Marc Huber
      Marc Huber
      Blog Post Author

      Hey Jan,

      thank you for the feedback. I will update the blog post.

      In summary 3 steps are necessary at the moment to deploy the app to BTP.

      1. Use the build service in AppGyver to create a mtar file and download the file
      2. Upload the mtar for example in a SAP Business Application Studio for low-code development project.
      3. Use the command "cf deploy "your mtar file"" to deploy the app to your preferred space on BTP
      Author's profile photo Naveen Jain
      Naveen Jain

      Dear Marc,

      Can you please help me with this, my destination are reachable but still this error.

       

       

      Regards

      Naveen Jain

      Author's profile photo Marc Huber
      Marc Huber
      Blog Post Author

      Hi Naveen,

      I guess you try to access https://services.odata.org/

      If you change it to https://services.odata.org/v2/northwind/northwind.svc/ in your destination it should work.

      Best regards

      Author's profile photo Fabian Peternek
      Fabian Peternek

      Hi Marc,

      I'm currently looking into this and was wondering, whether it's possible to figure out which user is currently logged in, so the endpoints can be filtered? Also, is it possible to consume endpoints with parameters (like the ones described here: https://cap.cloud.sap/docs/cds/cdl#exposed-entities)? They show up in the list for me, but don't seem to work correctly, with AppGyver considering the parameters as the schema of the view.

      Best regards

      Fabian

      Author's profile photo Marc Huber
      Marc Huber
      Blog Post Author

      Hi Fabian,

      at the moment it is not possible to figure out which user is currently logged on. But we are already working on a solution. CDS is not supported yet, we only support native ODATA at the moment. But this topic is also on our roadmap.

      Best regards,
      Marc

      Author's profile photo Aocheng Yang
      Aocheng Yang

      Thanks for adding the deployment instructions as well.

      What's the intended way to make the HTML5 applications avaialbele to the app users? I assume primarily it's via Fiori Launchpad service in BTP.  I added the AppGyver app deplyed to HTML5 applications but on the launchpad, it loads forever and does not return the app content.

      Is this the expected behaviour or is it not ready for Fiori Launchpad yet?

      Best regards, Aocheng

      Author's profile photo Aocheng Yang
      Aocheng Yang

      I found a workaround. In the Fiori LaunchPad service, incorporating the Appgyver app as HTML5 content provider from the content manager will result in my problem above.

      Instead, create a new app in content manager in Fiori LaunchPad service and use direct URL access instead of saas_approuter. Include this app in the tile group of the launchpad site and it displays my Appgyver app now.

      Author's profile photo Mauricio Tamez
      Mauricio Tamez

      Hi Marc,

      I have an AppGyver app conected to the Service Layer via Destinations to create and list the items entity, everything works as expected when viewing the app on the preview page that AppGyver provides us.

      But when building the app and deploying into cloud foundry following your guide, I have this error.

      Also the configuration for the destination is properly configured for AppGyver.

      Any ideas? thanks in advance.

      Author's profile photo Prashant Patil
      Prashant Patil

      Hi Marc,

       

      How do we pass "$expand" to OData service call using BTP destination, or how do we access NavigationProperties for binding in AppGyver?

       

      Thanks,

      Prashant

      Author's profile photo Former Member
      Former Member

      Hi Prashant,

      Did you get any solution for this?

      I am also looking for the $expand implementation in AppGyver.

      Author's profile photo Franz Emathinger
      Franz Emathinger

      Thanks Marc, great blog post. Appgyver is indeed a great tool full of potential.

       

      If you are struggeling with destinations and get a "Destination unavailable" error in AppGyver, one reason could be that the character "_" is not allowed in the virtual name of a destination.

      (See SNOTE 2569471 - URI does not specify a valid host name error occurs when checking the connection of a destination)

      Author's profile photo Jay Adnure
      Jay Adnure

      Hi Marc,

      We have a requirement where we want to authenticate the user and check his scope to see if he accesses the resource. Is it possible with BTP destination or just for destination access only?

       

      Kr,

      Jay

      Author's profile photo Nishant Bansal
      Nishant Bansal

      Hello Daniel Wroblewski

       

      We want to connect the SAP ABAP on cloud environment with SAP Build. We are getting the 302 error message? The same destination is working in BAS application.

       

      Thanks

      Nishant

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Where are you getting this 302 status code? Screenshots? More info?

      Generally, 302 is just a redirect message so you should still get your data. When testing destinations, in BTP you will often get this status code but the destination is fine

      Author's profile photo Nishant Bansal
      Nishant Bansal

       

      Hello Daniel Wroblewski ,

      I am getting 302 error in the Integration screen. I don't see the next screen where I can see all the services. BTP Authentication is already completed.

      Do you have reference configuration of ABAP On cloud destination which is successfully connected to SAP Build ?

       

      ABAP%20On%20cloud%20destination%20Error

       

      ABAP On cloud destination Error

       

      Thanks

       

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      You need to set up the destination to return a single OData service. So for example, the URL to sales order service would be:

      https://myserver.s4hana.ondemand.com/sap/opu/odata/sap/API_SALES_ORDER_SRV

      For now, you cannot define a single destination that will then display all the services available. I imagine at some point there will be integration with SAP Graph and this will solve this issue (no promises)

      Author's profile photo Nishant Bansal
      Nishant Bansal

      Hello Daniel,

       

      Below is the setup for the ABAP On cloud service destination in the BTP. If I give the full service URL then it is not authenticate by client ID and secret key, I need to pass the username and password and it is not available at ABAP on cloud Level. Any idea ?

       

      ABAP%20on%20cloud

      ABAP on cloud

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Can you try to make a connection with REST connector in SAP Build Apps -- you would lose the benefit of the OData connector but at least we can see that it works.

      Author's profile photo Anurag Srivastava
      Anurag Srivastava

      Hi Nishant,

      Were you able to resolve this ? I am also stuck here.

      Thanks,

      Anurag

      Author's profile photo Nishant Bansal
      Nishant Bansal

      Hello Anurag,

       

      Yes I am able to solve it.  Basically you need to expose the particular oData service. It means for each oData service you have independent destination.

      testing

      testing

      Author's profile photo Venkat Vyza
      Venkat Vyza

      Hello @Daniel Wroblewski,

      I think we can get all the OData services into Build Apps with a single Destination by using "APS_ODA_API_CONTENT_SRV - Open Discovery API Content"

      Below are the steps:

      1. Expose all your OData Services in the Cloud Connector by creating a generic Resource Path like “/sap/opu/odata/sap/”
      2. While creating the Destination in BTP, create it for OData service "APS_ODA_API_CONTENT_SRV" and add the property “IsCatalog” = true
      3. Finally, in the Build Apps when you click on the Destination created above, you will see all the OData Services under it.

      What do you think?

      Kind regards,

      Venkat Vyza

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Sorry for the delay ... I will try to find time this week to test out. Can this be done with S/4HANA Cloud?

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Almost have it from onpremise S/4HANA but I get this:

      I'm fairly certain I have permission to some OData services ... not sure where the problem is.

      Author's profile photo Venkat Vyza
      Venkat Vyza

      Hi Daniel Wroblewski ,

      Thanks for trying this.

      My assumption is that this specific OData Service "APS_ODA_API_CONTENT_SRV" might have not been implemented in your backend system. Please click on F12 and see if there is an error message something like "Failed to load resource...."

      By the way, the error you got, per your print screen, confirms that technically it's possible to get all the OData services with a single destination. In fact, it tried to fetch all the SERVICES (NOT entities) for this Destination 🙂

      Thank you,

      Venkat Vyza

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Can you explain what this service is? I don't see any reference to it on Google (except this question and 1 linkedin post). I'm assuming it's some service that has to be custom created to expose multiple services. If so, can you explain how you created it?

      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      And I can fetch the BP service for example from this on-premise system, so why wouldn't the above work? Do I need permission to that catalog service? What user role?