Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.4
Detailed description of issue
I try to create new ribbon as per example in api docs → PDFJS Express WebViewer Namespace: UI
However, nothing happens and I do not see a new ribbon created.
Should something else be done for created toolbar to appear among other ribbons?
Expected behaviour
I expect new ribbon created with tools described in children array.
Does your issue happen with every document, or just one?
All
Link to document
N/A
Code snippet
instance.UI.createToolbarGroup({
name: 'myToolbarGroup',
dataElementSuffix: 'MyToolbarGroup',
children: [
{
type: 'actionButton',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="22"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>',
onClick: () => {
console.log('action');
},
dataElement: 'triggerAction',
},
],
});
Hello virginija,
It looks like the button youre passing in is invalid, try this snippet:
instance.UI.createToolbarGroup({
name: 'Tester toolbar',
dataElementSuffix: 'Test',
useDefaultElements: false,
children: [
{ type: 'spacer' },
{
toolGroup: 'freeHandTools',
title: 'annotation.freehand',
type: 'actionButton',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="22"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>',
onClick: () => {
console.log('action');
},
dataElement: 'freeHandToolGroupButton', //this needs to be a valid dataElement
},
]
});
Ok, so that does create a new ribbon, but it still does not quite work. The created toolbarGroup-Test is not of type array as the other tool groups and if I try to do something like:
instance.UI.setHeaderItems((header: any) => {
const testHeader = header.getHeader('toolbarGroup-Test');
console.log(testHeader);
testHeader.push({
type: 'divider',
});
});
I get an error. Please see the screen shot.
How to fix that?
Hello,
Try this instead:
const testHeader = header.getHeader('toolbarGroup-Test');
testHeader.update([...testHeader.getItems(), {type:"spacer"}])
Best regards,
Tyler
