About kamlesh_vaghela

kamlesh_vaghela

@Sss I agree with @ITWhisperer You need to go with your own customization to achieve such a format using your own HTML and CSS. (Like using Jquery or Splunk Simple View) Check this link. https://community.splunk.com/t5/Splunk-Enterprise/Custom-Table-format-How-to-merge-cells/m-p/645590#M16492 If you need further help with this approach let us know. KV

kamlesh_vaghela

@anissabnk Can you please let me know where you placed the JS file in your app? It 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. KV

kamlesh_vaghela

@anissabnk You can achieve such a format using your own HTML and CSS. You can try below sample code for your POC. <dashboard script="convert_to_html.js"> <label>HTML Table from SPL</label> <search id="mySearch"> <done> <set token="tokHTML">$result.data$</set> </done> <query>|makeresults count=10 | eval a=1 | accum a | eval NW="NW"+a, P="P"+a, NAOK="NAOK"+a, NAKO="NAKO"+a, TRMOK="TRMOK"+a, TRMKO="TRMKO"+a | table NW P NAOK NAKO TRMOK TRMKO</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <row> <panel> <html> <div id="htmlPanelWithToken"> </div> </html> </panel> </row> <row> <panel> <html> <style> .th_td_class { background-color: chocolate; color: white; text-align: center; } .td_class { background-color: orange; color: white; border: 2px solid black; text-align: center; } .tr_class { background-color: chocolate; color: white; text-align: center; border: 2px solid black; } .td_content_class { text-align: center; border: 2px solid black; } </style> </html> </panel> </row> </dashboard> 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; $("#htmlPanelWithToken").html(""); var generateDataContent = ""; //Iterate Result set $.each(resultArray, function (index, value) { // 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 generateDataContent = generateDataContent + `<tr> <td class="td_content_class">`+ value[0] + `</td> <td class="td_content_class">`+ value[1] + `</td> <td class="td_content_class">`+ value[2] + `</td> <td class="td_content_class">`+ value[3] + `</td> <td class="td_content_class">`+ value[4] + `</td> <td class="td_content_class">`+ value[5] + `</td> </tr>`; }) var generateHTMLContent = ` <table width="25%"> <thead> <tr> <td class="tr_class">F</td> <td class="tr_class">V</td> </tr> </thead> <tbody> <tr> <td class="td_content_class">N</td> <td class="td_content_class">W</td> </tr> <tr> <td class="td_content_class">P</td> <td class="td_content_class">P</td> </tr> <tr> <td class="td_content_class">D</td> <td class="td_content_class">123</td> </tr> </tbody> </table> <br/> <table width="100%"> <thead> <tr> <td colspan="2"></td> <td class="tr_class" colspan="2">NA</td> <td class="tr_class" colspan="2">TRM</td> </tr> <tr> <td class="td_class">NW</td> <td class="td_class">P</td> <td class="td_class">OK</td> <td class="td_class">KO</td> <td class="td_class">OK</td> <td class="td_class">KO</td> </tr> </thead> <tbody> `+ generateDataContent + ` </tbody> </table> <br /> <table width="50%"> <tbody> <tr> <td class="td_content_class">Total</td> <td class="td_content_class">W</td> <td class="td_content_class">P</td> <td class="td_content_class">11</td> <td class="td_content_class">10</td> <td class="td_content_class">1111</td> <td class="td_content_class">2222</td> </tr> </tbody> </table> `; $("#htmlPanelWithToken").html(generateHTMLContent); }); }); 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.

kamlesh_vaghela

@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.

kamlesh_vaghela

@Renunaren Here I suggest displaying the trimmed value in table view and displaying the full value by expanding the table row. This is a sample search for trimming value. | makeresults | eval A="a b c d e f g h " | rex field=A "(?<displayA>^.*\n.*\n.*\n.\n)" And this is an example of "How to use Row expansion" https://community.splunk.com/t5/Dashboards-Visualizations/Receiving-quot-A-custom-JavaScript-error-caused-an-issue-loading/m-p/644630/highlight/true#M52646 Let me know if you need more help on this. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela

@damode1 Can you please try this? YOUR_SEARCH | spath | eval EventData = json_object("FileVersion", FileVersion,"Company",Company, "TerminalSessionId",TerminalSessionId, "UtcTime",UtcTime, "Product",Product) | eval NewJson = json_object("ID",ID, "Timestamp", Timestamp,"EventData",json(EventData)) | table _raw NewJson My Sample Search : | makeresults | eval _raw="{\"ID\": 1,\"Timestamp\": \"2023-05-18T05:07:59.940594300Z\",\"FileVersion\": \"10.0.17134.1 (WinBuild.160101.0800)\",\"Company\": \"Microsoft Corporation\",\"TerminalSessionId\": 0,\"UtcTime\": \"2018-08-20 15:18:59.929\",\"Product\": \"Microsoft® Windows® Operating System\",}" | spath | eval EventData = json_object("FileVersion", FileVersion,"Company",Company, "TerminalSessionId",TerminalSessionId, "UtcTime",UtcTime, "Product",Product) | eval NewJson = json_object("ID",ID, "Timestamp", Timestamp,"EventData",json(EventData)) | table _raw NewJson 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.

