How to add new filter in filters list

WebViewer Version:11.4.0

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? No

Please give a brief summary of your issue: I want to add new checkbox in filter list

Please describe your issue and provide steps to reproduce it: I want to update the filters list and add new “Department” check box.

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

1 Like

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 add a new filter, such as a “Department” checkbox, you can customize the WebViewer’s UI component that manages filters. This typically involves modifying the UI to include your custom filter and updating the logic that applies filters to the document.

Some things you can try:

  • Modify the UI to add a new checkbox for “Department”. You will need to access the WebViewer’s UI components and add your checkbox to the filter list.

  • Update the event listeners to handle the new checkbox state and apply the appropriate filter logic when the checkbox is toggled.

  • Ensure that the filter logic interacts correctly with the document, filtering content based on the selected department.




Here are some resources that might help you:

  • Customizing the UI: This guide will help you understand how to modify the UI components of the WebViewer.

  • Custom Annotations: Learn how to handle custom UI elements and logic, which can be useful for implementing your filter.

  • UI APIs: Explore the available APIs for manipulating the WebViewer’s user interface programmatically.

  • Annotation Manager API: Although primarily for annotations, this API provides insight into managing UI components and interactions.




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

1 Like

Hello @rishumishra2001,

Thank you for posting on our forum

Just to clarify, are you wanting to add a new filter category (Ex. “User”, “Color”, “Type”) or update the “User” category to also have a “Department” option to check? Feel free to let me know if I have misunderstood your desired workflow.

If the former, we currently do not support updating the UI modal to have more categories, but you can select a custom filter with the setCustomNoteFilter() API. This API will accept a function which returns whether the annotation should be shown in the notes panel. See the API doc here: https://sdk.apryse.com/api/web/UI.html#.setCustomNoteFilter__anchor

If the latter, the categories will automatically populate with checkboxes to check based on the annotations which currently exist in the document. For example, if you want “Checkbox” to appear underneath admin, there will need to be at least one annotation in the document which has the Author=“Department”.

Let us know if you need further clarification.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like

Hello jromanocarlsen

Thanks for the reply.

I want to add new type in filter like be have User, Color and Type. I want to add new Department.

1 Like

Hello @rishumishra2001,

Thank you for the clarification. In that case, we do not currently have any public-facing APIs which could create a new category of filters. One possible solution would be forking the UI and making the adjustments to the panel based on your specifications. If you would like to do this, see our guide here: https://docs.apryse.com/web/guides/advanced-customization.

If you decide to go this route, here is the panel component to help get you started: https://github.com/ApryseSDK/webviewer-ui/blob/11.6/src/components/FilterAnnotModal/FilterAnnotModal.js#L436-L462

Let us know if this works for you.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like