Skip to Content

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

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

 


                            
To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

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

    (1) 
    1. Divya Mary 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

      (1) 
      1. 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

        (0) 
        1. Divya Mary 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

          (1) 
          1. 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

            (0) 
            1. Divya Mary 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

              (1) 

Leave a Reply