kamlesh_vaghela

@noviceregex Can you please share some sample events from both sources and your expected output from those? KV

kamlesh_vaghela

@Jasmine Have you tried to achieve this by adding a custom click event on Submit button using JS Extention? KV

kamlesh_vaghela

@sweetie This kind of error only happens when some reference object is not properly defined. What I suggest, is just follow the code I have shared with you and add your changes. Just be careful when you define any object OR mention any id. KV

kamlesh_vaghela

@sweetie What is the console error? Did you check my above working example? KV

kamlesh_vaghela

@sweetie As you are using Splunk version 8.x.x there is no need to add any version in the dashboard. Can you please try this Sample Example? require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function ( TableView, ChartView, SearchManager, mvc, _ ) { console.log("HIe"); // var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ // canRender: function (cell) { // return cell.field; // }, // render: function ($container, rowData) { // console.log(rowData.value); // $container.html(rowData.value) // } // }); var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function (args) { this._searchManager = new SearchManager({ preview: false }, { tokens: true, tokenNamespace: "submitted" }); this._TableView = new TableView({ managerid: this._searchManager.name, drilldown: 'cell' }); }, canRender: function (rowData) { return true; }, render: function ($container, rowData) { var processCell = _(rowData.cells).find(function (cell) { return cell.field === 'SID'; }); value = processCell.value // var tokens = mvc.Components.get("default") // var id = tokens.get("splunk_id") this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="' + value + '",c=1 | accum c ' }); $container.append(this._TableView.render().el); } }); var tableElement = mvc.Components.getInstance("table1"); tableElement.getVisualization(function (tableView) { // Add custom cell renderer, the table will re-render automatically. // tableView.table.addCellRenderer(new CustomRangeRenderer()); // tableView.render(); tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); }); <dashboard script="a.js" theme="dark" hideFilters="True"> <label>Label</label> <row> <panel> <table id="table1"> <search> <query>| makeresults count=10 | eval count=1 | accum count | eval SID = count</query> <earliest>-1w@w1</earliest> <latest>@w1</latest> </search> <option name="drilldown">row</option> <option name="refresh.display">progressbar</option> <drilldown> <condition></condition> </drilldown> </table> </panel> </row> </dashboard> Screenshot Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela

@sweetie Can you please share your JS and sample XML with dummy queries? May be with both I can help you with this. KV

kamlesh_vaghela

Yes @sweetie Modules should be required properly in Custom Javascript. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela

Glad to help you Happy Splunking KV

kamlesh_vaghela

@fredclown May be the below example will help you, Can you please try this? a.js require([ 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function ( SearchManager, mvc, _ ) { var tokens = mvc.Components.get("default"); var submittedTokens = mvc.Components.get('submitted'); var searhId1 = mvc.Components.get("searhId1"); searhId1.on('search:start', function (properties) { tokens.set("afterDone", "search in progress"); submittedTokens.set(tokens.toJSON()); }); searhId1.on('search:done', function (properties) { console.log("in search done", properties); tokens.set("afterDone", "search done"); submittedTokens.set(tokens.toJSON()); }); }); XML <dashboard script="a.js"> <label>Fire JavaScript After Search Panels are Done</label> <row> <panel> <table id="panelId1"> <search id="searhId1"> <query>index="_internal" | stats count by source | eval "Test Case" = source. "@@". count | eval "Color"= if(count>5000,"OK","KO")</query> <earliest>-1w@w1</earliest> <latest>@w1</latest> </search> <option name="drilldown">row</option> <option name="refresh.display">progressbar</option> </table> </panel> </row> <row> <panel> <title>After Done $$afterDone$$</title> <single> <search> <query>| makeresults | eval value= "$afterDone$" | table value</query> <earliest>-24h@h</earliest> <latest>now</latest> </search> <option name="drilldown">none</option> <option name="field">range</option> <option name="colorBy">value</option> </single> </panel> </row> </dashboard> Note: Just observe the Panel Search and JS code on Search start and done. You can do any logic execution and customisation during this event. 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.

kamlesh_vaghela

@sweetie Can you please try this? I have corrected some code. require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function ( TableView, ChartView, SearchManager, mvc, _ ) { var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function (args) { this._searchManager = new SearchManager({ id: 'details-search-manager', preview: false }); this._TableView = new TableView({ managerid: 'details-search-manager' }); }, canRender: function (rowData) { return true; }, render: function ($container, rowData) { var sourcetypeCell = _(rowData.cells).find(function (cell) { return cell.field === 'SID'; }); value = processCell.value; this._searchManager.set({ search: '|makeresults count=10 | eval a="A", value="' + value + '" ' }); } }); var tableElement = mvc.Components.getInstance("table1"); tableElement.getVisualization(function (tableView) { tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); }); 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.

