Can I change the order of the status list?

joserafael.arce · June 20, 2025, 8:28am

WebViewer Version: 11.5

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
Can I change the order of the status list?

Please describe your issue and provide steps to reproduce it:
Currently, this is how the status list popup appears:

We would like to move Marked and Unmarked above None so that it will be more intuitive for our end users. How do we do that in WebViewer?

Thank you!

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

system · June 20, 2025, 8:28am

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

Changing the order of the status list in WebViewer can be achieved by customizing the annotation tools and their properties. WebViewer allows you to modify the UI and behavior of annotations, including their status and how they are displayed.

Some things you can try:

Access the annotation manager through WebViewer’s API to get the current list of statuses.

Reorder the statuses by modifying the annotation properties or using a custom function to change the display order.

Use the setCustomData method to store and manipulate custom metadata related to annotation statuses.

Implement a custom UI component if necessary to display the statuses in your desired order.

Here are some resources that might help you:

Customizing Viewer Toolbar / Header - Learn about modifying the UI components, including annotation tools.

Annotations Guide - Understand how to work with annotations, including managing their properties.

Advanced Customization - Explore advanced options for customizing WebViewer to suit your needs.

Form Widget Tab Ordering - Although focused on forms, this guide provides insight into ordering elements in WebViewer.

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

mickael.vanstraelen · June 23, 2025, 7:05am

Hi Jose,

You could also achieve this by forking the UI and updating the presets:
You can find the repo here: GitHub - ApryseSDK/webviewer-ui: WebViewer UI built in React
The specific file you want to update is: webviewer-ui/src/components/ModularComponents/NoteStateFlyout/NoteStateFlyout.js at 3d27339d676c3ee5e6e0ab804b22eac3b8fd88d6 · ApryseSDK/webviewer-ui · GitHub

After making your changes, you will need to build the UI and integrate it with your WebViewer instance. For guidance on building and integrating the custom UI, please refer to our advanced customization guide here: Advanced UI Customization | Apryse documentation

Let us know if you have any questions.

Best Regards,
Mickaël.