Spreadsheet: Read-only and disabled behavior

[marcobsidian]

Description

Within our application, we want to use the Vaadin Spreadsheet as a File Preview for Excel Files.

These files shouldnt be editable, only viewable. We expected to achieve this by setting the "readOnly" or "enabled" -Properties of the Spreadsheet, similar to other components. Sadly, this does not work, as it currently results in this:

Setting a Spreadsheet to Read-Only (readOnly=true)

• does not appear to have any effect

Setting a Spreadsheet to disabled (enabled=false)

• wipes the Spreadsheet if a File was loaded previously (e.g. via Constructor)
• does not disable interaction with the Spreadsheet, which means you can still enter text into a disabled Spreadsheet

We think this current behavior is flawed or at least very confusing and unituitive. We expected more of a "Pro-only" component.

Expected outcome

Setting a Spreadsheet to read-only achieves the following

• [ ] You cannot modify the contents or formatting of cells
• [ ] You cannot add, remove or modify sheets
• [ ] You cannot add, remove or modify comments
• [ ] Only Actions that cannot modify the File are enabled
• [ ] Loading a new File from the server (e.g. via binder) is still possible

Setting a Spreadsheet to disabled achieves the following

• [ ] You cannot modify the contents or formatting of cells
• [ ] You cannot add, remove or modify sheets
• [ ] You cannot add, remove or modify comments
• [ ] All Actions are disabled, even the ones that dont modify the content of the Sheet
• [ ] You cannot interact with the Spreadsheet (no Selection, no Sheet switching, etc.)
• [ ] Loading a new File from the server (e.g. via binder) is still possible

Minimal reproducible example

Paste this in any empty Vaadin View.

...
// Obviously tweak the Path to lead to any valid Excel-File with content :)
File myFile = new File("myFile.xlsx");

Spreadsheet viewer1 = new Spreadsheet(myFile);
viewer1.setReadOnly(true);

Spreadsheet viewer2 = new Spreadsheet(myFile);
viewer2.setEnabled(false);

add(viewer1, viewer2);
...

Steps to reproduce

Open a page that includes the Minimal reproducible example above

Environment

Vaadin version(s): 24.3 OS: Windows 11

Browsers

Chrome, Edge

[DiegoCardoso]

Hi @marcobsidian, I wasn't able to find the API you mentioned in the Spreadsheet component:

I am afraid I am missing something here, could you provide more details, maybe a project with the reproducible code?

[marcobsidian]

Okay I double checked again and it is actually a hilarious error on my side.

For context: We are using Kotlin for our project. Also, we are using the Spreadsheet within our own CustomField<File>. The initializer of the Spreadsheet looks like this:

None of us realised that the read-only assignment within the apply targeted the wrapping CustomField and not the Spreadsheet. ^^'

If i change the call to this.isReadOnly = true, it correctly gives me a compiler error.

[marcobsidian]

I was clearly wrong about this being a bug. The quality of Vaadin Pro Components is clearly better than the eyesight of me and my colleagues ^^'

However, while this isn't a bug, it would still be very helpful to have ways to disable interaction with the Spreadsheet component.

Our current "workaround" (see code pic above) isnt really doing it.

Are there any existing tools we overlooked to get a interactable, but not editable Excel Preview. If not, would it be possible to add something like this as an enhancement in close future?

[tomivirkki]

Hi,

After some investigation, I discovered that the Spreadsheet GWT widget does have some kind of a read-only state implementation, but for whatever reason it's not exposed publicly with the Spreadsheet component.

While there currently isn't a public read-only mode for the component, maybe as a workaround you could consider locking all the cells programmatically.

[marcobsidian]

Our current workaround is locking the sheets via password. To make that work, I had to add another workaround because locking the active sheet doesnt take immediate effect but only if i switch off and back to the sheet thats currently selected.

This however still doesnt prevent the creation of new sheets via the Plus-Button. It also isn't viable for any use-cases including Binders, where the Component is reused but the content changes. Ironically one of the next things we are trying to do with the spreadsheet...

[marcobsidian]

For using a Spreadsheet as an Editor within a CustomField thats connected to a Binder, the only really reliable way of preventing any fiddeling with the content is to set style pointer-events: none;

This also completely disables any cell selections or any way of looking at more than the first sheet, but "works" as a temporary solution while we wait for the official fix.