kamlesh_vaghela

@deepikagooty Can you please try this Sample JS Code? require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function( TableView, ChartView, SearchManager, mvc, _ ) { console.log("HIe"); var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return cell.field; }, render: function($container, rowData) { console.log(rowData.value); $container.html(rowData.value) } }); var EventSearchBasedRowExpansionRendererSecondLevel = TableView.BaseRowExpansionRenderer.extend({ initialize: function(args) { this._searchManager = new SearchManager({ preview: false }, { tokens: true, tokenNamespace: "submitted" }); this._TableView = new TableView({ managerid: this._searchManager.name, drilldown: 'cell' }); }, canRender: function(rowData) { return true; }, render: function($container, rowData) { var processCell = _(rowData.cells).find(function(cell) { return cell.field === 'a'; }); value = processCell.value // var tokens = mvc.Components.get("default") this._searchManager.set({ search: '|makeresults count=100 | eval b="B", value="'+value+'",c=2 | accum c '}); $container.append(this._TableView.render().el); } }); var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function(args) { this._searchManager = new SearchManager({ preview: false }, { tokens: true, tokenNamespace: "submitted" }); this._TableView = new TableView({ managerid: this._searchManager.name, drilldown: 'cell' }); this._TableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRendererSecondLevel()); }, canRender: function(rowData) { return true; }, render: function($container, rowData) { var processCell = _(rowData.cells).find(function(cell) { return cell.field === 'Test Case'; }); value = processCell.value // var tokens = mvc.Components.get("default") // var id = tokens.get("splunk_id") this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="'+value+'",c=1 | accum c '}); $container.append(this._TableView.render().el); } }); var tableElement = mvc.Components.getInstance("expand_with_events"); tableElement.getVisualization(function(tableView) { // Add custom cell renderer, the table will re-render automatically. tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.render(); tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); }); 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.

kamlesh_vaghela

@sweetie Is it possible for you to share your sample custom JS code and Splunk version? KV

kamlesh_vaghela

@Razziat JS will always load first. When the dashboard is getting loaded, Splunk JS Extension will be loaded just before the dashboard is ready for use. Splunk JS Extension has 2 token models. default token model submitted token model https://dev.splunk.com/enterprise/docs/developapps/visualizedata/convertsimplexml/tokenmodels/ You need to write your javascript code according to the requirements and these two models. Eg, if you are customizing the TableView then you should declare the customization code in JS, which execute before the dashboard gets finished to load. And the same declared code will be executed on the basis of the lifecycle of that component (in this example, TableView). TableView is dependent on the SearchManager. When searching is done then TableView is getting populated and will be displayed, at this point, our defined Custom JS logic will be executed and will change the Table Row/Cell. Your XML code looks good to me. If you want your JS to be executed after dashboard loading then use below JS code and put your code in the SECTION. require([ 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function( mvc, _ ) { console.log("HIe"); $(document).ready(function () { /*Add Your code here.*/ }); }); For further help, you can share your sample JS here OR you can message it to me. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela

@Razziat Can you please share your Sample Dashboard code? KV

Posts	2590
Solutions	486
Karma Given	59
Karma Received	747
Member Since	‎09-23-2015

Online Status	Offline
Date Last Visited	18 hours ago

Receiving "A custom JavaScript error caused an iss...

How can we delete particular data from KVStore usi...

How to restrict time range picker to specific peri...

Is there any way to send Splunk indexed Data to an...

Are there any limitations of search string length ...

Why am I getting an error to start a fresh Splunk ...

Why AppInspect tool Fails check_lookup_files check...

Got Error: "The splunk daemon (splunkd) is already...

How to add custom validation on Configuration Page...

How to change app banner css when open search in s...

Re: Table representation in splunk by combining th...

Re: Custom Table format- How to merge cells?

Re: Custom Table format- How to merge cells?

Re: How can I display the html in a field as separ...

Re: Need to fix the row height and extend the cell...

Re: How to convert multiple individual json object...

Re: How to display JSON array difference?

Re: How to achieve static value in dropdown list?

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Fire JavaScript After Search Panels are Done

Re: Fire JavaScript After Search Panels are Done

Re: Receiving "A custom JavaScript error caused an...

Re: How can I achieve a two level row expansions f...

Re: Receiving "A custom JavaScript error caused an...

Re: JS script loaded before searches in a dashboar...

Re: JS script loaded before searches in a dashboar...