Skip to Content
Technical Articles

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

 


            
17 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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

      • 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

        • 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

          • 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

          • 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

  • 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

     

    • 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

  • 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

    • 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

        • 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

          
          
          
          • 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

             

          • 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