Skip to Content
Technical Articles
Author's profile photo Divya Mary

Part 3: Easily consume data from third-party in a Fiori application using SAP Cloud Platform Open Connectors

SAP Cloud Platform Open Connectors simplifies and accelerates connectivity to third-party cloud applications. It provides robust, feature rich, prebuilt connectors to an extensible library of over 160 of the most popular third-party cloud applications.

In Simplify connectivity to third-party cloud applications with SAP Cloud Platform Open Connectors blog, steps to seamlessly and securely connect to a third-party cloud applications via pre-built connectors was covered. In this blog, the easy consumption of data from third-party application via SAP Cloud Platform Open Connectors in a Fiori application is showcased. In this blog, I am assuming that you are familiar with building a Fiori application and SAP Web IDE.

Note:- In this blog, we have used a third-party application from the CRM hubs which is Hubspot. You are free to use any other third-party application of your choice for this exercise.

Prerequisites

 

Create a destination to SAP Cloud Platform Open Connectors

To securely connect to third-party application via SAP Cloud Platform Open Connectors from a Fiori application, destinations can be used. In this section, the steps to create destination to the harmonized RESTFul URIs for the third-party CRM Hubs APIs is showcased.

 

  • Select Destinations tab and then select New Destination to create a new destination to SAP Cloud Platform Open Connectors

 

  • Enter the destination name say Open Connectors, Enter the URL to SAP Cloud Platform Open Connectors trial tenant say https://api.openconnectors.ext.hanatrial.ondemand.com
  • Under the additional properties tab add WebIDEEnabled property and set its value to true. Similarly add TrustAll property and set its value to true.

 

The name of this destination would have to be noted and it would be later used in Fiori application (in neo-app.json) file.

 

Build a simple Fiori application using SAP Web IDE

Keeping it very simple in this blog we would be building a simple Fiori application which would show all the accounts maintained in the third-party CRM applications in a simple list view titled Customer Fact sheet.

Note:- In this blog, UI binding has been done based on the response returned by the SAP Cloud Platform Open Connectors HubSpot connector. In case you had used a different third-party CRM hub connector then the binding would have to be adjusted based on the response.

 

  • From the services tab in SAP Cloud Platform cockpit, search and select SAP Web IDE Full-Stack tile and click on the Go to Service link.

 

  • You will be navigated to the SAP Web IDE Full-Stack. Select the option, New project from template to create an SAP UI5 application.

 

  • Select SAP UI5 application from the Template Selection screen and select Next.

  • Enter your Fiori Project name say thirdpartydemo and namespace say ocn and select Next.

 

  • Enter the name of your main View say App and select Finish.In this blog, XML View type has been used. Alternatively you can select other View Types as well.

 

  • This would generate a Fiori application.
  • From the generated Fiori application, expand and select the neo-app.json file and enter SAP Cloud Platform Open Connectors destinations details to seamless connect to third-party application from Fiori application. Copy and paste the below snippet to your generated neo-app.json file. Change the value of the name property to the destination name that you would have used.
{
"path": "/elements/api-v2/accounts",
"target": {
"type": "destination",
"name": "openconnectors",
"entryPath": "/elements/api-v2/accounts"
},
"description": "Open Connectors"
},

 

 

 

  • Whitelist the authorization header, so that the normalized authentication token can be passed from Fiori application. For this copy the below snippet to your neo-app.json file at the root level.
"headerWhiteList": [
"authorization"
],

 

  • To easily get data from authenticated third-party connectors from SAP Cloud Platform Open Connectors, JSONModel can be used.  To create and load the JSONModel with data from the third-party connectors from SAP Cloud Platform Open Connectors, expand the model folder and select the file model.js .  Copy and paste the snippet below to the model.js file.

Disclaimer: In this blog, keeping it simple, authorization token has been specified in the JavaScript code. This is not a secure approach as any person can easily read the JavaScript using Browser tools. For productive development the recommendation is to specify these token on the Server side or use an API Management Platform like SAP Cloud Platform API Management

