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.

sh

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

Apryse Docs Image

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.

sh

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

Apryse Docs Image

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.

1WebViewer({
2 annotationUser: '1',
3 // other constructor options
4}, viewerElement).then(instance => {
5 const { annotationManager } = instance.Core;
6
7 annotationManager.setAnnotationDisplayAuthorMap((userId) => {
8 if (userId === '1') {
9 return 'John Smith';
10 } else if (userId === '2') {
11 return 'Sally Smith';
12 } else {
13 return 'Guest';
14 }
15 });
16
17 annotationManager.setAnnotationDisplayAuthorMap(mapNames);
18
19 // Now you can get a display author by passing in a unique ID
20 const displayAuthor = annotationManager.getDisplayAuthor(annotation.Author);
21});

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.

sh

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

Apryse Docs Image

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.

1WebViewer({
2 annotationUser: '1',
3 // other constructor options
4}, viewerElement).then(instance => {
5 const { documentViewer, annotationManager } = instance.Core;
6
7 annotationManager.setAnnotationDisplayAuthorMap((userId) => {
8 if (userId === '1') {
9 return 'Will Ricker';
10 } else if (userId === '2') {
11 return 'Jean-Luc Picard'
12 } else {
13 return 'Guest';
14 }
15 });
16
17 annotationManager.setAnnotationDisplayAuthorMap(mapNames);
18
19 documentViewer.addEventListener('annotationsLoaded', async () => {
20 const xfdfString = await annotationManager.exportAnnotations({
21 useDisplayAuthor: true,
22 });
23
24 // Save/use XFDF
25 });
26});

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

sh

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales