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

Part 11: Upload data from Fiori application into Google Drive using SAP Cloud Platform Open Connectors

Many a times you would like the data present in your Fiori application to be uploaded into cloud storage applications like say Google Drive.

To achieve the scenario, the following high level steps are required :-

  1. Conversion of the data present in your Fiori application into comma separated value ( CSV ) format.
  2. Upload of the CSV data to a cloud storage application like Google Drive.

The utility functions ExportTypeCSV and Export available in UI5 libraries enables the conversion of any data model ( JSON or OData) into comma separated format and can be used in your UI5 project to quickly convert the data into CSV format.

SAP Cloud Platform Open Connectors provides robust, feature rich, pre-built connectors to various third-party cloud storage application like Google Drive and can be used to upload the generated CSV file to one or more third-party storage application of your choice. The picture below shows the scenario blueprint .

 

 

In this blog detailed steps to build and test this scenario has been showcased.

Prerequisites

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

Google Application Creation:

In order to consume Rest APIs of Google Apps an application needs to be created that communicates securely with SAP Cloud Platform Open Connectors. In this blog details steps for creation of the Google Apps has been captured.

 

  • Enable Google Drive APIs for your project by selecting option Enables APIs and Services 

 

  • Search and select for the Google Drive API and then click on Enable to activate the API usage for your project.

 

 

  • Click on Credentials and then select Create Credential.

 

  • Navigate to the OAuth consent screen to provide a consent application. Enter an application name say connectors and specify auth.cloudelements.io as the authorized domain.

 

  • Navigate to the Credentials tab, select OAuth Client ID option from the Create credentials button.

 

  • In the Create OAuth client ID form, select Web application as Application type, enter connectors as the Name and enter https://auth.cloudelements.io/oauth as the Authorized redirect URIs and then click on the Create button.

  • After the OAuth client application is created, your client ID and client secret is shown in the OAuth client dialog. Copy the client id and client secret. This copied client id and secret will be required in creating an authenticated connectors to your Google Drive application from SAP Cloud Platform Open Connectors.

Connect to Google Drive from SAP Cloud Platform Open Connectors

In this section, steps to seamlessly and securely connect to the third-party cloud applications via SAP Cloud Platform Open Connectors has been covered. SAP Cloud Platform Open Connectors is available for test, explore and try out in SAP Cloud Platform trial. If you have not enabled SAP Cloud Platform Open Connectors in your trial tenant, refer this blog to enable it.

 

  • From the services tab, search and select Open Connectors tile and click on the Go to Service link.

 

  • You would be navigated to SAP Cloud Platform Open Connectors Home or Landing page.

 

  • Click on the Connectors tab to view all the available pre-built, feature rich connectors.

 

 

  • In the search bar, type in document to view all connectors for third-party document hub. In this exercise, since Google Drive is used and therefore select the Google Drive connectors. You can also explore and try out third-party connectors of your choice from the available connectors catalog.
  • Hover over the Google Drive connector and select the option Authenticate to connect to your own Google Drive tenant.

 

  • You would be navigated to the Create Authenticated Connector page, enter a name for your authenticated connector say myGoogleDrive. Then click on the Show Optional Field to enter your Google Drive application API key and secret.

Note:- Based on your selected third-party application connector, the configuration options in this screen may vary.

  • In the API Key enter your Google OAuth Client ID copied before and in the API Secret enter your Google OAuth Client secret copied before. Click on Create Instance button.

 

  • Once you click on Create Instance button it will open new window to authenticate with your Google Credentials.Proceed with the same and click on allow application to access your Google Drive data.

Note:- In case your Google OAuth application that you are using in this step is not yet verified by Google, you would see a warning during your re-direct to Google after you click on Create Instance

  • To the newly created Google OAuth application which is not yet verified by Google, select Advanced link. From the advanced section, select Go to cloudelements.io option to proceed with your Google OAuth flow.

 

Note:- After you log-in using your Google credentials , you might be prompted to Allow access to access the resources as a part of the standard OAuth handshake.

  • After the authenticated connection to your third-party application has been created successfully you would be able to test out the connection from SAP Cloud Platform Open Connectors. To try out the REST APIs for the specific third-party application, click on the option Test in the API Docs.

  • This would launch the integrated OpenAPI specification based API Documentation for your third-party applications so that you can test and try out the connectors from SAP Cloud Platform Open Connectors.
  • Select any of the available Resources say files and click on Try it Out to test the connectivity to third-party applications and then click on the Execute Button
  • This would show the CURL command with the harmonized REST URLs to your third-party application and the normalized authentication token which can be used to securely and seamless connect to your third-party application.

 

  • Copy the Authorization token header value and this would be useful in uploading the data from your Fiori application into Google Drive

