<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Table to CSV</title>
<script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- XML-based view definition -->
<script id="tableView" type="sapui5/xmlview">
<mvc:View controllerName="myTable.view" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:t="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" class="viewPadding">
<App>
<pages>
<Page title="Products Page" class="marginBoxContent">
<content>
<Link text="Mass upload" press="onConfirmDialog" />
<t:Table rows="{/}" title="" selectionMode="MultiToggle" visibleRowCount="5">
<t:columns>
<t:Column width="13rem">
<Label text="Reciver order" />
<t:template>
<Text text="{Reciverorder}" />
</t:template>
</t:Column>
<t:Column width="11rem">
<Label text="Statistical key figure" />
<t:template>
<Text text="{Statisticalkeyfigure}" />
</t:template>
</t:Column>
<t:Column width="11rem">
<Label text="Category" />
<t:template>
<Link text="{Category}" />
</t:template>
</t:Column>
<t:Column width="11rem">
<Label text="quantity" />
<t:template>
<Text text="{quantity}" />
</t:template>
</t:Column>
<t:Column width="11rem">
<Label text="UoM" />
<t:template>
<Text text="{UoM}" />
</t:template>
</t:Column>
<t:Column width="11rem">
<Label text="description" />
<t:template>
<Text text="{description}" />
</t:template>
</t:Column>
</t:columns>
</t:Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("myTable.view", {
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oModel);
},
csvJSON: function(csv) {
var lines = csv.split("\n");
var result = [];
var headers = lines[0].split(",");
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
var oStringResult = JSON.stringify(result);
var oFinalResult = JSON.parse(oStringResult.replace(/\\r/g, ""));
//return result; //JavaScript object
sap.ui.getCore().getModel().setProperty("/", oFinalResult);
},
onConfirmDialog: function() {
var that = this;
var dialog = new sap.m.Dialog({
title: 'Upload',
type: 'Message',
icon: 'sap-icon://upload',
content: [
new sap.ui.unified.FileUploader({
width: '100%',
uploadUrl: 'upload/',
change: function(oEvent) {
var file = oEvent.getParameter("files")[0];
if (file && window.FileReader) {
var reader = new FileReader();
reader.onload = function(evn) {
var strCSV = evn.target.result; //string in CSV
that.csvJSON(strCSV);
};
reader.readAsText(file);
}
dialog.close();
}
})
],
endButton: new sap.m.Button({
text: 'Cancel',
press: function() {
dialog.close();
}
})
});
dialog.open();
}
})
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#tableView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */