How to store annotation authors by ID but display user name in the UI

[Matt Parizeau]

Q:

Annotation authors in our system might change their username but we don't want to go and update the author field of every annotation they've created. Can we store the author as an id and then just change the display in the WebViewer UI?

A:

Yes you can add the following code to your config file which will update the UI with the correct user name, you just need to implement the getAuthorName function to return the correct value.

function getAuthorName(userId) {
  // insert your userId to author name mapping code here
  return '[[' + userId + ']]';
}

var isDownloading = false;

var $document = $(document);

$document.on('noteCreated', function(e, annotation, $noteContainer) {
  var authorName = getAuthorName(annotation.Author);
  $noteContainer.find('.noteAuthor').text(authorName);
});

$document.on('annotationLineCreated', function(e, annotation, lineElement) {
  var i18nOptions = lineElement.data('i18n-options');
  i18nOptions.author = getAuthorName(annotation.Author);
  lineElement.data('i18n-options', i18nOptions);
  lineElement.i18n();
});

var superSerialize = Annotations.Annotation.prototype.serialize;
Annotations.Annotation.prototype.serialize = function(element, pageMatrix, isExport) {
  var el = superSerialize.call(this, element, pageMatrix);
  var $el = $(el);
  if (isDownloading) {
    var authorName = getAuthorName($el.attr("title"));
    $el.attr("title", authorName);
  }
  return el;
};

$document.on('documentLoaded', function() {
  $('#downloadButton').parent().off().on('click', function() {
    isDownloading = true;
    readerControl.activeButtonID = '#downloadButton';
    readerControl.activeButtonClass = 'disk_save';
    readerControl.downloadFile({ downloadType: 'pdf' });
    isDownloading = false;
  });
});

[mikaele]

Hi,

it doesn't look like this method is working any longer in WebViewer 4, is there another / better way to do this now?

[Zhijie Zhang]

Hi,

Yes, there is a better way to handle this now. You can give your users a unique (i.e. set the annotationUser option to a unique id) and then call AnnotationManager's setAnnotationDisplayAuthorMap function to map between ids and usernames. 

For example in a config file:

// load this from server
var myAuthorMap = {
  '1aaa176a-e264-fe0f-b7db-b4bf49562d2e': 'Alice',
  '6417ea94-0ac0-0891-70b4-0a4b877893a3': 'Bob'
}

$(document).on('viewerLoaded', function() {
  var annotManager = readerControl.docViewer.getAnnotationManager();
  annotManager.setAnnotationDisplayAuthorMap(function(annotation) {
    // falls back to current value of Author if no value in map
    return myAuthorMap[annotation.Author] || annotation.Author;
  });
});

Zhijie Zhang

Software Developer

PDFTron Systems Inc.

[mikaele]

Thanks, 

works great, this is much better!