Multi-Tab Document Viewing - Enable or Disable Tab Actions

Technical Support WebViewer
1

In version 10.4.0, I am viewing multiple documents as Multi-Tab. Firstly, I want to prevent documents from being closed by clicking on the close button. Secondly, I want to modify the functionality of opening a new tab or disable the new tab opening button and create a new tab with an empty document using a custom button that I add myself. I would appreciate your assistance.

1 Like
2

Hello,

Thank you for contacting WebViewer support.

Unfortunately, we currently don’t have a way of preventing the documents from being closed by clicking on the close button. If you want, you can answer some questions and I can open a request for this feature for the product team to review the feasibility of this.

  • Do you want to hide the close button? Or just disable it?
  • How would be another way of closing a document?
  • Please describe any other relevant details about your use case.

About the second requirement, where are you thinking of adding this custom button? Can it be on top of the tabs? If so, you can add your button on your index.html file, for example

 <body style='padding: 0; margin: 0'>
    <div id='viewer'>
      <button id='sample-button'>Add tab</button>
    </div>
    <script src='./index.js'></script>
  </body>

and you can use this button to call the API addTab. This would not handle the whole desired behaviour because we also don’t have a way to disable the add tab button. If you also want me to open a request for this, please let me know and describe better how would be the whole flow. If you have prototypes it would be great. If you want more privacy, please open a new ticket using this link.

Best,
Dandara Navarro

1 Like
3

You can use a mutation observer and pray Apryse do not change things too mucuh until this is exposed in the API. I developed this in version 10.5

// override close buttons on tab bar as not exposed by the API low level alteration is required.
const tabsHeader = this.vInstance.UI.iframeWindow.document.getElementsByClassName(‘TabsHeader’);
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const tabsHeaderCallback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === “childList”) {
if (mutation.addedNodes.length > 0 && mutation.addedNodes[0].childNodes.length > 0) {
let btn = mutation.addedNodes[0].querySelector(‘[aria-label=“Close”]’);
if (btn)
{
// change the button element here, so hide etc
};
}
}
}
}
};
// Create an observer instance linked to the callback function
this.tabsObserver = new MutationObserver(tabsHeaderCallback);

// Start observing the target node for configured mutations
this.tabsObserver.observe(tabsHeader[0], config);

1 Like