--- title: Sheets in UI5 Sites sidebar_label: OpenUI5 / SAPUI5 description: Build enterprise-grade applications with OpenUI5. Seamlessly integrate spreadsheets into your app using SheetJS. Bring Excel-powered workflows and data to the modern web. pagination_prev: demos/index pagination_next: demos/grid/index sidebar_position: 10 --- import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock'; [OpenUI5](https://openui5.org/) is a JavaScript framework for building enterprise-ready web applications. It is compatible with the SAPUI5 framework. [SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing data from spreadsheets. This demo shows how to handle spreadsheet data in OpenUI5 apps using SheetJS. You'll learn how to load spreadsheet files, process their data, and generate new spreadsheet exports. :::info pass [Docs Issue #20](https://git.sheetjs.com/sheetjs/docs.sheetjs.com/issues/20) includes a complete example starting from the OpenUI5 "Worklist App Tutorial". ::: ## Installation SheetJS libraries conform to the UI5 ECMAScript requirements[^1]. SheetJS libraries can be loaded in a UI5 site at different points in the app lifecycle. #### UI5 Module {#installation-define} The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) comply with AMD `define` semantics. They support `sap.ui.define` out of the box. If the SheetJS Standalone script is saved to `webapp/xlsx.full.min.js`, the base script `webapp/index.js` can load the `./xlsx.full.min` dependency: ```js title="webapp/index.js (loading the SheetJS dependency)" sap.ui.define([ // highlight-next-line "./xlsx.full.min", // relative path to script, without the file extension /* ... other libraries ... */ ], function ( // highlight-next-line _XLSX // !! NOTE: this is not XLSX! A different variable name must be used /* ... variables for the other libraries ... */, ) { // highlight-next-line alert(XLSX.version); // use XLSX in the callback }); ``` :::info pass In some deployments, the function argument was `undefined`. The standalone scripts add `window.XLSX`, so it is recommended to use `_XLSX` in the function arguments and access the library with `XLSX` in the callback. ::: #### HTML {#installation-html} UI5 is typically loaded in a `SCRIPT` tag in `webapp/index.html`. Similarly, [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) can be loaded with a `SCRIPT` tag in the same HTML page: {`\ `} This will expose the `XLSX` global object, which includes the functions listed in the ["API Reference"](/docs/api/) section of the documentation. :::caution pass **The SheetJS Standalone script must be loaded before the UI5 bootstrap script**: {`\ UI5 Walkthrough `} ::: ## Internal State The various SheetJS APIs work with various data shapes. The preferred state depends on the application. ### JSON Model The UI5 `JSONModel`[^2] is a client-side model implementation for JavaScript object data. Think of it like a container that holds your spreadsheet data. `JSONModel` provides powerful two-way data binding capabilities. UI5 will automatically updates your webpage whenever the data changes. It will also respond to changes when users interact with components in the webpage. #### State {#json-state} The example [presidents sheet](https://docs.sheetjs.com/pres.xlsx) has one header row with "Name" and "Index" columns. The natural JS representation is an object for each row, where the keys are specified in the first row:
SpreadsheetState
![`pres.xlsx` data](pathname:///pres.png) ```js [ { Name: "Bill Clinton", Index: 42 }, { Name: "GeorgeW Bush", Index: 43 }, { Name: "Barack Obama", Index: 44 }, { Name: "Donald Trump", Index: 45 }, { Name: "Joseph Biden", Index: 46 } ] ```
Here is a basic example of initializing a model. A more complete implementation will be shown later. ```js title="UI5 JSONModel for rows of data" sap.ui.define(["sap/ui/model/json/JSONModel"], function (JSONModel) { // highlight-next-line const oModel = new JSONModel({ presidents: [] }); }); ``` #### Updating State {#json-update} Starting from a spreadsheet file, the SheetJS [`read`](/docs/api/parse-options) method parses the data into a SheetJS workbook object[^3]. After selecting a worksheet, the [`sheet_to_json`](/docs/api/utilities/array#array-output) method generates row objects that can be assigned to the model. Here is a sample flow diagram and method for downloading a workbook, generating rows from the first worksheet, and updating a UI5 `JSONModel`: ```mermaid flowchart LR url[(Remote\nFile)] ab[(Data\nArrayBuffer)] wb(SheetJS\nWorkbook) ws(SheetJS\nWorksheet) aoo(array of\nobjects) model((JSON\nModel)) url --> |fetch\n\n| ab ab --> |read\n\n| wb wb --> |wb.Sheets\nselect sheet| ws ws --> |sheet_to_json\n\n| aoo aoo --> |setProperty\nfrom model| model linkStyle 1,2,3 color:blue,stroke:blue; ``` ```js title="Download workbook, extract data from first worksheet, and update JSONModel" _loadExcelFile: async function () { /* Download from https://docs.sheetjs.com/pres.xlsx */ const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer(); // highlight-start /* parse */ const wb = XLSX.read(f); // parse the array buffer /* generate array of objects from first worksheet */ const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet const data = XLSX.utils.sheet_to_json(ws); // generate objects /* update JSONModel */ this.getView().getModel().setProperty("/presidents", data); // highlight-end } ``` #### Rendering Data {#json-render} In UI5, the "Model-View-Controller"[^4] pattern is used to organize code and separate concerns. The view defines the UI structure, the controller handles the logic, and the model manages the data. The following example uses the `Table` component[^5] to display data. ```xml title="Example View XML for displaying an array of objects"
``` #### Exporting Data {#json-export} The `getProperty` method[^6] of the `JSONModel` pulls data from the UI5 model. If an array of objects was pushed with `setProperty`, the `getProperty` method will return an array of objects. The SheetJS [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input) function will create a SheetJS worksheet object[^7] from the data in the array. The [`book_new`](/docs/api/utilities/wb) method will create a SheetJS workbook object that includes the new worksheet. [`writeFile`](/docs/api/write-options) will attempt to generate a file and initiate a download. ```mermaid flowchart LR state((State\nJSONModel)) aoo[(Array of\nObjects)] ws(SheetJS\nWorksheet) wb(((SheetJS\nWorkbook))) file[(XLSX\nexport)] state --> |getProperty\n\n| aoo aoo --> |json_to_sheet\n\n| ws ws --> |book_new\n\n| wb wb --> |writeFile\n\n| file linkStyle 1,2,3 color:blue,stroke:blue; ``` Here is a sample method for exporting data from the UI5 `JSONModel` to XLSX: ```js title="Fetch data from JSONModel and export to XLSX" /* get model data and export to XLSX */ onExport: function () { const data = this.getView().getModel().getProperty("/presidents"); /* generate worksheet from model data */ // highlight-next-line const ws = XLSX.utils.json_to_sheet(data); /* create workbook and append worksheet */ const wb = XLSX.utils.book_new(ws, "Data"); /* export to XLSX */ XLSX.writeFileXLSX(wb, "SheetJSOpenUI5AoO.xlsx"); } ``` This method can be bound to the `press` event of a `sap.m.Button` control: ```xml title="Example View XML for exporting an array of objects to a workbook"