Please create demo for OpenUI5 #20
Labels
No Label
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: sheetjs/docs.sheetjs.com#20
Loading…
Reference in New Issue
Block a user
No description provided.
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Please create a demo for OpenUI5:
(OpenUI5 is the open source framework maintained by SAP SE that is used as a base for their UI5 enterprise version: https://ui5.sap.com/).
Here's a sketch after spending half an hour looking at the official documentation. Any sort of feedback on the OpenUI5 side would be appreciated, as there are some opportunities for improvement.
tl;dr: vendor script, load using
sap.ui.define
but name the function argument_XLSX
, referenceXLSX
in the component function body.OpenUI5 Starter
The Worklist App Tutorial creates a table. The code for step 4 is at https://sdk.openui5.org/entity/sap.m.tutorial.worklist/sample/sap.m.tutorial.worklist.04
Download the code sample by opening https://sdk.openui5.org/entity/sap.m.tutorial.worklist/sample/sap.m.tutorial.worklist.04 in a web browser and clicking the "Download" button. It will attempt to download a ZIP file
Extract the zip file and open a terminal window in the folder
Install dependencies:
The tool will display a URL:
/test/mockServer.html
for the displayed URL. For example, if the URL ishttp://localhost:6969
, then the correct page ishttp://localhost:6969/test/mockServer.html
When this was tested, there were 14 rows of data in the table.
Require SheetJS
webapp
folder:"./xlsx.full.min"
inwebapp/Component.js
(no.js
extension):alert(XLSX.version);
after the"use strict"
line:Stop and restart the server (
CTRL+C
then runnpm start
)Open
/test/mockServer.html
for the displayed URL.If the SheetJS library is properly loaded, the page will alert with the library version number (currently
0.20.3
)Button Callback
In this example, we will reuse the existing share button in the top-right corner. It is defined in
webapp/view/Worklist.view.xml
as follows:The event handler is
onShareEmailPress
in `webapp/controller/BaseController.js"../xlsx.full.min"
inwebapp/controller/BaseController.js
(note: it needs to be../
since the script is one folder up):onShareEmailPress
:mockServer
page again.When you click the mail icon, the page will alert with the SheetJS version number.
Export Data
It appears that, from the controller,
this.byId("table").getBinding("items").akeys
is a list of the keys of the displayed rows andthis.byId("table").getBinding("items").oModel.oData
is an object whose values are the underlying row data objects.aoo
will be an Array of Objects.json_to_sheet
will generate a worksheet.onShareEmailPress
:mockServer
page again.When you click the mail icon, the page will attempt to export the data.
Note that the extra columns are present in the oData objects. UI5 likely has an API for getting the relevant data.
The extra columns appear to fall in two categories:
For the purposes of the demo, suppressing those fields suffices.
getCurrentContexts
is apparently the recommended way of pulling the data objects:Each object must be inspected and the deferred and reference objects must be removed.
To avoid mutating the object directly,
fromEntries
/entries
is the best approach. An example is included in the caution admonition in "Array of Objects Input"That step would need to be run for each data object, resulting in the following snippet to generate an array of arrays:
If you have UI5 experience and find this example consistent with UI5 best practices, we'll look into adding it to the documentation.
@sheetjs Would you like this added to the main docs? I'd be happy to help clean this up and create OpenUI5 demo.