Customize display authors for annotations

When users create annotations in WebViewer, the Author property of the annotation is set to the current user (Guest if no user was set). WebViewer enforces annotation permissions by only allowing the current user to edit annotations that have an Author value that matches their username.

<square page="0" title="John Smith" rect="107.070,480.110,307.900,597.150" name="8b423bdb-5f8c-992f-3dce-3b2dc9a04ffe" subject="Rectangle" color="#E44234" flags="print"/>

Since it's possible that multiple users could have the same username or they may want to change their username in the future, it can be more convenient to set the annotation Author to be a unique ID representing the user instead. Otherwise, you would have to update the XFDF data for every annotation created by the user anytime the username changes. However, this would cause the IDs to be shown instead of a friendly name.

<square page="0" title="1" rect="107.070,480.110,307.900,597.150" name="8b423bdb-5f8c-992f-3dce-3b2dc9a04ffe" subject="Rectangle" color="#E44234" flags="print"/>

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.

Add a mapping function with setAnnotationDisplayAuthorMap to map the userId to a display author, which will be shown as the annotation author name in WebViewer.

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

  annotationManager.setAnnotationDisplayAuthorMap((userId) => {
    if (userId === '1') {
      return 'John Smith';
    } else if (userId === '2') {
      return 'Sally Smith';
    } else {
      return 'Guest';
    }
  });

  annotationManager.setAnnotationDisplayAuthorMap(mapNames);

  // Now you can get a display author by passing in a unique ID
  const displayAuthor = annotationManager.getDisplayAuthor(annotation.Author);
});

If you have added a mapping function, it should display those unique IDs as much friendlier names while the ID is still used underneath for permission checking.

<square page="0" title="1" rect="107.070,480.110,307.900,597.150" name="8b423bdb-5f8c-992f-3dce-3b2dc9a04ffe" subject="Rectangle" color="#E44234" flags="print"/>

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.

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

  annotationManager.setAnnotationDisplayAuthorMap((userId) => {
    if (userId === '1') {
      return 'Will Ricker';
    } else if (userId === '2') {
      return 'Jean-Luc Picard'
    } else {
      return 'Guest';
    }
  });

  annotationManager.setAnnotationDisplayAuthorMap(mapNames);

  documentViewer.addEventListener('annotationsLoaded', async () => {
    const xfdfString = await annotationManager.exportAnnotations({
      useDisplayAuthor: true,
    });

    // Save/use XFDF
  });
});

This is what the resulting XFDF would output the display name for title instead of the ID:

<square page="0" title="Will Ricker" rect="107.070,480.110,307.900,597.150" color="#E44234" flags="print" name="8b423bdb-5f8c-992f-3dce-3b2dc9a04ffe" subject="Rectangle" />

Learn more about exporting annotations to XFDF or perhaps user permissions .