Dashboards & Visualizations

How to add dropdown and button in Splunk table cells?

Jitu
Engager

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 

0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

View solution in original post

Jitu
Engager

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

Get Updates on the Splunk Community!

Extending Splunk AI Assistant for SPL to Splunk Enterprise customers!

Howdy Splunk Community! It’s an exciting day here at Splunk – Splunk AI Assistant for SPL version 1.3.0 is now ...

Developer Spotlight with Qmulos

Qmulos: Building a Next-Level Cybersecurity Business through Splunk Apps Qmulos started as a scrappy startup ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Enhance Security Operations with Automated Threat Analysis in the Splunk EcosystemAre you leveraging ...