How to upload CSV file data in SAPUI5 and SAP Fiori Applications

9
8995

Hello everyone, in this blog we will show you how to upload CSV file data in SAPUI5 and SAP Fiori Applications. Lets get started.

output_ZZIbdx

Prerequisites

You should have basic understanding on building SAPUI5 applications. To get all beginner tutorials please check here.

UI Controls used

  • File Uploader from sap.ui.unified library
  • Table and Button from sap.m library

Step-by-Step Procedure

1. Create a SAPUI5 application in Eclipse IDE with one view and a controller. You project structure will look like below.

SAPUI5 Project Structure 2. Go to index.html and copy the below code.

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

		<script>
			sap.ui.localResources("fileupload");
			var app = new sap.m.App({initialPage:"idFileUpload1"});
			var page = sap.ui.view({id:"idFileUpload1", 
                                                viewName:"fileupload.FileUpload", 
                                                type:sap.ui.core.mvc.ViewType.XML});
			app.addPage(page);
			app.placeAt("content");
		</script>
	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

3. Go to FileUpload.view.xml file and copy the below code to build the view.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m" xmlns:u="sap.ui.unified" xmlns:l="sap.ui.layout.form"
	controllerName="fileupload.FileUpload" xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Demo on CSV File Upload">
	<content>
		<l:SimpleForm editable="true">
		 <l:content>
		  <Label text="File Name">
		  </Label>
		<VBox>
		 <u:FileUploader id="idfileUploader" width="50%"
		    sameFilenameAllowed="false" buttonText="" fileType="CSV"
		    placeholder="Choose a CSV file" style="Emphasized">
		</u:FileUploader>
		<Button text="Upload" press="onUpload"></Button>
		</VBox>
		</l:content>
		</l:SimpleForm>

		<Table id="idTable" items="{/}">
		<items>
		    <ColumnListItem>
			<cells>
			<Text text="{VBELN}"></Text>
			<Text text="{ERDAT}"></Text>
			<Text text="{VBTYP}"></Text>
			<Text text="{TRVOG}"></Text>
			<Text text="{AUART}"></Text>
			</cells>
		   </ColumnListItem>
                </items>
	        <columns>
			<Column>
			<Text text="Sales Document"></Text>
			</Column>
			<Column>
			<Text text="Date"></Text>
			</Column>
			<Column>
			<Text text="Type"></Text>
			</Column>
		        <Column>
			<Text text="Sales Org"></Text>
			</Column>
			<Column>
			<Text text="Category"></Text>
			</Column>
		</columns>
		</Table>
		</content>
	</Page>
</core:View>

4. Lets see what we have done in the previous step.We created the view to show File Uploader, Button and Table UI control.

5. Go to FileUpload.controller.js file and copy the below code.

sap.ui.controller("fileupload.FileUpload", {

    onUpload : function(e) {
	
	var fU = this.getView().byId("idfileUploader");
	var domRef = fU.getFocusDomRef();
	var file = domRef.files[0];
	
	
	// Create a File Reader object
	var reader = new FileReader();
	var t = this;
	
	reader.onload = function(e) {
	    var strCSV = e.target.result;
	    var arrCSV = strCSV.match(/[\w .]+(?=,?)/g);
	    var noOfCols = 5;

	    // To ignore the first row which is header
	    var hdrRow = arrCSV.splice(0, noOfCols);

	    var data = [];
	    while (arrCSV.length > 0) {
		var obj = {};
		// extract remaining rows one by one
		var row = arrCSV.splice(0, noOfCols)
		for (var i = 0; i < row.length; i++) {
		    obj[hdrRow[i]] = row[i].trim()
		}
		// push row to an array
		data.push(obj)
	    }
	    
	    // Bind the data to the Table
	    var oModel = new sap.ui.model.json.JSONModel();
	    oModel.setData(data);
	    var oTable = t.byId("idTable");
	    oTable.setModel(oModel);
	};
	reader.readAsBinaryString(file);
    }
});

6. The above code inside onUpload event handler will read the data from the CSV file and bind the data to the Table.

You have successfully created a SAPUI5 application to load the data from CSV file. Please stay tuned to us for more SAPUI5 Tutorials.

like-128

 

  • Simply fantastic guys.

    Regs,
    Pavan Golesar

    • TeamSAPLearners

      Thank you Pavan

      Thanks,
      Prakash

  • Syed Mushtaq Ali

    Hi Team,
    Great Work
    Thanks a Lot for this post. I was searching for this from a very long Time.
    I would like to add the .csv file that is not available in this post. 🙂

    Please find the below .csv file format which should be copied into a CSV file.

  • Mohamed Ettaibi

    Please i have a question, i saw in fileUpload view that there is {VBELN} and other fields.. Should i define any model,? how does it apply data binding?

  • hema manwani

    hi.could any one help on how to download data from table to excel or CSV file ?

  • kunal singhal

    Hi Team,

    Thankyou. It was very helpfull. But can you can tell what changes i have to make to upload the same file to backend system

  • mauricio

    Hi. Do you have any example using gateway to upload CSV into backend? I tried with FileUpload but it’s not working.

    Txs!

  • Arindam Samanta

    Hello,

    Thank you for this. I have created the same file and getting below error –

    Uncaught TypeError: Cannot read property ‘createTextField’ of undefined
    at f.F.init (:8080/FileUploader/resources/sap/ui/unified/FileUploader.js:6)
    at f.constructor (sap-ui-core.js:134)
    at f.constructor (sap-ui-core.js:134)
    at f.constructor (sap-ui-core.js:134)
    at new f (sap-ui-core.js:122)
    at h (:8080/FileUploader/resources/sap/ui/core/library-preload.json/sap/ui/core/XMLTemplateProcessor.js:6)
    at e (:8080/FileUploader/resources/sap/ui/core/library-preload.json/sap/ui/core/XMLTemplateProcessor.js:6)
    at d (:8080/FileUploader/resources/sap/ui/core/library-preload.json/sap/ui/core/XMLTemplateProcessor.js:6)
    at y (:8080/FileUploader/resources/sap/ui/core/library-preload.json/sap/ui/core/XMLTemplateProcessor.js:6)
    at h (:8080/FileUploader/resources/sap/ui/core/library-preload.json/sap/ui/core/XMLTemplateProcessor.js:6)

    Could you please give any suggestion or idea to rectify the error or any solution to come out from this error!

    Thanks,
    Arindam Samanta.