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!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...