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.

Instantiation

JavaScript (SDK v8.0+)

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);
    });
  });

DocumentViewer#annotationsLoaded StickyAnnotation StickyAnnotation.IconNames Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

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

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

DocumentViewer#annotationsLoaded StickyAnnotation StickyAnnotation.IconNames Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

XFDF

Element name: text

Shell

<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"/>

Required properties

PageNumber

Gets or sets the page number of a document that the annotation appears on.

X

Gets or sets the annotation's x-axis position.

Y

Gets or sets the annotation's y-axis position.

Notable properties

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

[static] SIZE

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

[static] IconNames

An enum with possible icon names.

Icon

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

InReplyTo

The ID of the annotation that this annotation is replying to or the parent annotation it is grouped with. This should be set if you are creating a reply.

ReplyType

The type of the reply. Setting this to group will group this annotation to the annotation referenced by InReplyTo.

State

Gets or sets the state of the annotation. Annotations may have an author-specific state associated with them depending on their StateModel.

If the annotation's StateModel is set to Marked, there are possible two states: Marked and Unmarked.

With Review, there are a number of states:

• Accepted
• Rejected
• Cancelled
• Completed
• None

StateModel

Gets or sets the statemodel of the annotation. There are two default statemodels: Marked and Review. Each statemodel has different states. See the State property for details.

Author

The author of the annotation.

Color

Gets or sets the annotation's stroke color.

Hidden

Gets or sets whether the annotation is hidden.

Invisible

Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden".

IsClickableOutsideRect

Gets or sets whether any parts of the annotation drawn outside of the rect are clickable.

Listable

Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable.

Locked

Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited.

LockedContents

Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted.

NoDelete

Gets or sets if this annotation can be deleted.

NoMove

Gets or sets whether or not the annotation can be moved.

NoResize

Gets or sets if this annotation can be resized by the user.

NoRotate

Gets or sets if this annotation can be rotated.

NoView

Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set.

NoZoom

Gets or sets if this annotation scales with the page.

Opacity

Gets or sets the opacity of the annotation.

Printable

Gets or sets whether the annotation should be displayed when printing the page.

ReadOnly

Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted.

StrokeColor

Gets or sets the color of the annotation's stroke.

ToggleNoView

Gets or sets whether the ToggleNoView flag is set on the annotation.

Useful methods

setContents

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.

getContents

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.

JavaScript (SDK v8.0+)

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
        }
      });
    });
  });

AnnotationManager.getAnnotationsList StickyAnnotation.getContents

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

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

AnnotationManager.getAnnotationsList StickyAnnotation.getContents

Other notes

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.