createDataModel: function(){
var oModel = new JSONModel();
var sHeaders = {"authorization":"provide_your_authenticated_connector_token_from_SAP_Cloud_Platform_Open_Connectors"};
oModel.loadData("/elements/api-v2/accounts", null, true, "GET", null, false, sHeaders);
return oModel;
},

 

To know more about the authentication header value to be used in this exercise, refer the Simplify connectivity to third-party application blog.

  • The created data model would have to be set to the UI5 view. For this select the Component.js file and then copy and paste the snippet below to the init method.
//set the data model
this.setModel(models.createDataModel(),"data");

 

 

  • Using the data binding, JSONModel can be bound to the UI elements to render the response from the third-party application in a simple table view. Expand and select the App.view.xml file from the generated code and copy and paste the snippet below.  The binding path would have to be changed based on the third-party application that you would have selected. The below snippet would work for a HubSpot CRM connector.
<Table items="{data>/}">
<columns>
<Column>
<Text text="Name"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Description"/>
</Column>
<Column>
<Text text="Number of Employee"/>
</Column>
<Column>
<Text text="Annual Revenue"/>
</Column>
<Column>
<Text text="Founded Year"/>
</Column>
<Column>
<Text text="Country"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{data>properties/name}"/>
<Text text="{data>properties/numberofemployees}"/>
<Text text="{data>properties/annualrevenue}"/>
<Text text="{data>properties/founded_year}"/>
<Text text="{data>properties/country}"/>
</cells>
</ColumnListItem>
</items>
</Table>

 

 

 

  • Page title can be optionally changed to Company Factsheet. Click on the Save button to save all changes and then Click on Run/Play button to Run the Web applications.

 

  • This will launch the Fiori application in a new browser tab and after successful user login, data from your third-party application via SAP Cloud Platform Open Connectors would be shown.

 

With this we come to an end of our blog on Simplified connectivity to third-party application via SAP Cloud Platform Open Connectors and ease of consumption of data from third-party application system in Fiori application.

In the next part of this blog series, steps to discover, consume and manage third-party CRM connections from SAP Cloud Platform API Management is showcased. In the next part of this blog series, we also cover how from Fiori application we can connect securely to SAP Cloud Platform API Management and use API Proxies on SAP Cloud Platform API Management to set the required authorization token. With this authorization token no longer would have to be specified in plain text on the client side JavaScript.

To know more about SAP Cloud Platform Open Connectors visit us at SAP Community

 


    

