topic Re: How can I display the html in a field as separate fields? in Dashboards & Visualizations

How can I display the html in a field as separate fields?

rrovers — Wed, 31 May 2023 13:54:49 GMT

With https://community.splunk.com/t5/Dashboards-Visualizations/Render-HTML-code-from-search-result-in-Splunk-dashboard/m-p/221940 I managed to display the (html) content in 1 field in readable format.

This solution works fine for 1 field at a time (logically, because it's using a token). I want to display all the fields in a dashboard in that format. I can't find out how to do that.

Besides that it's hard to find usefull information to use javascript in combination with splunk but maybe that's because I'm relatively new in using javascript and probably using the wrong keywords. Anyone some suggestions?

Re: How can I display the html in a field as separate fields?

kamlesh_vaghela — Fri, 02 Jun 2023 06:33:01 GMT

@rrovers

You can use Javascript to achieve your requirement. I'm sharing the extended javascript code to you so can start.

<dashboard script="convert_to_html.js"> <label>HTML from SPL</label> <search id="mySearch"> <done> <set token="tokHTML">$result.data$</set> </done> <query>| makeresults | eval data="<b>Network Map One </b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>", data1="<b>Network Map Two</b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>"</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <row> <panel> <html> <div id="htmlPanelWithToken"> </div> </html> </panel> </row> </dashboard>

convert_to_html.js

require([ 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function ($, mvc,) { var mySearch = mvc.Components.get("mySearch"); var mySearchResults = mySearch.data("results"); mySearchResults.on("data", function () { resultArray = mySearchResults.data().rows; var generateHTMLContent = ""; $("#htmlPanelWithToken").html(generateHTMLContent); //Iterate Result set $.each(resultArray, function (index, value) { // console.log(index, value) console.log(index, value[0]) console.log(index, value[1]) console.log(index, value[2]) // Create proper HTML content from result generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>"; //value[1] = data field //value[2] = data1 field console.log(generateHTMLContent); }) $("#htmlPanelWithToken").html(generateHTMLContent); }); });

I hope this will help you.

In case you required further help then please share more about your requirement with sample data and expected output.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: How can I display the html in a field as separate fields?

rrovers — Tue, 13 Jun 2023 06:50:56 GMT

Hi @kamlesh_vaghela,

Thanks for your answer. I copied the source to a dashboard, added the token:

<div id="htmlPanelWithToken"> $tokHTML$ </div>

and loaded the javascript but the result is not as I expected, namely:

<b>Network Map Two</b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>

I expect something like:

Network map 2

Device 1:...

Device 2:...

Is there something wrong in the code or are my expecations not right?

Re: How can I display the html in a field as separate fields?

kamlesh_vaghela — Tue, 13 Jun 2023 08:50:29 GMT

@rrovers

Can you please share your Sample XML and JS?

Re: How can I display the html in a field as separate fields?

rrovers — Tue, 13 Jun 2023 09:49:27 GMT

Hi @kamlesh_vaghela, It's based on your example:

dashboard:

<dashboard version="1.1" script="convert_to_html.js"> <label>HTML from SPL</label> <search> <query> | makeresults | eval data="<b>Network Map One </b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>" , data1="<b>Network Map Two</b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>" </query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> <done> <set token="tokHTML">$result.data1$</set> </done> </search> <row> <panel> <html> <div id="htmlPanelWithToken"> $tokHTML$ </div> </html> </panel> </row> </dashboard>

jscript:

require([ 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function ($, mvc,) { var mySearch = mvc.Components.get("mySearch"); var mySearchResults = mySearch.data("results"); mySearchResults.on("data", function () { resultArray = mySearchResults.data().rows; var generateHTMLContent = ""; $("#htmlPanelWithToken").html(generateHTMLContent); // Iterate Result set $.each(resultArray, function (index, value) //{ console.log(index, value) console.log(index, value[0]) console.log(index, value[1]) console.log(index, value[2]) //Create proper HTML content from result generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>"; // value[1] = data field // value[2] = data1 field console.log(generateHTMLContent); }) $("#htmlPanelWithToken").html(generateHTMLContent); }); });

Re: How can I display the html in a field as separate fields?

kamlesh_vaghela — Thu, 15 Jun 2023 05:27:17 GMT

@rrovers

As per your code you need to remove below code from Search tag.

<done> <set token="tokHTML">$result.data1$</set> </done>

Remove `$tokHTML$` from

<div id="htmlPanelWithToken"> $tokHTML$ </div>

Check this comment and try to mimic and replicate in your code.

https://community.splunk.com/t5/Dashboards-Visualizations/How-can-I-display-the-html-in-a-field-as-separate-fields/m-p/645476/highlight/true#M52684

Note: As you are working with JS you need to follow some development practices.

Your javascript should be at $SPLUNK_HOME/etc/apps/<app_name>/appserver/static/ directory.

After updating a javascript file that is already being used in Dashboard, reload the code through a bump on the search head by visiting this page:

https://my.search.head/en-US/_bump and click on the bump button.

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.