This guide will help you integrate a free trial of WebViewer into your Salesforce org. If you are looking to get started, click here .

Prerequisites

• You need a Salesforce sandbox or scratch org. You can also use a developer org, you can get a free one here
• Install the SFDX CLI
• Install Visual Studio Code + Salesforce Extension

Making Web Guides applicable to your Salesforce needs

Many of the Web guides you will find about how to extend WebViewer to fit your needs is applicable to a Salesforce deployment, though there are some key differences to be aware of:

Config.js

The WebViewer deployment in Salesforce requires that any extended logic be placed into the config.js file.

Additional reading about config.js

Equivalent of the Instance Callback Parameter

Most of the WebViewer examples will assume access to the instance callback parameter:

WebViewer(
  // ...
)
  .then(instance => {
    // instance will be undefined in a Salesforce deployment!
  });

In a Salesforce deployment before version 8.0+, the equivalent of instance is readerControl .

Here are some examples from our guides translated to a Salesforce deployment

Creating a Rectangle Programmatically

The original guide can be found here

// config.js
window.addEventListener('documentLoaded', async () => {
  const docViewer = instance.Core.documentViewer;
  const annotManager = await docViewer.getAnnotationManager();
  /**
   * Global namespace is accessible from config.js, hence why `Annotations` does
   * need to be de-structured from instance
   */
  const rectangleAnnot = new Annotations.RectangleAnnotation();
  rectangleAnnot.PageNumber = 1;
  // values are in page coordinates with (0, 0) in the top left
  rectangleAnnot.X = 100;
  rectangleAnnot.Y = 150;
  rectangleAnnot.Width = 200;
  rectangleAnnot.Height = 50;
  rectangleAnnot.Author = annotManager.getCurrentUser();

  annotManager.addAnnotation(rectangleAnnot);
  // need to draw the annotation otherwise it won't show up until the page is refreshed
  annotManager.redrawAnnotation(rectangleAnnot);
});

// config.js
window.addEventListener('documentLoaded', async () => {
  const { docViewer } = readerControl;
  const annotManager = await docViewer.getAnnotationManager();
  /**
   * Global namespace is accessible from config.js, hence why `Annotations` does
   * need to be de-structured from readerControl
   */
  const rectangleAnnot = new Annotations.RectangleAnnotation();
  rectangleAnnot.PageNumber = 1;
  // values are in page coordinates with (0, 0) in the top left
  rectangleAnnot.X = 100;
  rectangleAnnot.Y = 150;
  rectangleAnnot.Width = 200;
  rectangleAnnot.Height = 50;
  rectangleAnnot.Author = annotManager.getCurrentUser();

  annotManager.addAnnotation(rectangleAnnot);
  // need to draw the annotation otherwise it won't show up until the page is refreshed
  annotManager.redrawAnnotation(rectangleAnnot);
});

Hiding Elements of the UI

The original guide can be found here

// config.js
window.addEventListener('viewerLoaded', async () => {
  instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});

// config.js
window.addEventListener('viewerLoaded', async () => {
  readerControl.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});

Guides

Opening a Document Saved In Salesforce

Opening Documents In Salesforce

Saving Document Annotations in Salesforce

Saving Annotations In Salesforce

Document Search in Salesforce

Document Search In Salesforce

Document Redaction in Salesforce

Document Redaction In Salesforce

Replace Document Text in Salesforce

Replace Text in Salesforce