Create destination to SAP Cloud Platform Open Connectors and SAP Gateway ES5 demo system

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 REST URLs for the third-party document 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/elements/api-v2
  • 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.

  • In the Fiori application, we would be consuming an OData service from SAP Gateway ES5 system and therefore a destination for SAP Gateway ES5 system as described in this developer tutorial would have to be created.
  • Select New Destination to create a new destination to SAP Gateway ES5
Field Name Value
Name SAP_Gateway_ES5
Type HTTP
Description SAP Gateway ES5
URL https://sapes5.sapdevcenter.com
Proxy Type Internet
Authentication BasicAuthentication
User Your ES5 Gateway user (e.g. p123456789)
Password Your ES5 Gateway password
  • Add the following Additional Properties fields by clicking on the New Property button once for each property.
Field Name Value
WebIDEEnabled true
WebIDESystem gateway
WebIDEUsage odata_gen, odata_abap, bsp_execute_abap

 

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 products from the SAP Gateway ES5 application in a simple list view and would be uploading this product list into Google Drive tenant.

  • 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 ManageProducts and namespace say com.demo 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.
  • Add in the reference to the SAP Gateway ES5 OData service to your project and for this right click on the generated project and then select New and then OData service.

  • In the New OData Service wizard, select Service Catalog and then select the SAP Gateway ES5 system from the drop box. Wait till all the OData services present in SAP Gateway ES5 system if fetched and shown in the list.

 

  • Search and select the GWSample_Basic service and click on Next.

  • Select the option Use default model and then click on Next. In the next Confirmation dialog click on Finish to add the OData service reference to your 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": "/openconnectors",
"target": {
"type": "destination",
"name": "openconnectors"
},
"description": "Open Connectors"
},

 

  • Using the data binding, ODataModel can be bound to the UI elements to render the products list in a simple table view. Expand and select the App.view.xml file from the generated code and copy and paste the snippet below.
<Table width="auto" id="productlist" items="{/ProductSet}" updateFinished="onListUpdateFinished" noDataText="No products data"
class="sapUiResponsiveMargin">
<headerToolbar>
<Toolbar id="lineItemsToolbar">
<Button text="Upload to Google Drive" press="onUploadToGoogleDrive"></Button>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Product"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Supplier"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="Price"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Name}" text="{Description}"/>
<Text text="{SupplierName}"/>
<ObjectNumber number="{ path: 'Price', formatter: '.formatter.numberUnit' }" unit="{CurrencyCode}"/>
</cells>
</ColumnListItem>
</items>
</Table>

  • In the controller App.controller.js, the event listener to the onUploadToGoogleDrive function needs to be added. This event would be invoked when ever the user would press the Upload to Google Drive button.
  • In this event handler implementation, the data model associated with the view file would be read and UI5 helper utility ExportTypeCSV and Export function would be used to read the data present in ProductSet collection as the CSV file. This csv file content would then be persisted in Google Drive using SAP Cloud Platform Open Connector in file named data.csv.
  • Expand and select the App.controller.js file from the generated code. Add in the reference for Export, ExportTypeCSV and MessageToast library. The MessageToast library has been used to update the user about the response message returned from SAP Cloud Platform Open Connectors.  Copy and paste the snippet below as shown in the screenshot.
"sap/m/MessageToast",
"sap/ui/core/util/Export",
"sap/ui/core/util/ExportTypeCSV"

  • Update the function(Controller) function to take in MessageToast, Export and ExportTypeCSV input variables as shown in the screenshot below.

  • Copy and paste the snippet below for the onUploadToGoogleDrive event handler in the App.controller.js file
