sheetjs/docs.sheetjs.com
1
Fork 4
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

docs(OpenuUI5): clarify tutorial goals & cleanup

Browse Source 
- removed some jargon for beginners
- focused on outcomes over implementations
- use long version of command-line flags
This commit is contained in:
Asad 2025-01-07 11:45:50 -05:00
parent 84b839627e
commit 7be3c234c3
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ package-lock.json
pnpm-lock.yaml
/docs
node_modules
.idea

32
docz/docs/03-demos/02-frontend/10-openui5.md
View File

@ -18,9 +18,9 @@ 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 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.
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
@ -108,7 +108,9 @@ depends on the application.
### JSON Model
The OpenUI5 JSON Model provides ideal integration for spreadsheet data, enabling direct UI control binding.
The OpenUI5 JSON Model is a way to store and manage your data in a format that's easy
for JavaScript to work with. Think of it like a container that holds your spreadsheet
data and automatically updates your webpage whenever the data changes.
#### State
@ -271,6 +273,7 @@ flowchart LR
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:
##### View Implementation {#view-implementation}
```xml title="webapp/view/Main.view.xml"
<mvc:View
controllerName="sheetjs.openui5.controller.Main"
@ -308,7 +311,7 @@ When the export button is clicked, an event handler will export a file:
</Page>
</mvc:View>
```
##### Controller Implementation {#controller-implementation}
```js title="webapp/controller/Main.controller.js"
sap.ui.define(
["./BaseController", "sap/ui/model/json/JSONModel"],
@ -355,14 +358,14 @@ sap.ui.define(
This demo was tested in the following environments:
| OpenUI5 | generator-easy-ui5 | Date |
|:--------|---------|---------|
| `1.131.1` | `3.8.1` | 2024-12-24 |
| `1.131.1` | `3.8.1` | 2025-01-07 |
:::
1) Create a new site:
```bash
npm i -g generator-easy-ui5
npm i --global generator-easy-ui5
npx yo easy-ui5 app
```
@ -394,8 +397,8 @@ npm start
{`<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</CodeBlock>
5) Replace `webapp/view/Main.view.xml` with the complete implementation above.
6) Replace `webapp/controller/Main.controller.js` with the complete implementation above.
5) Replace `webapp/view/Main.view.xml` with the complete [implementation above](#view-implementation).
6) Replace `webapp/controller/Main.controller.js` with the complete [implementation above](#controller-implementation).
The page will refresh and show a table with an Export button. Click the button and the page will
attempt to download `SheetJSOpenUI5AoO.xlsx`.
@ -437,7 +440,7 @@ In this example, the component directly renders the HTML table in the model thro
the inner table from the rendered HTML using `getElementsByTagName("table")[1]`, then pass it to [`table_to_book`](/docs/api/utilities/html#html-table-input)
to create a workbook that preserves all features.
##### View Implementation {#view-implementation-html}
```xml title="webapp/view/Main.view.xml"
<mvc:View
controllerName="sheetjs.openui5.controller.Main"
@ -455,6 +458,7 @@ to create a workbook that preserves all features.
</mvc:View>
```
##### Controller Implementation {#controller-implementation-html}
```js title="webapp/controller/Main.controller.js"
sap.ui.define(
[
@ -511,14 +515,14 @@ sap.ui.define(
This demo was tested in the following environments:
| OpenUI5 | generator-easy-ui5 | Date |
|:--------|---------|---------|
| `1.131.1` | `3.8.1` | 2024-12-24 |
| `1.131.1` | `3.8.1` | 2025-01-07 |
:::
1) Create a new site:
```bash
npm i -g generator-easy-ui5
npm i --global generator-easy-ui5
npx yo easy-ui5 app
```
@ -550,8 +554,8 @@ npm start
{`<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</CodeBlock>
5) Replace `webapp/view/Main.view.xml` with the complete implementation above.
6) Replace `webapp/controller/Main.controller.js` with the complete implementation above.
5) Replace `webapp/view/Main.view.xml` with the complete [implementation above](#view-implementation-html).
6) Replace `webapp/controller/Main.controller.js` with the complete [implementation above](#controller-implementation-html).
The page will refresh and show a table with an Export button. Click the button and the page will
attempt to download `SheetJSOpenUI5HTML.xlsx`.