Integrate with external search - no results found

Technical Support WebViewer
1

I have an issue with customizing WebViewer, specifically with overriding the search function:
GitHub - Apryse WebViewer Server-Side Search Example

The problem is with the element displaying the “No results found.” message, which is shown by default when there are no search results

image
image296×262 3.95 KB

However, after overriding this method, when there are no results, the “No results found.” message does not appear

image
image296×262 1.32 KB

1 Like
2

Hi there,

Can you clarify which method you overrode and how you are calling the search API in WebViewer?

Are there any errors in the console or failed requests in the network panel?

best regards,
Kevin

1 Like
3 
const executeSearchOnBackendFactory = (searchValue: string, options?: any) => {
    const docViewer = this.wvInstance.Core.documentViewer;
    docViewer.clearSearchResults();
    docViewer.displayAdditionalSearchResults([]);
  };

instance.UI.overrideSearchExecution(this.executeSearchOnBackendFactory);

No errors in console

1 Like
4

Thank you for the snippet,

When you are passing in an empty array for the displayAdditionalSearchResult, there is no search actually being triggered. If you pass in the search object with a string that does not exist in the document it should show the ‘no result found’ text.

You can also test this on our showcase demo by searching for text that does not exist, i.e.

 instance.UI.searchText('ggg', {
        caseSensitive: false,
        wholeWord: false,
  });

image
image2372×1014 245 KB

best regards,
Kevin

1 Like
5

I don’t pass an empty array to my instance. The provided code is a simplified version of my actual implementation:

executeSearchOnBackendFactory = (searchValue: string, options?: any) => {
    const docViewer = this.wvInstance.Core.documentViewer;
    docViewer.clearSearchResults();
    const document = docViewer.getDocument();

    this.fileService.search(this._file.fileId, this._file.filePartId, searchValue).subscribe(data => {
      if (data.hits && data.hits.length > 0) {
        const extendedResult = data.hits.map(result => {
          return this.convertSearchResultForWebViewer(document, result);
        });

        docViewer.displayAdditionalSearchResults(extendedResult);
        docViewer.setActiveSearchResult(extendedResult[0]);

        const newAnnotations = extendedResult.map(result => {
          const annotation = new this.wvInstance.Core.Annotations.RedactionAnnotation();
          annotation.PageNumber = result.pageNum;
          annotation.Quads = result.quads;
          annotation.StrokeColor = new this.wvInstance.Core.Annotations.Color(136, 39, 31);
          return annotation;
        });

        this.wvInstance.Core.annotationManager.drawAnnotationsFromList(newAnnotations);
      }
    });
  };

However, this logic is specific to my internal implementation and cannot be directly reused. To reproduce the issue, override searchFactory where you always put empty array and trigger it with the UI search panel or method you provide. However, when we overriding searchFactory, the “No result found.” message, as shown in your screenshot, does not appear what is a issue i report.

1 Like
6

Hi there,

I was able to reproduce the issue of the search sample not showing up the ‘no search found’ message when using the above sample. I was able to reproduce it just as is from the sample without any custom code.

I will add this to the backlog for the product team to review.

The issue seems to be that it is not going to the line here in our WebViewer UI:

Because of this, it is not displaying the

element with the ‘no result found’ message.
You could override this via our advanced ui customization as a workaround:

best regards,
Kevin