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

[MarcHuber]

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

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

And now select SAP BTP authentication.

SAP BTP Authentication

Confirm with OK.

Enable Authentication

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

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

Select BTP Destinations

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 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 entities of the destination

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

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 Browser

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

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

Scrollable Basic List

Install the new component by clicking INSTALL.

Install scrollable basic list

Now drag & drop the component into the UI.

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 the data binding

And select the data resource.

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

 

[MustafaBensan]

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.

[Dan_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) 

[Dan_Wroblewski]

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

[MarcHuber]

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

[MarcHuber]

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

[Rama-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.

 

 

[aoyang]

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?

[Dan_Wroblewski]

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

[aoyang]

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.

[Dan_Wroblewski]

Strange … you set it to true?

[aoyang]

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.

[Uli_Hoffmann]

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

[JoeBinkley]

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 Destination Settings

[Dan_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:

[Dan_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.

[fabiocerioni]

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

[MarcHuber]

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

[Dan_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)

[janschober]

Hey marchuber03 ,

 

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

 

Thanks

[Naveen]

Dear Marc,

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

 

 

Regards

Naveen Jain

[MarcHuber]

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

[MarcHuber]

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

[fapete]

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

[MarcHuber]

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

[aoyang]

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

[mauriciotamez]

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.

[aoyang]

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.

[prashant9444]

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

[former_member822884]

Hi Prashant,

Did you get any solution for this?

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

[SergioFerrariIt]

any news about BTP Destinations and Mobile Apps?

Thanks a lot

[fem]

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)

[Jay2]

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

[gizemsoyluutr]

Hello Marc,

Does any update from BTP Authentication on Mobile Apps?

Thanks in advance.

[smarchesini]

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

[vobu]

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?

[Dan_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.

[nishantbansal91]

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

[Dan_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

[nishantbansal91]

 

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 On cloud destination Error

 

Thanks

 

[Dan_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)

[nishantbansal91]

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 on cloud

[Dan_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.

[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

[Dan_Wroblewski]

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

[Dan_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.

[Dan_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?

[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

[Dan_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?

[former_member345093]

Hi Nishant,

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

Thanks,

Anurag

[nishantbansal91]

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