onUploadToGoogleDrive: function () {

sap.ui.core.BusyIndicator.show();

var oModel = this.getView().getModel();
var oExport = new sap.ui.core.util.Export({
exportType: new sap.ui.core.util.ExportTypeCSV({
separatorChar: ";",
charSet: "UTF-8"
}),
models: oModel,
rows: {
path: "/ProductSet"
},
columns: [{
name: "Product Name",
template: {
content: {
path: "Name"
}
}
}, {
name: "Description",
template: {
content: {
path: "Description"
}
}
}, {
name: "Supplier",
template: {
content: {
path: "SupplierName"
}
}
}, {
name: "Price",
template: {
content: {
path: "Price"
}
}
}]
});

oExport.generate().done(function (data) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
sap.ui.core.BusyIndicator.hide();
MessageToast.show(xhr.responseText);
}
};

xhr.open('POST', '/openconnectors/files?path=%2Fdata.csv', false);
xhr.setRequestHeader("Authorization","your_openconnectors_googledrive_token"
);

var formData = new FormData();
formData.append("file", data);
xhr.send(formData);
}).always(function () {
this.destroy();
});
}

 

 

 

  • In the copied code snippet to provide replace value of the authorization token

    your_openconnectors_googledrive_token with the authenticated Google Drive connector authorization token from SAP Cloud Platform Open Connectors.

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. Refer this blog , to securely connect to third-party application from Fiori application using SAP Cloud Platform API Management.

 

 

  • 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, list of products from the SAP Gateway ES5 system would be shown. It might take a little while to fetch all the products list from SAP Gateway ES5 system.

 

Testing Upload to Google Drive flow

  • Once the data is fetched press the Upload to Google Drive button to upload the products list from SAP Gateway ES5 system into your Google Drive tenant.

 

 

  • Login to your Google Drive tenant and a new file named data.csv would be available in your Google Drive tenant.

 

 

