Some test text!

Search
Hamburger Icon

Define user permissions in WebViewer with JavaScript

This JavaScript sample demonstrates how you can apply permissions to users viewing your PDF, DOCX, XLSX, or PPTX document (no other external dependencies required). In this specific example you define how a user interacts with annotations in the PDF viewer. One common use case is removing a user’s ability to add annotation by providing them read-only access. Another example would be defining the types of annotations a user sees on a document – they can see highlighted text from another user but not the sticky notes they added. For other users you can give them the ability to respond to comments or give administrative rights to delete annotations. This sample works on all browsers (including IE11) and mobile devices without using plug-ins. To see an example visit our WebViewer User Permission demo. Learn more about our JavaScript PDF Library.

Get Started Samples Download

To run this sample, get started with a free trial of Apryse SDK.

JavaScript

HTML

// eslint-disable-next-line no-undef
const { WebViewerConstructor, uiOption } = getSampleOptions();

WebViewerConstructor(
  {
    path: '../../../lib',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
    ui: uiOption,
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  const { annotationManager } = instance.Core;
  const { openElements } = instance.UI;
  let shouldShowAnnotFromOtherUsers = true;

  const toggleVisibility = () => {
    const currentUser = annotationManager.getCurrentUser();
    const allAnnotations = annotationManager.getAnnotationsList().filter(annot => annot.Listable);
    let annotationsToShow = allAnnotations;
    annotationManager.hideAnnotations(allAnnotations);

    if (!shouldShowAnnotFromOtherUsers) {
      annotationsToShow = allAnnotations.filter(annot => annot.Author === currentUser);
    }
    annotationManager.showAnnotations(annotationsToShow);
  };

  annotationManager.setCurrentUser('Justin');
  annotationManager.promoteUserToAdmin();
  openElements(['notesPanel']);

  document.getElementById('justin').onchange = () => {
    annotationManager.setCurrentUser('Justin');
    annotationManager.promoteUserToAdmin();
    annotationManager.disableReadOnlyMode();
    toggleVisibility();
  };

  document.getElementById('sally').onchange = () => {
    annotationManager.setCurrentUser('Sally');
    annotationManager.demoteUserFromAdmin();
    annotationManager.disableReadOnlyMode();
    toggleVisibility();
  };

  document.getElementById('brian').onchange = () => {
    annotationManager.setCurrentUser('Brian');
    annotationManager.demoteUserFromAdmin();
    annotationManager.enableReadOnlyMode();
    toggleVisibility();
  };

  document.getElementById('display').onchange = e => {
    shouldShowAnnotFromOtherUsers = e.target.checked;
    toggleVisibility();
  };
});