Searching documents in Salesforce

Getting Started

We recommend the Overview page to learn how to correctly use a config.js before getting started.

Open a document

To search a document, you need to open it in WebViewer. See more in docs on opening documents.

Searching an open document

Once your document is loaded in WebViewer it is ready for search. From your LWC component where the WebViewer iFrame is mounted (in our sample, it is pdftronWvInstance), you need to post a message to your iframeWindow like so:

JavaScript

this.iframeWindow.postMessage({ type: 'SEARCH_DOCUMENT', searchTerm }, '*');

searchTerm is required and represents a string or regular expression you would like to search the document for. type is optional, but recommended for handling multiple messages in a readable fashion.

Note: You must set regex: true in your options parameter to enable searching for a regex string.

Processing search in your config.js

Since WebViewer is hosted in an iFrame, we need to use our config.js file to access our WebViewer instance. In a Salesforce deployment, the equivalent of instance is readerControl.

In your config.js file, you can you listen for messages posted to the iFrame by registering an event listener using window.addEventListener("message", receiveMessage, false);. In this case, receiveMessage is a function that handles these posted messages. You can review the snippet below for an example of how to deal with posted messages.

Searching the document for a single instance of search term

This snippet uses the searchText() function. It searches the document one by one for the text matching searchValue. To go to the next result this function must be called again. Once document end is reach it will jump back to the first found result. To search and highlight every occurrence of the search term, review the next section.

JavaScript

function receiveMessage(event) {
  const annotManager = docViewer.getAnnotationManager();
  
  //you can register a searchListener to use a callback for result handling
  const searchListener = (searchTerm, options, results) => {
    // add redaction annotation for each search result
    const newAnnotations = results.map(result => {
      const annotation = new Annotations.RedactionAnnotation();
      annotation.PageNumber = result.pageNum;
      annotation.Quads = result.quads.map(quad => quad.getPoints());
      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
      return annotation;
    });

    annotManager.addAnnotations(newAnnotations);
    annotManager.drawAnnotationsFromList(newAnnotations);
  };

  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'SEARCH_DOCUMENT':
        if (event.data.term) {
          const searchOptions = {
            caseSensitive: true,  // match case
            wholeWord: true,      // match whole words only
            wildcard: false,      // allow using '*' as a wildcard value
            regex: false,         // string is treated as a regular expression
            searchUp: false,      // search from the end of the document upwards
            ambientString: true,  // return ambient string as part of the result
          };
          instance.addSearchListener(searchListener);
          instance.searchText(event.data.term, searchOptions); //search full text for single occurence of searchTerm
        }
        break;
      default:
        break;
    }
  }
}

JavaScript

function receiveMessage(event) {
  const annotManager = docViewer.getAnnotationManager();
  
  //you can register a searchListener to use a callback for result handling
  const searchListener = (searchTerm, options, results) => {
    // add redaction annotation for each search result
    const newAnnotations = results.map(result => {
      const annotation = new Annotations.RedactionAnnotation();
      annotation.PageNumber = result.pageNum;
      annotation.Quads = result.quads.map(quad => quad.getPoints());
      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
      return annotation;
    });

    annotManager.addAnnotations(newAnnotations);
    annotManager.drawAnnotationsFromList(newAnnotations);
  };

  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'SEARCH_DOCUMENT':
        if (event.data.term) {
          const searchOptions = {
            caseSensitive: true,  // match case
            wholeWord: true,      // match whole words only
            wildcard: false,      // allow using '*' as a wildcard value
            regex: false,         // string is treated as a regular expression
            searchUp: false,      // search from the end of the document upwards
            ambientString: true,  // return ambient string as part of the result
          };
          readerControl.addSearchListener(searchListener);
          readerControl.searchText(event.data.term, searchOptions); //search full text for single occurence of searchTerm
        }
        break;
      default:
        break;
    }
  }
}

Searching the document for all instances of search term (multiple highlights)

The following snippet uses the searchTextFull() function:

JavaScript

function receiveMessage(event) {
  const annotManager = docViewer.getAnnotationManager();
  
  //you can register a searchListener to use a callback for result handling
  const searchListener = (searchTerm, options, results) => {
    // add redaction annotation for each search result
    const newAnnotations = results.map(result => {
      const annotation = new Annotations.RedactionAnnotation();
      annotation.PageNumber = result.pageNum;
      annotation.Quads = result.quads.map(quad => quad.getPoints());
      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
      return annotation;
    });

    annotManager.addAnnotations(newAnnotations);
    annotManager.drawAnnotationsFromList(newAnnotations);
  };

  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'SEARCH_DOCUMENT':
        if (event.data.term) {
          const searchOptions = {
            caseSensitive: true,  // match case
            wholeWord: true,      // match whole words only
            wildcard: false,      // allow using '*' as a wildcard value
            regex: false,         // string is treated as a regular expression
            searchUp: false,      // search from the end of the document upwards
            ambientString: true,  // return ambient string as part of the result
          };
          instance.addSearchListener(searchListener);
          instance.searchTextFull(event.data.term, searchOptions); //search full text for every occurence of searchTerm
        }
        break;
      default:
        break;
    }
  }
}

JavaScript

function receiveMessage(event) {
  const annotManager = docViewer.getAnnotationManager();
  
  //you can register a searchListener to use a callback for result handling
  const searchListener = (searchTerm, options, results) => {
    // add redaction annotation for each search result
    const newAnnotations = results.map(result => {
      const annotation = new Annotations.RedactionAnnotation();
      annotation.PageNumber = result.pageNum;
      annotation.Quads = result.quads.map(quad => quad.getPoints());
      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
      return annotation;
    });

    annotManager.addAnnotations(newAnnotations);
    annotManager.drawAnnotationsFromList(newAnnotations);
  };

  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'SEARCH_DOCUMENT':
        if (event.data.term) {
          const searchOptions = {
            caseSensitive: true,  // match case
            wholeWord: true,      // match whole words only
            wildcard: false,      // allow using '*' as a wildcard value
            regex: false,         // string is treated as a regular expression
            searchUp: false,      // search from the end of the document upwards
            ambientString: true,  // return ambient string as part of the result
          };
          readerControl.addSearchListener(searchListener);
          readerControl.searchTextFull(event.data.term, searchOptions); //search full text for every occurence of searchTerm
        }
        break;
      default:
        break;
    }
  }
}

Sample project

You can review the Salesforce PDF App to showcase an end-to-end example of search, and how you can leverage it for redaction and content replacing on our Github repository.

Live demo

Check out this live PDF Search Demo (hosted outside of Salesforce).