Adding Custom statuses on the Notes/Annotation

Technical Support WebViewer
1

WebViewer Version: 11.2.0

Hi there,
I have done this
disableElement([ ‘noteStateFlyoutAcceptedOption’,
‘noteStateFlyoutRejectedOption’,
‘noteStateFlyoutCancelledOption’,
‘noteStateFlyoutCompletedOption’,
‘noteStateFlyoutMarkedOption’,
‘noteStateFlyoutAcceptedOption’,
‘noteStateFlyoutUnmarkedOption’
],

Now I want to add custom status in place on those statuses, and change the below icon to ‘eye’ more like visibility status
Screenshot 2025-04-11 at 5.29.13 PM

Can you please help me with this.

Thanks.

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To customize the statuses of annotations in Apryse’s WebViewer, you can use the setCustomNoteFilter API to define custom statuses and change the icon accordingly.

Some things you can try:

  • Use the setCustomNoteFilter API to define your custom statuses. This allows you to replace the default statuses with your own.

  • Modify the icon by accessing the relevant DOM element and changing its class or attributes to display an “eye” icon.

  • Ensure that your customizations are applied after the document is fully loaded to avoid any conflicts.




Here are some resources that might help you:

  • setCustomNoteFilter API - This guide explains how to use the setCustomNoteFilter API to customize annotation statuses.

  • disableElements API - Learn more about disabling elements which you’ve already used, but can be useful for context.

  • WebViewer Demo - Experiment with different customizations in the interactive demo.

  • UI Customization Guide - This guide provides a broader overview of UI customization options, which can be helpful for your icon change.




Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hello Hareesh,

Here is documentation on how to modify the annotation states. You won’t need to disable all the default ones. You will need to modify the UI in this case.

To change the icon on the annotations to something else you can use the updateElement API. Simply pass an img to the props.

Best Regards,
Darian

1 Like
4

Thank you Darian.

Are you suggesting me to fork repo and make necessary changes or do we have a API for modifying the default statuses?

1 Like
5

Yes, I don’t believe we have an API for modifying default statuses.

1 Like