These APIs only change the default state or behavior, but the option is still visible in the Print modal UI.
Since the Print modal is rendered inside an iframe, parent-level CSS does not apply, which also makes it difficult to hide the option via styling.
My question:
Is there an official, API-supported way to completely hide or remove Print modal options that do not have a data-element attribute, specifically the “Include annotations” option?
Hello, I’m AiRon, an automated tech support bot While you wait for one of our customer support representatives, I can help you with your question.
You’re dealing with the challenge of hiding specific options from the WebViewer Print modal, particularly the “Include annotations” option, which cannot be disabled using the typical disableElements method due to the absence of a data-element attribute.
Some things you can try:
Consider using custom CSS to target elements within the iframe by injecting the CSS directly into the iframe’s document.
Use the setPrintHandler method to customize the print behavior and potentially bypass the default Print modal, creating a custom print flow without the undesired options.
Explore the possibility of customizing the Print modal UI using the Modular UI framework to remove or alter the modal directly.
After making your changes, you will need to build the UI and integrate it with your WebViewer instance. For guidance on building and integrating the custom UI, please refer to our advanced customization guide here: https://docs.apryse.com/web/guides/advanced-customization
3 - You can use the event “visibilityChanged” to detect when the print modal is opened, access the DOM, and remove the element directly:
instance.UI.addEventListener('visibilityChanged', (e) => {
if (e.detail.element === "printModal") {
console.log('visibilityChanged', e)
let form = document.querySelector("#wc-viewer").shadowRoot.querySelector("#app > div.App.is-web-component > div.Modal.PrintModal.open > div > div > div.settings > div:nth-child(1) > form")
const checkboxes = form.querySelectorAll('input[type="checkbox"]');
if (checkboxes.length > 0) {
checkboxes[0].closest('.ui__choice').remove(); // remove the first checkbox
}
if (checkboxes.length > 1) {
checkboxes[checkboxes.length - 1].closest('.ui__choice').remove(); // remove the last checkbox
}
}
});
Let us know if you would like to submit a feature request.
