<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3_dark"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-componentpreload="off"
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div style="height: 100%;"
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.setDensity();
},
setDensity: function({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
{
"_version": "1.12.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"odataDemo": {
"uri": "https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.77.2",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.export": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"": {
"dataSource": "odataDemo",
"settings": {
"tokenHandling": false,
"preliminaryContext": true
},
"preload": true
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true
}
}
}
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="demo.controller.App"
displayBlock="true"
height="100%"
>
<App id="rootApp">
<Page id="page" title="Spreadsheet" backgroundDesign="List">
<headerContent>
<Button id="exportButton"
text="Export"
type="Emphasized"
press=".onExportPress"
enabled="false"
/>
</headerContent>
<Table id="table"
busyIndicatorDelay="600"
sticky="InfoToolbar"
growing="true"
items="{
path: '/Orders',
templateShareable: false,
parameters: {
expand: 'Customer',
select: 'OrderID, Customer/CustomerID, Customer/CompanyName'
}
}"
updateFinished=".onDataLoaded"
>
<columns>
<Column>
<Text text="Order ID" />
</Column>
<Column>
<Text text="Customer Name" />
</Column>
</columns>
<ColumnListItem>
<Text text="{OrderID}" />
<Text text="{Customer/CompanyName}" />
</ColumnListItem>
</Table>
</Page>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/export/Spreadsheet",
], function(Controller, Spreadsheet) {
"use strict";
return Controller.extend("demo.controller.App", {
createColumnConfig: function() {
return [
{
label: "Order ID",
property: "OrderID",
},
{
label: "Customer Name",
property: "Customer/CompanyName", // dataUrl should include "$expand=Customer"
},
];
},
onExportPress: function() {
const listBinding = this.byId("table").getBinding("items");
const entryPath = "/sap.app/dataSources/odataDemo/uri";
const serviceUrl = this.getOwnerComponent().getManifestEntry(entryPath);
return listBinding.getLength() < 1 ? null : this.exportSpreadsheet({
workbook: {
columns: this.createColumnConfig(),
},
dataSource: {
type: "OData",
useBatch: true,
serviceUrl: serviceUrl,
headers: listBinding.getModel().getHeaders(),
dataUrl: listBinding.getDownloadUrl(), // includes the $expand param.
/*E.g.*/ count: 5, // usually: listBinding.getLength()
/*E.g.*/ sizeLimit: 5,
},
worker: true, // should be false if mock server or CSP enabled
// For https://stackoverflow.com/q/65498828/5846045
fileName: "myExportedDataFromODataV2.xlsx",
});
},
exportSpreadsheet: function(settings, fnSuccess, fnFail) {
return new Spreadsheet(settings)
.build()
.catch(typeof fnFail === "function" ? fnFail.bind(this) : null)
.then(typeof fnSuccess === "function" ? fnSuccess.bind(this) : null);
},
onDataLoaded: function() {
this.byId("exportButton").setEnabled(true);
},
});
});