Notes panel

In this document
chevron_rightNote options menu

The notes panel is located on the right side of the screen and can be toggled by clicking the the note icon at the far right of the top toolbar or the arrow in the middle of the panel.

Updating annotation notes

Notes for each annotation are created dynamically as annotations are added to the document. If you want to modify the HTML of each note you can hook into the noteCreated event which is fired every time a new note is created.

For example:

$(document).on('noteCreated', function(e, annotation, element) {
  var userName = element.find('.noteAuthor').text();
  console.log(userName);
  // removes the display of the date and time
  element.find('.noteTime').remove();
});

Updating annotation permissions

If the permissions of any annotations need to be updated then the notes panel must be notified. For example if you programmatically change the ReadOnly flag on an annotation or add your own custom permission check.

You can do this by triggering the updateAnnotationPermission event. If no annotation is passed then it signals that all annotations should be updated.

// all annotations
annotManager.trigger('updateAnnotationPermission');

// a particular annotation
annotManager.trigger('updateAnnotationPermission', annotation);

Note options menu

After clicking the button in the top right of the notes panel the note options menu will appear.

This menu allows you to change the sorting method to be by the time the annotation was created or by the vertical location of the annotation on the document. Searching will filter out comments that don't contain the search term.

Pressing the hide button will toggle the annotations on or off. Pressing the save button will trigger the server URL to save annotations.

Advanced customizations

All of the code for the notes panel is unminified inside the lib/html5/NotesPanel.js file. If it's difficult to make your customizations from a config file it may be easiest to update the code in this file.