More blogs on SAP Cloud Platform Open Connectors available in SAP Community.

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Divya,

       

      I tried the given steps. I am getting an error on posting the document.

      Can you please let me know what could be the issue here?

       

      In the destinations,

      https://my.openconnectors.ext.hanatrial.ondemand.com - This gives a 200 OK Code

      https://api.openconnectors.ext.hanatrial.ondemand.com - This gives a 302 moved permanently Code.

      I have tried using both; but I get a blank response for the line

      MessageToast.show(xhr.responseText);

       

      In the line,  xhr.open('POST', '/openconnectors/files?path=%2Fdata.csv', false);

      The /openconnectors refers to the destination; right?

      Please let me know what could be the issue.

       

      Regards,

      Karan

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

      Hi Karan,

      The endpoint in the destination should be  be https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2 instead of https://api.openconnectors.ext.hanatrial.ondemand.com as was previously mentioned. Thanks for finding the issue and apologize for the inconvenience caused.

      and /openconnectors refers to the destination.

      The blog has been updated with the correct destination URL link.

      Thanks and Best Regards,

      Divya

      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Divya,

       

      Thank you for the response. On editing the destination and checking the connection, I am getting the below message. In the destination, the Proxy Type is Internet and Authentication is No Authentication. I am getting a 415 error code in console.

      1. {requestId: "5c3f0ac2e4b010c30ad2afad", message: "Incorrect Content-Type"}
        1. message"Incorrect Content-Type"
        2. requestId"5c3f0ac2e4b010c30ad2afad"

       

      Regards,

      Karan

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

      Hi Karan,

      Since in the destination, the authentication type has been set to NoAuthentication it is showing 401 error and it can be ignored.  The authorization token that is required for the connection is being passed from the Fiori application in the controller class.  From the copied snippet, you need to replace the text your_openconnectors_googledrive_token with your Google Drive connectors token from SAP Cloud Platform Open Connectors.

      Can you share the screenshot of your network tab?

      Thanks,

      Divya

      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Divya,

       

      Below is the screenshot from the Network Tab.

      I deployed the application to SAP Cloud Platform and registered to a site. And I was able to get the upload functionality working. However, On standalone Web IDE, I get the message as indicated in the screenshot.

      Could this be a UI5 library version issue? Not sure because I changed the version in Web IDE and matched it to the portal site; but the same error persists.

       

      Regards,

      Karan

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

      Hi Karan,

      The Fiori application for me is working in the run mode without being deployed to SAP Cloud Platform.  It might be an issue with cache refresh of destinations. Try refreshing the browser cache and refresh webide tab.  This might resolve the issue for you.

      Happy to hear that in the deployed mode the application is running.  One of the advantage of using SAP Cloud Platform Open Connectors is that if you would like to use the same code but would like to deploy to a different cloud storage say one drive, then you just need to create an authenticated OneDrive connector in SAP Cloud Platform Open Connectors and get the new authorization token. Use this token in your application and the same code can be used to upload document to OneDrive .

      Thanks and Best Regards,

      Divya

      Author's profile photo riyaz mansuri
      riyaz mansuri

      I guess this configuration gives an error if we try to access our google drive from Fiori client mobile application ?

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

      Hi Riyaz,

      Kindly share more information about error that you get while invoking from the Fiori client mobile application.

      Thanks and Best Regards,

      Divya

      Author's profile photo Srinivasa Reddy Bhimanadham
      Srinivasa Reddy Bhimanadham

      Hi Divya,

      Thank you very much and Great Job. You explain very nice. I have followed your blog and able to Post the file in Google Drive.

      We are posting file it's fine. I have a small Question? how to get the file from Google Drive and Download file into Desktop.

      Could you please explain that scenario.

       

      Thanks and Best Regards,

      Srinivasa Reddy.

       

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

      Hi Srinivasa,

      Thanks a lot for your kind words and glad to hear that you liked the blog.

      For download of the files, you can use the GET APIs from SAP Cloud Platform Open Connectors and as input to the GET files you would have to pass in your file path , like if you would like to download the files which was uploaded as part of this example, the path would be /data.csv and in case you had posted the file a folder named demo then the path would be /demo/data.csv .

      Finally in this MDN link details about handling of the binary data is captured via xhr.

      Thanks and Best Regards,

      Divya

      Author's profile photo Srinivasa Reddy Bhimanadham
      Srinivasa Reddy Bhimanadham

      Hi Divya,

      Thank you very much for your response.

       

      Author's profile photo Srinivasa Reddy Bhimanadham
      Srinivasa Reddy Bhimanadham

      Hi Divya,

       

      I am able to download the file. I have a question in Post/Get service time I hot coded my Credentials like

      xhr.setRequestHeader("Authorization","your_openconnectors_googledrive_token"
      );

      How to avoid hot coded Credentials and How to get the Dynamic Credentials

      Could you please help me.

       

       Thanks and Best Regards,

      Srinivasa Reddy.

       

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

      Hi Srinivasa,

      This is great to hear that the download of the files are also working for your use-case via SAP Cloud Platform Open Connectors.

      In this blog, we have covered the steps to capture the steps to manage your connection and this would avoid the need to have hard-coded credentials in your JavaScript.

      Is it possible for you to share your full use-case/scenario so that we can find the best fit service/integration approach for you.

      Thanks and Best Regards,

      Divya

      Author's profile photo Srinivasa Reddy Bhimanadham
      Srinivasa Reddy Bhimanadham

      Hi Divya

       

      I am following your blog. It is explained very nice and also watching an open sap SAP Cloud

      Platform API Management course.

      I am facing issue in my trial account like

       

      I am looking for a few blogs all are facing the same issue.

       

      Could please help me. How to avoid the above issue in the trial account.

       

      Thanks and Best Regards,

      Srinivasa Reddy.

       

       

       

       

      Author's profile photo Tonu James
      Tonu James

      Hi Divya ,

      Thanks for the article .

      Just wanted to know if the same steps could be used for uploading and retrieving (POST/GET) an Image to Google cloud storage (Bucket) .

      I did the open connectors set up and able to upload files to Cloud storage via connector API doc test. However when I run in the UI getting error "Failed to load resource: the server responded with a status of 500"

       

      F12

       

      Could you provide any input.

       

      Thanks  ,

      Tonu

      Author's profile photo Dhruv GUPTA
      Dhruv GUPTA

      Hy Guys ,

       

      I was able to achieve but in controller i made the following changes than in the blog

       

      xhr.open('POST', 'https://api.openconnectors.trial.eu10.ext.hana.ondemand.com/elements/api-v2/files?path=%2Fdata.csv', false);
      instead of using destination i directly gave the url for posting to gdrive and it worked fine, security issues must be handled explicitly.
      please reward in comments if it solved your issue.
      KR
      Dhruv
      Author's profile photo Shreya Mishra
      Shreya Mishra

      Hi Divya Mary ,

      I followed the same steps but for a different third party service (Amazon S3) in my case. For testing purpose I added the auth token in my controller code (the same way how you added) but when I call the URL, it gives me a 404 error.

      Can you help me in sorting this out?

      Error

      Error