Friday, February 28, 2020

APEX: text highlighter with Mark.js

Today I have a need to highlighter some of the key word(typed in search string) in the report and I find out this wonderful Mark.js library(you can find all the detail here https://markjs.io/)

Here is what I did for the Classic Report:

1. include the javascripts: include this url in the File URLS section of the page(Here I am using the JQuery model):

https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js

2. put following css in the CSS inline section of the page:

mark {
  padding: 0;
  background: #00ff19;
  color: black;  
}

3. create a after refresh DA and put following javascripts in the action:

$('.t-Report-cell').mark($v('Pxx_SEARCH'), {"separateWordSearch": false});

Pxx_SEARCH is my search item in my page

There are many options available(check detail in https://markjs.io/). You can set up by your choice.