How do we disable user control of the tab bar?

[development]

We’re using WebViewer v12.0.1 for redacting documents during import into our application. The set of documents is controlled entirely by our code, we just want the user to be able to view and redact them.

Currently we have the documents loading into the viewer, and the user can switch between them using the tab bar, but it’s also possible for the user to close tabs or add new tabs.

Which features/elements do we need to disable to hide the tab close buttons and the ‘open file’ button, as well as preventing key shortcuts from activating these functions?

[mickael.vanstraelen]

Hi,

Thank you for reaching out.

Could you clarify what you mean by “tab bar”?
Do you mean the toolbar?

If so, you can disable it like this using the modular ui config by removing the default-ribbon-group from the items in the modular header:

Import and Export Modular UIs

For the open file button, I would need more context, like this I would think of the Webviewer constructor’s options:

enableFilePicker: false,

But the default value for this option is false.

Let me know if you have any questions.

Best,
Mickaël.

[development]

I mean this bit:

Clicking on the + shows this:

We need to prevent that from showing, and also prevent the user from trying to close tabs.

[mickael.vanstraelen]

Hi,

Thank you for your reply!

You can disable the feature using disableFeature:

UI.disableFeatures([UI.Feature.MultiTab])

Let me know if that works for you.

Best Regards,
Mickaël.

[development]

No, we need the tabs to be available so the user can switch between the documents we’ve loaded. We just need to prevent adding or closing tabs.

[mickael.vanstraelen]

Hi,

Thank you for your reply. I apologise for the confusion.
There is currently no API allowing you to disable/hide/remove those buttons.

However, you can directly access the DOM and remove them manually.
Depending on whether you are using an iframe or a Web Component, the selector may change:

let tabCloseButton = document.querySelector("#wc-viewer").shadowRoot.querySelectorAll(".close-button-wrapper")
let addTabButton = document.querySelector("#wc-viewer").shadowRoot.querySelector(".add-button") 

let removableButton = [...tabCloseButton, addTabButton]
removableButton.forEach(button => button.remove());

Let me know if this solution works for you.

Best Regards,
Mickaël.

[development]

Thanks, that seems to work!