Searching documents in Salesforce

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

To search a document, you need to open it in WebViewer. You can review opening documents here .

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:

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.

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.

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.

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;
    }
  }
}

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;
    }
  }
}

The following snippet uses the searchTextFull() function:

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;
    }
  }
}

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;
    }
  }
}

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.

Check out this live demo hosted outside of Salesforce.