How to control the annotation popup differently for each annotation?

Technical Support WebViewer
1

I figured out how to use the annotManager.annotationPopup to change the popup when you select annotations. But I need to change the popup menu items depending on what the annotation is, and what values might be in the customData of the annotation. annotManager.annotationPopup effects the popup globaly. For IOS there appears to be a way to hook into the popup for each annotation and change it using toolManager, but I can’t find a similar way to do this on Web. I want a different popup menu for each annotation, and one of the popup items I am trying to have be a toggle that changes dynamically. Any easy way to do this without making a horrible mess of hacky code? Is there something I missed in the documentation? Have any examples? Thank you everyone.

2

Hello,

You can modify the “annotationPopup” on “annotationSelected” event like the following

const customBtn = {
  type: 'actionButton',
  label: 'some-label',
  dataElement: 'someElement',
  onClick: () => console.log('clicked'),
};
// add all custom buttons to the annotationPopup beforehand 
instance.annotationPopup.add(customBtn);

// depending on the annotation selected, enable/disable the buttons you want
// this is easier then to add and remove custom button based on what annotation is selected
annotManager.on('annotationSelected', (annots) => {
  if (annots && annots[0]) {
    switch(true) {
      case annots[0] instanceof Annotations.FreeHandAnnotation:
        instance.enableElements([customBtn.dataElement]);
        break;
      default:
        instance.disableElements([customBtn.dataElement]);
        break;
    }
  }
});

You can see our guide about customizing UI for more information in the following link

Feel free to let us know if you have any other questions

Best Regards