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

Using BTP Authentication and Destinations with SAP 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 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 AppGyver 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 AppGyver Project.

Lobby

Lobby

Now the new project is created. To consume BTP destinations in SAP AppGyver, 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 AppGyver project, 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 (you will need SAP Mobile Services on your BTP subaccount for it).

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 AppGyver, 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:

 

Assigned Tags

      23 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 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