WebViewer Version: ^10.1.0
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No
Please give a brief summary of your issue:
(Think of this as an email subject)
Having trouble implementing text search into our React app
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I’d like to be able to programmatically search a document using the WebViewer.
We have a application where users can search for document using text search. The user performs a search, and a list of documents are returned that contain the search term they are looking for. The user can then click on a document, and view a preview of that document with al of the instances of the search term highlighted in the document.
At the moment I’m able to achieve this using instance.UI.searchTextFull, but when the document loads in the previewer it seems to loop through all of the instance of the search term, and flash the searchPanel for each result, until all the results have been returned.
I tried hiding the searchPanel by using instance.UI.disableElements(['searchPanel ']);, but doing this seemed to restrict to showing only one instance of the search term in the document, instead of the multiple that could be found.
So my question is, can I perform a searchTextFull while not showing the searchPanel? Ultimately I would like the user to be able to still bring up the searchPanel, I would just like to hide it be default.
Below is the relevant block of code I’ve got at the moment that performs the text search:
WebViewer(
{
path: '/lib',
licenseKey: licenseKey,
disabledElements: [
'printButton',
'downloadButton',
'saveAsButton',
'toggleCompareModeButton',
'toggleNotesButton',
'selectToolButton',
],
},
viewer.current!
).then(async instance => {
// load document into viewer
instance.UI.loadDocument(docBlobUrl, { filename: 'file.' + fileExtension?.toLowerCase() });
// turn off buttons
instance.UI.disableElements(['ribbons']);
instance.UI.disableElements(['toolbarGroup-Shapes']);
instance.UI.disableElements(['toolbarGroup-Edit']);
instance.UI.disableElements(['toolbarGroup-Insert']);
instance.UI.disableElements(['toolbarGroup-Annotate']);
// disable viewer features
const Feature = instance.UI.Feature as any;
instance.UI.disableFeatures([Feature.Copy, Feature.Print, Feature.selectToolButton]);
// display document viewer and turn off loading spinner
const { documentViewer, Annotations } = instance.Core;
// Set search highlight colors
documentViewer.setSearchHighlightColors({
searchResult: new Annotations.Color(230, 82, 0, 0.1),
activeSearchResult: 'rgba(230, 82, 0, 0.1)'
});
documentViewer.setTextHighlightColor('rgba(230, 82, 0, 0.1)');
documentViewer.addEventListener('documentLoaded', () => {
if (searchTerm) {
const searchOptions = {
caseSensitive: false,
wholeWord: false,
wildcard: false,
regex: false,
searchUp: false,
ambientString: true,
};
instance.UI.searchTextFull(searchTerm, searchOptions);
}
});
});
Please provide a link to a minimal sample where the issue is reproducible: