@kartm2020 if this is based on my previous answer: https://answers.splunk.com/answers/636948/how-to-add-css-class-to-table-field-by-input-in-sp.html, then that was created only for Single Table using specific table ID i.e. table1.
var tableView=mvc.Components.get("table1");
In case you want to apply the same logic to multiple tables, you can try the following approaches:
1. In JS keep is string array of table IDs and iterate through table IDs to access respective TableView and add your custom cell renderer. Simple but required JS change each time new table is added or removed.
2. If you want to keep the logic dynamic for all table ( ** I am documenting this approach to iterate through all tables in SimpleXML and to extended each one of them using SimpleXML JS Extension and SplunkJS dynamically ** )
a) You would need to iterate through all Splunk Elements using mvc.Components.getInstances(). Refer to older answer: https://answers.splunk.com/answers/129142/changing-multiple-tables-in-simplexml-using-splunkjs.html
b) You would need to identify whether it is TableView element. If so, extend the Base Cell Renderer, when text box value is changed.
c) In order to refresh the table add a dummy token dependency each time custom Cell Renderer is added. There are several examples and ways to do this. One such example for reference: https://answers.splunk.com/answers/667232/how-to-force-rerendering-tableview-from-javascript.html
PS: Since the search is re-run for table re-render on changing the text box value, consider loadjob kind of option to display the results in table then refresh using token set in JS on Extending the Table Cell Render. Or else the solution will have to be purely jQuery based assuming Queries complete before Text Box value is changed.
Following is the Simple XML Dashboard code:
<form script="highlightToken.js">
<label>Highlight selected text in all tables</label>
<init>
<set token="tokRefresh">true</set>
</init>
<fieldset submitButton="true" autoRun="false">
<input type="time" token="field1" searchWhenChanged="false">
<label></label>
<default>
<earliest>-1h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="text" token="tokFilter" searchWhenChanged="false">
<label>Search Word</label>
<default>splunk*</default>
<initialValue>searchword</initialValue>
</input>
</fieldset>
<row>
<panel>
<table id="highlightTable1">
<search id="highlightSearch1">
<query>index=_internal
| stats count by sourcetype
| fields - "$tokRefresh$"</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>1m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="count">5</option>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="highlightTable2">
<search id="highlightSearch2">
<query>index=_internal
| stats count by sourcetype
| head 5
| fields - "$tokRefresh$"</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>30s</refresh>
<refreshType>delay</refreshType>
</search>
<option name="count">5</option>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlightTable3">
<search id="highlightSearch3">
<query>index=_internal
| stats count by sourcetype
| head 5
| fields - "$tokRefresh$" </query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
</search>
<option name="count">5</option>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="highlightTable4">
<search id="highlightSearch4">
<query>index=_internal sourcetype="splunkd"
| stats count by sourcetype
| head 5
| fields - "$tokRefresh$" </query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
</search>
<option name="count">5</option>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row>
<panel>
<table id="highlightTable5">
<search id="highlightSearch5">
<query>index=_internal
| stats count by sourcetype
| head 5
| fields - "$tokRefresh$" </query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</form>
Following is the required JS file highlightToken.js to be placed under your Splunk app's appserver/static folder.
require([
"underscore",
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/tableview",
"splunkjs/mvc/simplexml/ready!"
], function(_, $, mvc, TableView) {
var submittedTokenModel = mvc.Components.get("submitted");
var tableView;
var tokRefresh = "refreshCounter1"
var refreshCounter = 0;
var strRefresh = "refresh1";
var strFilterText = ""
var CustomHighlightRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
//Applied to message column in the Table
return cell.field === "sourcetype";
},
render: function($td, cell) {
var strText = cell.value;
var regEx = new RegExp(strFilterText, "gi");
//Apply regular expression to replace Filter Text with html content bold font and red color
strText = strText.replace(regEx, '<b style="color:red;">$&</b>');
// Add html content to table cell of string class
$td.addClass('string').html(_.template(strText));
}
});
// When Text box input value changes handle tokFilter
submittedTokenModel.on("change:tokFilter", function(newtokFilter, tokFilter, options) {
// Only if tokFilter has value apply Custom Table Render
// Since token tokFilter is used in table query Table is supposed to render again
if (tokFilter !== undefined || tokFilter !== "$value$") {
strFilterText = tokFilter;
$.each(mvc.Components.getInstances(), function(i, tableView) {
if (tableView instanceof TableView) {
// Register custom cell renderer, the table will re-render automatically
var customRenderer = tableView.getCellRenderers();
tableView.removeCellRenderer(customRenderer);
tableView.addCellRenderer(new CustomHighlightRenderer());
if (refreshCounter == 2) {
refreshCounter = refreshCounter + 1;
strRefresh = strRefresh + refreshCounter.toString();
} else {
refreshCounter = 1;
strRefresh = strRefresh + refreshCounter.toString();
}
submittedTokenModel.set("tokRefresh", strRefresh);
}
});
}
});
});
