From a4b9998ff580ffacb9046693e2660c58eab8873f Mon Sep 17 00:00:00 2001 From: Asad Date: Thu, 26 Dec 2024 11:51:25 -0500 Subject: [PATCH] feat(docs): implemented OpenUI5 demo guide and integration examples - add implementation instructions for OpenUI5 framework - implemented data binding example with JSONModel - add HTML table rendering demo - include complete working example with setup steps - add tested deployment config --- .idea/.gitignore | 8 + .idea/docs.sheetjs.com.iml | 12 + .idea/git_toolbox_blame.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + docz/docs/03-demos/02-frontend/10-openui5.md | 548 +++++++++++++++++++ 6 files changed, 588 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/docs.sheetjs.com.iml create mode 100644 .idea/git_toolbox_blame.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 docz/docs/03-demos/02-frontend/10-openui5.md diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/docs.sheetjs.com.iml b/.idea/docs.sheetjs.com.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/docs.sheetjs.com.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/git_toolbox_blame.xml b/.idea/git_toolbox_blame.xml new file mode 100644 index 0000000..7dc1249 --- /dev/null +++ b/.idea/git_toolbox_blame.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..7156fee --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docz/docs/03-demos/02-frontend/10-openui5.md b/docz/docs/03-demos/02-frontend/10-openui5.md new file mode 100644 index 0000000..322687c --- /dev/null +++ b/docz/docs/03-demos/02-frontend/10-openui5.md @@ -0,0 +1,548 @@ +--- +title: Sheets in OpenUI5 Sites +sidebar_label: OpenUI5 +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. + +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. + +This demo uses OpenUI5 and SheetJS to process and generate a spreadsheets. We'll +explore how to load SheetJS in an OpenUI5 app and handle data binding with the +Model-View-Controller pattern. + +## Installation + +[The "Frameworks" section](/docs/getting-started/installation/frameworks) covers +installation with Yarn and other package managers. + +The library should be loaded via script tag in your HTML: + + + {``} + + +This will expose the `XLSX` global object which contains all the necessary methods. + + +## Internal State + +The various SheetJS APIs work with various data shapes. The preferred state +depends on the application. + +### JSON Model + +The OpenUI5 JSON Model provides ideal integration for spreadsheet data, enabling direct UI control binding. + +#### 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, using the values in the first rows as keys: + + + +
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 } +] +``` + +
+ +The OpenUI5 `JSONModel`[^1] is a client-side model implementation that stores data as JSON. +Here's a basic example of initializing a model, with a more complete implementation shown later: + + + + +```js +sap.ui.define(["sap/ui/model/json/JSONModel"], function (JSONModel) { + const oModel = new JSONModel({ presidents: [] }); +}); +``` + + + + +#### Updating State + +The SheetJS [`read`](/docs/api/parse-options) and [`sheet_to_json`](/docs/api/utilities/array#array-output) +functions simplify state updates. OpenUI5's JSONModel provides powerful two-way data binding +capabilities. + +```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 +``` + + + + +```js +_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 + +In OpenUI5, the `Model-View-Controller`[^2] 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. + +```xml title="Example XML for displayin array of objects" + + + + + + + +
+ + +
+ + + + // highlight-start + + + + + + + + + // highlight-end +
+ + +``` + + +#### Exporting Data + +The [`writeFile`](/docs/api/write-options) and [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input) +functions simplify exporting data. They are typically used in event handlers attached to buttons or other elements. + +A button press handler can generate a local file when clicked: + +```mermaid +flowchart LR + state((oModel\ngetProperty)) + ws(SheetJS\nWorksheet) + wb(SheetJS\nWorkbook) + file[(XLSX\nexport)] + state --> |json_to_sheet\n\n| ws + ws --> |book_new\nbook_append_sheet| wb + wb --> |writeFile\n\n| file +``` + +```js +/* 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(); + XLSX.utils.book_append_sheet(wb, ws, "Data"); + /* export to XLSX */ + XLSX.writeFileXLSX(wb, "SheetJSOpenUI5AoO.xlsx"); + } +``` + + +#### Complete Component + +This complete component example fetches a test file and displays the contents in a table. +When the export button is clicked, an event handler will export a file: + +```xml title="webapp/view/Main.view.xml" + + + + + + +
+ +
+ + +
+ +
+ + + + + + + + + + +
+