Custom callback for toggleElement function?

Technical Support WebViewer
,
1

WebViewer Version: 8.12.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server? Yes
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
(Think of this as an email subject)

Race condition with the toggleElements function call.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

I am trying to customize the Redactions Panel by adding a sub header to “Marked For Redaction” header. Because I couldn’t see an easy way of customizing an existing panel without having to create a whole new panel from scratch, I’ve resorted to manipulating the iframe document directly and just inserting the span under the header.

I have updated the redactionPanelToggle to toggle the panel and then add the subheader, however, there seems to be a race condition between the toggle event completing before moving onto running the rest of the code. By the time I go to check for the Redaction Panel Header, the dom is telling me it doesn’t exist. I was wondering if there was any way to wait for the toggle event to complete or pass it a callback for what it should do after it’s opened.

Incidentally, I have the exact same issue whenever I listen for the ‘visibilityChanged’ event.

Is there a better way to go about doing this?

Please provide a link to a minimal sample where the issue is reproducible: I don’t have a link, but here is the code.

        const iFrameDoc = instance.UI.iframeWindow.document;

        instance.UI.addEventListener('visibilityChanged', (e) => {
            const { element, isVisible } = e.detail;
            if (element === 'redactionPanel' && isVisible && this.fileExt !== 'pdf') {
                addNewFileWarningToPanel(iFrameDoc);
            }
        });

        instance.UI.updateElement('redactionPanelToggle', {
            onClick: () => {
                instance.UI.toggleElement('redactionPanel');
                if (this.fileExt.toLowerCase() !== 'pdf') {
                    // addNewFileWarningToPanel(iFrameDoc);
                }
            },
        });

        const addNewFileWarningToPanel = (iFrameDoc: Document) => {
            const redactionsPanelHeader = iFrameDoc.querySelector('.marked-redaction-counter');
            const existingWarning = iFrameDoc.querySelector('.new-file-warning');
            if (!existingWarning) {
                const newFileWarning = `<div class="new-file-warning">To save redactions, this file will be converted to a PDF.</div>`;
                redactionsPanelHeader?.insertAdjacentHTML('afterend', newFileWarning);
            }
        };
2

Hello,

Thank you for contacting us about WebViewer. Currently we don’t have any API to customize the redaction panel (we have some for the notes panel but hadn’t had much demand for the redaction panel yet). For customizing the redaction header, you can do the following

  1. Do what you are doing in the code you posted but use setTimeout(() => {}, 100) to wait for after React finish rendering the DOM before adding the custom header. Look like there is a race condition and the visibilityChanged is firing before the panel is finish rendering

  2. You can add the extra text using CSS like the following

WebViewer({
    css: 'path_to_css_file.css',
  },  document.getElementById('viewer')

and in “path_to_css_file.css”

.no-marked-redactions::before{
  content: "To save redactions, this file will be converted to a PDF.";
}

This is probably the safest way to do this but might be limiting. You can find out more about styling WebViewer with CSS in the guide below

  1. Our UI is opened sourced so you could fork a copy of it and make the changes you want, but it’s might not be worth it if you are only making minor changes. You can find out more in the guide below
    Apryse Documentation | Documentation

Please let me know if the above was helpful or if you want me to clarify something

Best Regards,

Andrew Yip
Web Developer
Apryse

3

Thanks for your response. Your CSS idea is working well for this use case. Since we have additional areas we are looking at customizing, we are considering forking the repo. Thanks for your help!