Some test text!

Loading...
Guides
Show/Hide Annotations

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.

const { annotationManager } = instance.Core;

const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
// Hide annotations on the first page
annotationManager.hideAnnotations(annots);
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.

const { annotationManager } = instance.Core;

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

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.

const { annotationManager } = instance.Core;

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

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.

const { annotationManager } = instance.Core;

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

Next steps

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

Get the answers you need: Support

Upcoming Webinar: Customer Experience and Retaining Control: Boosting Document Automation and Efficiency in Financial Services | Sept 15, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use