Assigned Tags

      28 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Eng Swee Yeoh
      Eng Swee Yeoh

      Hi Divya

       

      Thanks for sharing more about Open Connectors.

       

      I would like to ask about the authentication part from the Fiori app. From my limited knowledge of Javascript, the source codes are not secured and easily viewable from browser (e.g. using Developer Tools in Chrome). From the example you provided, the normalized authentication token is hardcoded into the createDataModel function in models.js.

       

      Wouldn't this mean that anyone would then be able to extract this token and access this specific Open Connector instance from any other HTTP/REST client? If that connector instance links to an API related to sensitive/confidential data, this might be a security risk.

       

      Would like to hear your feedback/comment on this matter.

       

      Regards

      Eng Swee

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Eng Swee,

      Thanks a lot for your feedback and totally agree with your view point. The authorization token or an API key must be specified on the server side or on an API Management layer like SAP Cloud Platform API Management.

      The blog has been updated with appropriate disclaimer.

      Thanks and Best Regards,

      Divya

      Author's profile photo Eng Swee Yeoh
      Eng Swee Yeoh

      Hi Diyva

       

      Thanks for your response. Since this post contains quite detailed steps, would it be possible for you to also show how the authentication be achieved on (i) server side, and (ii) API management layer? Maybe Part 4 of this blog series?

       

      I understand for the sake of simplicity, you have hardcoded the token. However, being able showcase an end-to-end design that is a viable productive development would add more value and credibility that the approach could be a real use case.

       

      Since this is a very new area, I'm sure there will be others like me who will also appreciate having a holistic example that could be a reference during actual implementation. I for one would like to know how this could be achieved on server side, as well as how the Fiori app would authenticate in API management in a secure manner.

       

      Regards

      Eng Swee

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Eng Swee,

      Thanks for the feedback. The current blog series has been extended to show case setting of the authorization header via API Proxies on the SAP Cloud Platform API Management.

      Detailed steps covered in this blog and with this authorization token no longer needs to be specifed on the client side JavaScript side.

      Thanks and Best Regards,

      Divya

      Author's profile photo Eng Swee Yeoh
      Eng Swee Yeoh

      Hi Diyva

       

      Thanks so much for accommodating to my request. I've read part 4 (and associated links) and it looks great. I now have a much better idea on how this is achieved end-to-end. Will have to find some time to run through all the steps in the trial system. Thanks again!

       

      Regards

      Eng Swee

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Eng Swee,

      Thanks a lot for your feedback and suggestions, it helped us to improve the blog series further and happy to hear the positive response from your side on the blogs.

       

      Thanks and Best Regards,

      Divya

      Author's profile photo Saujanya Gutala
      Saujanya Gutala

      Hi Divya

      Thanks for posting this series of blogs. I am trying to replicate it my trial account ,my  Cloud connector is connected to CRMhub spot , but I don't see any data in my UI5 demo app.

      Can you please confirm the details for this step :

      var sHeaders = {"authorization":"provide_your_authenticated_connector_token_from_SAP_Cloud_Platform_Open_Connectors"};

      I am new to this topic, not sure which token needs to be copied. Please provide some details further . Thank you

       

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Saujanya,

      The authorization header value can be fetched from SAP Cloud Platform Open Connectors , connector instance created by you. Details of this is available in the blog here . The authorization header value will be in the formation organization {org_secret} user {user_secret} element {element_secret}.

       

      Thanks and Best Regards,

      Divya

      Author's profile photo Saujanya Gutala
      Saujanya Gutala

      Thanks Divya.

      its working now :).

       

       

      Author's profile photo Raju Rajan
      Raju Rajan

      Hi Divya,

      I can't see trustall option in my destination. I am not getting 200 status during my connection test.

      Can you please help to resolve my issue?

      Thanks and Regards

      RK

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Ram,

      You can specify TrustAll for the destination properties with value set to true. This property is not available in the drop down however you can type the value in.

      To trouble shoot, can you check if you are getting the response from the API Docs field on the created connector instance in your SAP Cloud Platform Open Connectors tenant. Also retry from a test console tool like Postman.

      It would be great if you could share some more details, screenshot of the error / status that you are seeing in your connection test.

      Thanks and Best Regards,

      Divya

      Author's profile photo Raju Rajan
      Raju Rajan

      Hi Divya,

       

      Thanks for reply. Please find attached error and no data screenshot.

       

      Thanks and Regards

      RK

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Ram,

      Kindly confirm if the following code snippet is added into neo-app.json file of the Fiori application.  Also in the same tenant where your Fiori application is running you have the destination named openconnectors created with WebIDEUsage flag set to true.

      { "path": "/elements/api-v2/accounts", "target": { "type": "destination", "name": "openconnectors", "entryPath": "/elements/api-v2/accounts" }, "description": "Open Connectors" },

       

      Thanks and Best Regards,

      Divya

      
      
      
      Author's profile photo Raju Rajan
      Raju Rajan

      Hi Divya,

      Yeah, It is there. Please find attached screenshot as a reference.

      Thanks and Regards

      RK

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Ram,

      Apologies for the delay in response.  The error says that the destination openconnectors is not found.  As the next round of trouble shooting confirm the following :-

      • The destination named openconnectors is available / created in the tenant where the Fiori application is running
      • In the additional properties tab of the destination openconnectors WebIDEEnabled property flag is set to true.
      • Clear up the browser cache and then reload WebIDE and the Fiori application after the browser cache clearance .

       

      Thanks and Best Regards,

      Divya

       

      Author's profile photo Raju Rajan
      Raju Rajan

      Thanks for reply.

      Please find attached screenshot of destination and connection test result. I am still getting no data.

      BR,

      RK

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Ram,

      Thanks for sharing the screen shot.  In the screenshot, there is a mismatch in the destination file name.

      In the neo-app.json file, the name of the destination is openconnectors and in the SAP Cloud Platform cockpit the name of the destination is oppenConnectors. Kindly rename the destination file to openconnectors in the cockpit and then clear the browser cache, reload the WebIDE project and restart the application. Hopefully this would resolve the issue.

      Thanks and Best Regards,

      Divya

      Author's profile photo Jose Gregorio Vasquez Medina
      Jose Gregorio Vasquez Medina

      Hi. I resolved the problem likes this:

       

      Sap Web Ide Full Stack menu: Tools->Sap Cloud Platform Cockpit (this patch send me to others url for DESTINATION)

       

       

      There I added the destination and it worked.

       

       

      Author's profile photo Siddhesh Gole
      Siddhesh Gole

       

      Hi Divya,

      i have a query regarding URL that we are providing while creating new destination.
      Can you please elaborate the significance of URL field?(https://api.openconnectors.ext.hanatrial.ondemand.com)

      Because the connector site URL for me on the browser is https://my.openconnectors.ext.hanatrial.ondemand.com  but using this as the value does not provide output on executing the fiori application

      Thanks & Regards,
      Siddhesh Gole.

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Dear Siddhesh,

      The endpoint https://my.openconnectors.ext.hanatrial.ondemand.com is the endpoint for the SAP Cloud Platform Open Connectors UI. This is what you would be seeing in the browser header bar .

      For connecting to the authenticated connectors from a Fiori application or any other application or service you would have to connect via the API based access and the API based access is then via https://api.openconnectors.ext.hanatrial.ondemand.com.

      Thanks and Best Regards,

      Divya

      Author's profile photo Philipp Wagner
      Philipp Wagner

      Hi Divya,

      I followed your steps but when I run the WebIDE, there is no data transfered (see attached).

       

      Any idea why there is no data transfered?

      Thanks a lot and Best Regards

      Philipp

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Philipp,

      Can you check what is the error in your Chrome -> Developer Tools , under network tab.  This would help to identify the issue.

      Thanks and Best Regards,

      Divya

      Author's profile photo Philipp Wagner
      Philipp Wagner

      Hi Divya,

       

      thank you for your fast response. But I just found the error for myself. In the neo-app.json I wrote "openConnectors" as the name instead of "openconnectors".

      Now it is working! Really nice series of blogs!

      Best Regards

      Philipp

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Philipp,

      Glad to hear that the application is working now 🙂 and thanks a lot for your kind words for the blog series.

      Thanks and Best Regards,

      Divya

      Author's profile photo Karthikeyan Sathyanarayanamurthy
      Karthikeyan Sathyanarayanamurthy

      Hi Divya Mary,

       

      Now that Business Application Studio is available, can we do the same thing in Business Application Studio ?

      Regards,

      Karthik

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Karthik,

      This should be possible to perform this exercise from SAP Business Application Studio as well. Some of the steps described would vary for the Cloud Foundry environment.

      Thanks and Best Regards,

      Divya

      Author's profile photo Fattouma Merdassi
      Fattouma Merdassi

      hi there

      please I want to do the same thing in the SAP BAS but as you said the steps described would vary for the Cloud Foundry environment, can you explain plese and thanks

      Author's profile photo Fattouma Merdassi
      Fattouma Merdassi

      @Divya Mary,