topic How to add dropdown and button in Splunk table cells? in Dashboards & Visualizations

How to add dropdown and button in Splunk table cells?

Jitu — Tue, 20 Jun 2023 02:23:53 GMT

I have a splunk table where there are few columns having dropdown (eg ddcol1, ddcol2 ) and at last there is a column having button(submit)

The functionality of the button is to mark all the dropdowns with a default value(ok)

I have written the below js , but the dropdown doesnt update on click of the button

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { // Add dropdown to table var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return _(["ddcol1","ddcol2","submit"]).contains(cell.field); }, render: function($td, cell) { console.log(cell.field); if (cell.field == "ddcol1" || cell.field == "ddcol2") { if(cell.value == "dd") { var strHtmlInput = ` <select> <option value="ok">ok</option> <option value="not ok">Not Ok</option> </select> `; $td.append(strHtmlInput).on("change", function(e) { console.log(e.target.value) }); } else { $td.append(cell.value); } } if (cell.field == "submit"){ console.log(cell.field); var strHtmlInput1=`<input type='button' class='table-button' value='All Ok'></input>`; $td.append(strHtmlInput1); } } }); $(document).on("click",".table-button",function(){ console.log("clicked"); console.log($(this).parents("tr").find("td[data-cell-index='6'").find(":selected").text()); $(this).parents("tr").find("td[data-cell-index='6']").find(":selected").value="ok"; console.log('selected'); console.log($(this).parents("tr").find("td[data-cell-index='6'").find(":selected").text()); }); var sh = mvc.Components.get("tbl1"); if (typeof(sh) != "undefined") { sh.getVisualization(function(tableView) { // Add custom cell renderer and force re-render tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.table.render(); }); } });

@niketn @kamlesh_vaghela

Re: How to add dropdown and button in Splunk table cells?

kamlesh_vaghela — Wed, 21 Jun 2023 05:39:41 GMT

@Jitu

Update button onclick logic with below.

$(document).on("click", ".table-button", function () { var parentElement = $(this).parents("tr"); console.log(parentElement); var selectElements = parentElement.find('select'); console.log(selectElements); selectElements.each(function () { $(this).val('ok'); }); });

Full Code:

XML

<dashboard script="my.js"> <label>Table With Component</label> <row> <panel> <table id="tbl1"> <search> <query>| makeresults count=10 | eval a=1 | accum a | eval ddcol1="dd" ,ddcol2="dd",submit="submit"</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <option name="count">100</option> <option name="dataOverlayMode">none</option> <option name="drilldown">none</option> <option name="percentagesRow">false</option> <option name="rowNumbers">false</option> <option name="totalsRow">false</option> <option name="wrap">true</option> </table> </panel> </row> </dashboard>

my.js

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function (_, $, mvc, TableView) { // Add dropdown to table var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function (cell) { return _(["ddcol1", "ddcol2", "submit"]).contains(cell.field); }, render: function ($td, cell) { console.log(cell.field); if (cell.field == "ddcol1" || cell.field == "ddcol2") { if (cell.value == "dd") { var strHtmlInput = ` <select> <option value="ok">ok</option> <option value="not ok">Not Ok</option> </select> `; $td.append(strHtmlInput).on("change", function (e) { console.log(e.target.value) }); } else { $td.append(cell.value); } } if (cell.field == "submit") { console.log(cell.field); var strHtmlInput1 = `<input type='button' class='table-button' value='All Ok'></input>`; $td.append(strHtmlInput1); } } }); $(document).on("click", ".table-button", function () { var parentElement = $(this).parents("tr"); console.log(parentElement); var selectElements = parentElement.find('select'); console.log(selectElements); selectElements.each(function () { $(this).val('ok'); }); }); var sh = mvc.Components.get("tbl1"); if (typeof (sh) != "undefined") { sh.getVisualization(function (tableView) { // Add custom cell renderer and force re-render tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.table.render(); }); } });

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.

Re: How to add dropdown and button in Splunk table cells?

Jitu — Thu, 22 Jun 2023 11:40:45 GMT

@kamlesh_vaghela if i need a button to upload the table result to summary along with dropdown selection , is it possible ?

Re: How to add dropdown and button in Splunk table cells?

kamlesh_vaghela — Thu, 22 Jun 2023 16:58:29 GMT

@Jitu

Yes, you can. But for this, you have to create a custom endpoint that can process your table data sent through payload. Please check the below link for the custom endpoint. You need to call this endpoint from JavaScript using the Splunk MVC Service object.

https://hurricanelabs.com/splunk-tutorials/splunk-custom-endpoints-part-1-the-basics/

Sample Code:

service.request("/services/my-api-path","POST", {}, {}, JSON.stringify(params), {'Content-Type': 'application/json'}, function(err, resp) { // Handle response if(resp != null){ if(resp.status == 200){ //do something } else { //do something with status !=200 } } // Handle error if(err != null){ //handle error } });

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.