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 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.

const { annotationManager } = instance.Core;

const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Hide annotations on the first page
annotationManager.hideAnnotations(annots);

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.

const { annotationManager } = instance.Core;

const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Show hidden annotations on the first page
annotationManager.showAnnotations(annots);

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.

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.

const { annotationManager } = instance.Core;

annotationManager.getAnnotationsList().filter(annot => {
  annot.Hidden = true;
  // Always redraw annotation if rendering was updated
  annotationManager.redrawAnnotation(annot);
});

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.

const { annotationManager } = instance.Core;

annotationManager.getAnnotationsList().filter(annot => {
  annot.NoView = true;
  // Always redraw annotation if rendering was updated
  annotationManager.redrawAnnotation(annot);
});

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