@mjlsnombrado here is a run anywhere example where all the values of component are first put as a multivalue field using values() stats function. Then they are converted to single value using nomv command. Since the field values may already have spaces, before nomv the spaces are replaced with pipe character (or any other character/s of your choice). This is done because nomv also adds spaces between all the multi-values. Using replace command the component field value is converted into html section i.e. <div>value</div>. Then Simple XML JS Extension with Splunk JS Stack is used to convert HTML token to HTML using jQuery function html(). CSS Style has been applied to <html> <panel> having token with html content in it using Simple XML CSS extension which is placed under <style> tag of the Simple XML code.
PS: This is only simple approach as an example. Other option would be to access the Search using SearchManager and when the search has data. Put it to <html> (basically take away the search and token from Simple XML to JS). I hope even example of this approach should be present on Splunk Answers. If you are interested in this approach and want help with an example let me know.
Following is the Simple XML code for run anywhere dashboard based on Splunk's _internal index:
<dashboard script="display_token_with_html_content.js">
<label>Show Table Results in One Page</label>
<search>
<query>index=_internal sourcetype=splunkd
| eval component=replace(component," ","\|")
| stats values(component) as component
| nomv component
| eval component=replace(component,"\|"," ")
| eval component="<div>".replace(component," ","</div><div>")."</div>"</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<done>
<set token="tokResultsInHTML">$result.component$</set>
</done>
</search>
<row>
<panel>
<html>
<style>
#htmlTokenContainer{
display:flex;
flex-wrap:wrap;
}
#htmlTokenContainer div{
width: 260px;
}
</style>
$tokResultsInHTML$
</html>
</panel>
</row>
<row>
<panel>
<title>Format Data as desired output and show as html</title>
<html>
<div id="htmlTokenContainer">
</div>
</html>
</panel>
</row>
</dashboard>
Following is the corresponding JS file display_token_with_html_content.js
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function (
$,
mvc
) {
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
if (tokResultsInHTML !== undefined) {
$("#htmlTokenContainer").html(tokResultsInHTML);
}
});
});
@mjlsnombrado here is a run anywhere example where all the values of component are first put as a multivalue field using values() stats function. Then they are converted to single value using nomv command. Since the field values may already have spaces, before nomv the spaces are replaced with pipe character (or any other character/s of your choice). This is done because nomv also adds spaces between all the multi-values. Using replace command the component field value is converted into html section i.e. <div>value</div>. Then Simple XML JS Extension with Splunk JS Stack is used to convert HTML token to HTML using jQuery function html(). CSS Style has been applied to <html> <panel> having token with html content in it using Simple XML CSS extension which is placed under <style> tag of the Simple XML code.
PS: This is only simple approach as an example. Other option would be to access the Search using SearchManager and when the search has data. Put it to <html> (basically take away the search and token from Simple XML to JS). I hope even example of this approach should be present on Splunk Answers. If you are interested in this approach and want help with an example let me know.
Following is the Simple XML code for run anywhere dashboard based on Splunk's _internal index:
<dashboard script="display_token_with_html_content.js">
<label>Show Table Results in One Page</label>
<search>
<query>index=_internal sourcetype=splunkd
| eval component=replace(component," ","\|")
| stats values(component) as component
| nomv component
| eval component=replace(component,"\|"," ")
| eval component="<div>".replace(component," ","</div><div>")."</div>"</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
<done>
<set token="tokResultsInHTML">$result.component$</set>
</done>
</search>
<row>
<panel>
<html>
<style>
#htmlTokenContainer{
display:flex;
flex-wrap:wrap;
}
#htmlTokenContainer div{
width: 260px;
}
</style>
$tokResultsInHTML$
</html>
</panel>
</row>
<row>
<panel>
<title>Format Data as desired output and show as html</title>
<html>
<div id="htmlTokenContainer">
</div>
</html>
</panel>
</row>
</dashboard>
Following is the corresponding JS file display_token_with_html_content.js
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function (
$,
mvc
) {
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
if (tokResultsInHTML !== undefined) {
$("#htmlTokenContainer").html(tokResultsInHTML);
}
});
});
