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.

In the XFDF, the `title` attribute corresponds to the author of the annotation.

Shell

<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.

Shell

<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.

Map a userId to a Display Author

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.

For 7.x and below the mapping function takes in an annotation instead of a userId.

JavaScript (SDK v8.0+)

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

WebViewerInstance AnnotationManager.setAnnotationDisplayAuthorMap AnnotationManager.getDisplayAuthor

JavaScript (SDK v6.0+)

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

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

  annotManager.setAnnotationDisplayAuthorMap(mapNames);

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

WebViewerInstance AnnotationManager.setAnnotationDisplayAuthorMap AnnotationManager.getDisplayAuthor

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.

Shell

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

Exporting display author names

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.

JavaScript (SDK v8.0+)

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

JavaScript (SDK v6.0+)

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

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

  annotationManager.setAnnotationDisplayAuthorMap(mapNames);

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

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

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

Shell

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

Next steps

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