Unable to add custom button to webviewer UI in version 11.1.1

Technical Support WebViewer
, ,
1

WebViewer Version: 11.1.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
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? Yes
Is your issue related to annotations? No

Please give a brief summary of your issue:
After updating webviewer component to 11.1.1, one of out implementations broke. It is not showing a custom button in the UI.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Our code:
instance.UI.setHeaderItems(header => {
header.push({
type: ‘actionButton’,
img: ‘’,
onClick: async () => {
saveAnnotationThumbnails();
}
});
});

If I debug the header. I can find the button there, so it gets added but it’s not visible in the ui like it was with previous version we used 10.7.X

Please provide a link to a minimal sample where the issue is reproducible:
Can be reproduced with apryse sample:

WebViewer({
path: libraries, // path to the PDFTron ‘lib’ folder on your server
licenseKey: lick,
initialDoc: downloadUrl + fileName,
}, document.getElementById(‘viewer’))
.then(instance => {
const { documentViewer, annotationManager } = instance.Core;

    // Add header button that will get file data on click
    instance.UI.setHeaderItems(header => {
        header.push({
            type: 'actionButton',
            img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
            onClick: () => {
                instance.docViewer.setCurrentPage(1);
            }
        
        });
    });
});
1 Like
2

Hello Anssi,

Thank you for contacting us.

In version 11, the modular UI is the now the default. If you want to continue using the new UI, there is a different way to add a custom button. Migrating to V11 Modular UI | Apryse documentation

If you want to keep using the legacy UI, just add ui: 'legacy' to the constructor.

WebViewer({
path: libraries, // path to the PDFTron ‘lib’ folder on your server
licenseKey: lick,
ui: 'legacy',
initialDoc: downloadUrl + fileName,
}, document.getElementById(‘viewer’))
1 Like