From 7be3c234c3699c3b25148487042fab0f39338e2f Mon Sep 17 00:00:00 2001 From: Asad Date: Tue, 7 Jan 2025 11:45:50 -0500 Subject: [PATCH] docs(OpenuUI5): clarify tutorial goals & cleanup - removed some jargon for beginners - focused on outcomes over implementations - use long version of command-line flags --- .gitignore | 1 + docz/docs/03-demos/02-frontend/10-openui5.md | 32 +++++++++++--------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index f828735..f9a2c00 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ package-lock.json pnpm-lock.yaml /docs node_modules +.idea \ 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 index a66f968..189628c 100644 --- a/docz/docs/03-demos/02-frontend/10-openui5.md +++ b/docz/docs/03-demos/02-frontend/10-openui5.md @@ -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" ``` - +##### 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 {``} -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" ``` +##### 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 {``} -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`.