I'm using a searchable tree, which highlights the nodes that match the search. I'm following directions from a June 20, 2021 blog post by Srihari Ravva and it works perfectly for me.
There is one nuance that I need a bit of hand-holding on. In order to highlight the nodes that are matching the search criteria, the blog says:
We can do this using find method of treeView widget.
To implement this, let's keep below JavaScript code in Page > JavaScript > Function and Global Variable Declaration section (preferably in your application specific JavaScript file).
I have the code (pasted at bottom of post) in the Page > JavaScript > Function and Global Variabel Declaration section.
Can someone please guide me to the preferable alternative, of putting the code in my “application specific JavaScript file”? I assume that's at Shared Components, but
Thank you-
mt in NY (using 23.1.2)
function treeFind ( pTree$, pSearchString, pClassName ) {
// find the string in tree nodes
var lMatchedNodes$ = pTree$.treeView( "find", {
depth: -1,
findAll: true,
match: function( n ) {
return n.label.toLowerCase().indexOf( pSearchString.toLowerCase() ) >= 0;
}
} );
// add CSS class to matching nodes
lMatchedNodes$.addClass( pClassName );
// find is used in conjunction with server side filtering
// so when there are matching nodes, we just expand all nodes, so users can see matched nodes easily
if ( lMatchedNodes$.length > 0 ) {
pTree$.treeView( "expandAll" );
}
}
function treeSearch ( pSearchString, pStaticId, pClassName ) {
// remove CSS classes from previous search, if any
apex.jQuery( "." + apex.util.escapeCSS( pClassName ), "#" + apex.util.escapeCSS( pStaticId )).removeClass( pClassName );
if ( pSearchString !== "" ) {
treeFind( apex.region( pStaticId ).widget(), pSearchString, pClassName );
}
}