Programmatic notes panel

The annotation notes panel is the popup that displays and edits the textual note attached to an annotation. Nutrient Web SDK opens it automatically when the user clicks the notes button in the default UI, but you can also open and close it from your own code. That’s useful when you’ve replaced the annotation actions slot, added a custom toolbar button, or wired up a keyboard shortcut.

When to use this

Reach for programmatic notes panel control when you need:

• A custom toolbar button on a host-app sidebar that says “Show note for selected annotation.”
• A keyboard shortcut your application defines that opens the notes panel without going through the default chrome.
• Bulk workflows that step through annotations and open the notes panel for each as part of a review flow.
• Restoring the panel state after a programmatic action that would otherwise close it.

API reference

openAnnotationNote is a no-op when there’s nothing to open, that is, when no argument is passed and nothing is selected.

These methods control the notes panel that appears alongside an annotation. They do not create or modify the underlying note content. To change the note’s text, see annotation notes.

Example: Open the notes panel from a custom toolbar button

This example wires a host-app button to open the notes panel for whatever annotation is currently selected. The button is disabled when the selection doesn’t support notes:

const instance = await NutrientViewer.load({
  container: "#viewer",
  document: "contract.pdf"
});

const noteButton = document.getElementById("show-note");

const TYPES_WITHOUT_NOTES = [
  NutrientViewer.Annotations.WidgetAnnotation,
  NutrientViewer.Annotations.TextAnnotation,
  NutrientViewer.Annotations.NoteAnnotation,
  NutrientViewer.Annotations.CommentMarkerAnnotation
];

function syncNoteButton() {
  const selected = instance.getSelectedAnnotations();
  const annotation = selected && selected.size === 1 ? selected.first() : null;

  noteButton.disabled =
    !annotation ||
    TYPES_WITHOUT_NOTES.some((Type) => annotation instanceof Type);
}

instance.addEventListener("annotationSelection.change", syncNoteButton);
syncNoteButton();

noteButton.onclick = () => {
  instance.openAnnotationNote();
};

WidgetAnnotation, TextAnnotation, NoteAnnotation, and CommentMarkerAnnotation don’t support notes, those types are excluded above.

Example: Open the notes panel by annotation ID

When you have an annotation reference but it isn’t necessarily selected, pass the annotation or its id:

const annotations = await instance.getAnnotations(0);
const target = annotations.find((a) => a.note);

if (target) {
  instance.openAnnotationNote(target);
}

You can also pass just the ID:

instance.openAnnotationNote("01BS964AM5Z01J9MKBK64F22BQ");

This is convenient for review flows that step through annotations from a list without needing to select them in the viewer first.

Example: Close the panel programmatically

Close the panel after a custom workflow runs — for example, after persisting a note to a backend:

async function saveNoteAndClose(annotation, noteText) {
  const updated = annotation.set("note", noteText);
  await instance.update(updated);
  instance.closeAnnotationNote();
}

Related

• Annotation notes — Creating and editing the underlying note text.
• Note annotations — The sticky note annotation type, which is different from annotation notes.