How to programmatically change the color of search results

Technical Support WebViewer
,
1

WebViewer Version: 8.11.0

Please give a brief summary of your issue:
I’m trying to edit the web viewer so that search results have different colors based on the pattern used to search for them (for example I would like dates to be blue but names to be red). I tried using the code below. Similar code worked for redactions but it seems that the search results don’t have fields for type or color. Is there any way to do this?

        documentViewer.addEventListener('searchResultsChanged', (searchResults: any[]) => {
          console.log('search results changed')
          searchResults.forEach(searchResult => {
            if (patternMap.has(searchResult.type)) {
              const [red, green, blue] = convertHexStringToRgbArray(patternMap.get(searchResult.type)!.color)
              searchResult.color = new Annotations.Color(red, green, blue, 1.0)
            }
          })
        })
2

Hi Kanderson
Thanks for contacting us for support. Here is the guide for changing the color of the search result. Apryse Documentation | Documentation

3

Hi jhou, thanks for getting back to me. So that lets you change the color of all the search results but I need a way to have different search results be different colors. For example, if I’ve added a pattern for dates and one for ages and the user searches for both of them, I want the search results for ages to be red but the search results for dates to be blue. It sounds like I’ll need to go the advanced UI customization route to do that? Apryse Documentation | Documentation

4

Hi Kanderson
If you want to change the color of the search result in the right panel. You need to have your own customized UI to do it.

5

Ok, thanks for confirming