Free trial

Pick a framework to get started

close

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Customize display authors for annotations

Often, users will want to change the user name they use for creating annotations. This can create an issue for existing annotations, as these will be linked to a particular annotationUser identifier. The way to get around this is to use display authors, that way the userId attached to an annotation can remain the same, while the display author changes to whatever the user wants it to be.

In the following example we will show how to map a userId (a unique identifier that won't change after being assigned), to a display name.

Map a userId to a Display Author

Use setCustomData and getCustomData to save a userId to an annotation when it is created. Then add a mapping function with setAnnotationDisplayAuthorMap to map the userId to a display author, which will be used as the annotation author name in WebViewer.

WebViewer({
  annotationUser: '1',
  // other constructor options
}, viewerElement).then(instance => {
  const { annotManager } = instance;

  annotManager.on('annotationChanged',  (annotations, action, options) => {
    if (action === 'add' && !options.imported) {
    const annot = annotations[0]
    annot.setCustomData('userId', annotManager.getCurrentUser())
    }
  })

  const mapNames = (annotation) => {
    if(annotation.getCustomData('userId') === '1') {
      return 'Will Riker'
    } else if (annotation.getCustomData('userId') === '2') {
      return 'Jean-Luc Picard'
    }}

  annotManager.setAnnotationDisplayAuthorMap(mapNames);
});
WebViewer({
  annotationUser: '1',
  // other constructor options
}, viewerElement).then(instance => {
  const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged',  (annotations, action, options) => {
    if (action === 'add' && !options.imported) {
      const annot = annotations[0]
      annot.setCustomData('userId', annotationManager.getCurrentUser())
    }
  })

  const mapNames = (annotation) => {
    if(annotation.getCustomData('userId') === '1') {
      return 'Will Riker'
    } else if (annotation.getCustomData('userId') === '2') {
      return 'Jean-Luc Picard'
    }}

  annotationManager.setAnnotationDisplayAuthorMap(mapNames);
});

You can also set whether to use the display name as the author name in the XFDF whenever exporting the annotations, by passing the option useDisplayAuthor: true to exportAnnotations