Want to add custom button next to note button in annotation group

[rishumishra2001]

Product: Web viewer

Product Version: 10.12.0

Please give a brief summary of your issue:

Want to add custom button next to note button in annotation group.
(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)

Please provide a link to a minimal sample where the issue is reproducible:

[luke.dam]

Hello Rishu,

Thank you for contacting WebViewer Forums.

I would recommend following the documentation guide here on how to customize the header: Custom PDF Viewer Toolbar / Header using JavaScript | Apryse documentation

Regards,
Luke

[rishumishra2001]

I have tried that but my type is action button.

[luke.dam]

Hello Rishu,

Thank you for your reply.

Any type of button will work here. Please see the following example for your required implementation:

1. Defining the custom button:

const testButton = new instance.UI.Components.CustomButton({
  dataElement: 'customButton',
  label: 'test',
  title: 'this is a test button',
  onClick: () => console.log('button clicked!'),
  img: 'icon-save',
});

2. Pushing the custom button into the annotation grouped items:

const toolHeader = instance.UI.getModularHeader('tools-header');
let annotateGrpItem = toolHeader
  .getItems('groupedItems')
  .find((data) => data.dataElement === 'annotateGroupedItems');
let annotateToolGrpItem = annotateGrpItem.items.find(
  (data) => data.dataElement === 'annotateToolsGroupedItems'
);

annotateToolGrpItem.items.splice(7, 0, testButton);
toolHeader.setItems([...toolHeader.getItems()]);

Results:

Please let me know if this works for you.

Regards,
Luke

[rishumishra2001]

Thank for your support. But it is not working. I’m using apryse version 10.12.0
const standardCommentsButton = new instance.UI.Components.CustomButton({
dataElement: ‘customButton’,
label: ‘test’,
img: ‘’,
title: ‘this is a test button’,
onClick: () => console.log(‘button clicked!’),
});
console.log(instance.UI);
const toolHeader = instance.UI.getModularHeader(‘tools-header’);
let annotateGrpItem = toolHeader
.getItems(‘groupedItems’)
.find((data) => data.dataElement === ‘annotateGroupedItems’);
let annotateToolGrpItem = annotateGrpItem.items.find(
(data) => data.dataElement === ‘annotateToolsGroupedItems’
);

annotateToolGrpItem.items.push(standardCommentsButton);
toolHeader.setItems([…toolHeader.getItems()]);
Using like this but button is not visible in annotation.

[luke.dam]

Hello Rishu,

Thank you for your reply.

For 10.12 legacy UI, there are limitations to customizing the UI. The actionButton cannot be part of the default toolGroup. Please see the following code:

const testButton = {
  type: 'actionButton',
  img: img,
  onClick: () => {
    alert('Hello world!');
  },
  dataElement: 'testButton',
};

instance.UI.setHeaderItems((header) => {
  header
    .getHeader('toolbarGroup-Annotate')
    .get('stickyToolGroupButton')
    .insertAfter(testButton);
});

Which will result in this UI:

I would recommend using the modular UI for more customization options if the above does not work for you.

Regards,
Luke