Product: Apryse WebViwer
Product Version:11.2.0
Please give a brief summary of your issue: I am trying to add custom button in modular UI but only first button is visible other one is not visible.
(Think of this as an email subject)
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
const defaultHeader = instance.UI.getModularHeader('default-top-header');
const saveButton = new instance.UI.Components.CustomButton({
dataElement: 'customButton',
title: 'Save',
onClick:async () => {
const doc = documentViewer.getDocument();
const xfdfString = await annotationManager.exportAnnotations();
// includeAnnotations If false, all annotations will be removed from PDF document.
const data = await doc.getFileData({
xfdfString: xfdfString,
includeAnnotations: false,
});
SaveDocumentAnnotations();
},
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>',
});
const customSettings = new instance.UI.Components.CustomButton({
dataElement: 'customButton',
title: 'Save',
onClick: async () => {
const doc = documentViewer.getDocument();
const xfdfString = await annotationManager.exportAnnotations();
// includeAnnotations If false, all annotations will be removed from PDF document.
const data = await doc.getFileData({
xfdfString: xfdfString,
includeAnnotations: false,
});
SaveDocumentAnnotations();
},
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>',
});
defaultHeader.setItems([...defaultHeader.items, customSettings, saveButton]);
});