Sticky Note Annotations

Sticky note annotations are annotations that are positioned to leave a comment on an area of a document. They are occasionally referred to as comments. Replies to annotations are also represented by sticky note annotations.

Sticky notes are created with NoZoom and NoRotate set to true by default. This means they will remain the same size at all zoom levels and will not rotate with the view/page. Stroke color is also used as the primary color of the icons as opposed to fill color.

In terms of dimensions, Width and Height are ignored and the static property SIZE should be used instead to set the width and height of the annotation.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.StickyAnnotation({
        PageNumber: 1,
        X: 100,
        Y: 50,
        Icon: Annotations.StickyAnnotation.IconNames.CHECK,
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
      });
      annot.setContents(`Visited: ${new Date()}`);

      annotationManager.addAnnotation(annot);
      annotationManager.redrawAnnotation(annot);
    });
  });

Element name: text

<text page="0" rect="297.770,620.720,328.770,651.720" color="#FFCD45" flags="print,nozoom,norotate" name="a779f583-73e2-924d-9f6e-e73f5c7da3c8" title="Guest" subject="Note" date="D:20220520130128-07'00'" creationdate="D:20220520125739-07'00'" icon="Comment" statemodel="Review"/>

For the full list of properties, please visit the annotation's API docs.

The size of the width and height of all sticky annotations.

An enum with possible icon names.

The name of the icon to use for this sticky annotation. Possible default icon types:

• Comment
• Insert
• Circle
• NewParagraph
• Help
• Key
• Check
• Checkmark
• Cross
• CrossHairs
• Paragraph
• RightArrow
• RightPointer
• Star
• UpArrow
• UpLeftArrow

Most of the time, you will be creating a sticky note with a comment. To set that comment, you use the setContents method to provide it a remark.

As the content of the sticky note is the primary focus, there should be a way to read it from the sticky note. This can be done with the getContents API.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      annotList.forEach(annot => {
        if (annot instanceof Annotations.StickyAnnotation) {
          const contents = annot.getContents();
          // Check contents
        }
      });
    });
  });

The Checkmark icon has a fixed color. Please use the Check icon if you need to adjust the color. Icon types are fixed in accordance to the PDF specification but their visual representation may change from viewer to viewer.