Section:

Toggling annotation visibility using the AnnotationManager

Annotations are made to annotate content, but occasionally you may want to hide certain annotations. This can be done through the AnnotationManager or through the annotations directly. This guide will cover both approaches so that you can control the annotations as you need.

Hiding annotations with the AnnotationManager

Hiding annotations through the AnnotationManager can be done through two APIs: hideAnnotation and hideAnnotations. Providing an annotation or an array of annotations to these APIs respectively will hide the annotations. This will change the Hidden property on the annotations.

1const { annotationManager } = instance.Core;
2
3const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
4// Hide annotations on the first page
5annotationManager.hideAnnotations(annots);

Related Links

This API essentially switches the Hidden property on annotations to true.

Showing annotations with the AnnotationManager

The APIs showAnnotation and showAnnotations will show annotations that were hidden through the AnnotationManager. Providing an annotation or an array of annotations to these APIs respectively will show the annotations.

1const { annotationManager } = instance.Core;
2
3const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
4// Show hidden annotations on the first page
5annotationManager.showAnnotations(annots);

Related Links

Hiding/showing annotations using properties

There are two properties on annotations that can be used to toggle their visibility. One was briefly mentioned in the section above, Hidden. The other is the NoView property. Depending on what you might be looking to do.

Using the Hidden property

Setting the Hidden property to true on an annotation will hide the annotation completely. Along with not being rendered, users cannot interact with it and it will also not be printed. Using either the hideAnnotation or hideAnnotations APIs will change this property.

1const { annotationManager } = instance.Core;
2
3annotationManager.getAnnotationsList().filter(annot => {
4  annot.Hidden = true;
5  // Always redraw annotation if rendering was updated
6  annotationManager.redrawAnnotation(annot);
7});

Related Links

Using the NoView property

The NoView property on the annotation will also hide/show annotations. Like the Hidden property, the annotations will not render and users cannot interact with it. However, it can be printed.

1const { annotationManager } = instance.Core;
2
3annotationManager.getAnnotationsList().filter(annot => {
4  annot.NoView = true;
5  // Always redraw annotation if rendering was updated
6  annotationManager.redrawAnnotation(annot);
7});

Related Links

Next steps

If you need really complex rendering logic, you can consider building it into annotations instead.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales