How to insert checkboxes in a simple statistics results table?

[allan_newton]

Hello Splunkers,

I have a situation where I have to replace the first cell in each row in a statistics table with a checkbox.

example query: index=_internal | dedup sourcetype | head 5 | eval select="select" | table select, sourcetype, source, index

The first cell in each row except heading should now be having a select button.

Thanks in advance.

[michael_vi]

Is there a way to "keep the checkbox"?
Once you browse between the pages, the checkbox disappears.

[ajayabburi508]

when i select 2 rows in first page then i go to second page &checked other row and i am back to first page,. now in first page i am not able to see my selected check boxes in first page.

can you please help me

[kamlesh_vaghela]

@ajayabburi508 

Can you please replace the below code in JS?

Old:

var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).addClass(checkbox_css).click(function() {

New:

var checkbox_css = selected_values_array.includes(cell.value) ? "checkbox checked" : "checkbox";
            var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).addClass(checkbox_css).click(function() {

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

[michael_vi]

The solution provided by @kamlesh_vaghela works great.

How can I add 3 more columns with checkboxes? Something like this:

sourcetype	host	index	sourcetype_check	host_check	index_check
splunk_web_access	sh1	_internal
splunk_web_service	sh1	_internal
splunkd	idx1	_internal
splunkd	sh1	_internal
splunkd_access	idx1	_internal
splunkd_access	sh1	_internal
splunkd_remote_searches	idx1	_internal
splunkd_ui_access	sh1	_internal

[kamlesh_vaghela]

@michael_vi 

Can you please try this?

JS

 require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    // Access the "default" token model
    var tokens = mvc.Components.get("default");
    var selected_values_array = [];
    var selected_values_array_host = [];
    var selected_values_array_index = [];
    var submittedTokens = mvc.Components.get('submitted');
    console.log("This is Multi-select table JS");
    // Custom renderer for applying checkbox.
    var CustomRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Select Sourcetype', 'Select host', 'Select index']).contains(cell.field);
        },
        render: function($td, cell) {
            console.log(cell)
            var a = $('<div>').attr({
                "id": "chk-sourcetype" + cell.value,
                "value": cell.value
            }).addClass('checkbox').click(function() {
                if ($(this).attr('class') === "checkbox") {
                    if (cell.field === 'Select Sourcetype') {
                        selected_values_array.push($(this).attr('value'));
                    } else if (cell.field === 'Select host') {
                        selected_values_array_host.push($(this).attr('value'));
                    } else if (cell.field === 'Select index') {
                        selected_values_array_index.push($(this).attr('value'));
                    }
                    $(this).removeClass();
                    $(this).addClass("checkbox checked");
                } else {
                    $(this).removeClass();
                    $(this).addClass("checkbox");
                    if (cell.field === 'Select Sourcetype') {
                        var i = selected_values_array.indexOf($(this).attr('value'));
                        if (i != -1) {
                            selected_values_array.splice(i, 1);
                        }
                    } else if (cell.field === 'Select host') {
                        var i = selected_values_array_host.indexOf($(this).attr('value'));
                        if (i != -1) {
                            selected_values_array_host.splice(i, 1);
                        }
                    } else if (cell.field === 'Select index') {
                        var i = selected_values_array_index.indexOf($(this).attr('value'));
                        if (i != -1) {
                            selected_values_array_index.splice(i, 1);
                        }
                    }
                }
                console.log("selected_values_array", selected_values_array);
                console.log("selected_values_array_host", selected_values_array_host);
                console.log("selected_values_array_index", selected_values_array_index);
            }).appendTo($td);
        }
    });

    //List of table ID
    var sh = mvc.Components.get("myTable");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRenderer());
            tableView.table.render();
        });
    }

    // Disabling button while search is running
    var mysearch = mvc.Components.get('mysearch');
    mysearch.on('search:start', function(properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch.on('search:done', function(properties) {
        $("#mybutton").attr('disabled', false);
    });

    var mysearch_host = mvc.Components.get('mysearch_host');
    mysearch_host.on('search:start', function(properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch_host.on('search:done', function(properties) {
        $("#mybutton").attr('disabled', false);
    });

    var mysearch_index = mvc.Components.get('mysearch_index');
    mysearch_index.on('search:start', function(properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch_index.on('search:done', function(properties) {
        $("#mybutton").attr('disabled', false);
    });
    $(document).ready(function() {

        //setting up tokens with selected value.
        $("#mybutton").on("click", function(e) {
            e.preventDefault();
            tokens.set("mytoken", selected_values_array.join());
            tokens.set("mytoken_host", selected_values_array_host.join());
            tokens.set("mytoken_index", selected_values_array_index.join());
            submittedTokens.set(tokens.toJSON());
            $("#mybutton").attr('disabled', true);
        });
    });
});

css

/* The standalone checkbox square*/

.checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    display: inline-block;
}


/* This is what simulates a checkmark icon */

.checkbox.checked:after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    /* "Center" the checkmark */
    position: relative;
    top: 4px;
    left: 7px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

XML

<dashboard script="a.js" stylesheet="a.css">
  <label>Multi-Select Table Rows Example</label>
  <row>
    <panel>
      <!-- This Panel is for instruction purpose only-->
      <html>
    <h1>This is an example for multi select table rows.</h1>
    <h2>Steps:</h2>
    <ui>
    <li>Select rows from Panel A by clicking on checkboxes.</li>
    <li>Click on "Submit" button</li>
    <li>You will get selected values in Panel B.</li>
    </ui>
    <br/>
    <h3>This is how you can achieve your requirements. See below files for implementation code.</h3>
    <code>multiselect_table.js</code>
        <br/>
    <code>multiselect_table.css</code>
        <br/>
    <code>multiselect_table.xml</code>
        <br/>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="myTable">
        <title>Panel A</title>
        <search>
          <query>index=_internal | stats count by sourcetype | eval "Select Sourcetype"=sourcetype | table "Select Sourcetype" sourcetype count | eval host=sourcetype,index=sourcetype,"Select host"=host,"Select index"=index | table  sourcetype host index "Select Sourcetype" "Select host" "Select index"</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition field="*"></condition>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
       <div>
         <input type="button" id="mybutton" value="Submit"/>
       </div>
     </html>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch">
          <query>| makeresults | eval SelectedRowValue="$mytoken$" | makemv delim="," SelectedRowValue | stats count by SelectedRowValue | table SelectedRowValue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch_host">
          <query>| makeresults | eval SelectedRowValue="$mytoken_host$" | makemv delim="," SelectedRowValue | stats count by SelectedRowValue | table SelectedRowValue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch_index">
          <query>| makeresults | eval SelectedRowValue="$mytoken_index$" | makemv delim="," SelectedRowValue | stats count by SelectedRowValue | table SelectedRowValue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

[kamlesh_vaghela]

Hi @allan_newton,

I have created sample dashboard for you.

Can you please try below code?

mydashboard.xml

<form script="my.js" stylesheet="my.css">
   <row>
     <panel>
       <table id="myTable">
         <title>My Table</title>
         <search>
           <query>index=_internal | stats count by sourcetype | eval checkbox=sourcetype</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
         </search>
         <option name="count">10</option>
         <option name="drilldown">row</option>
         <drilldown>
           <condition field="*">

           </condition>
           </drilldown>
       </table>
     </panel>
   </row>
   <row>
     <html>
       <div>
         <input type="button" id="mybutton" value="My Button" />
       </div>
     </html>
   </row>
   <row>
      <panel>
       <table>
         <title>My Selected Value</title>
         <search>
           <query>| makeresults | eval myvalue="$mytoken$" | makemv delim="," myvalue | stats count by myvalue | table myvalue</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
         </search>
         <option name="count">10</option>
         <option name="drilldown">none</option>
       </table>
     </panel>
   </row>
 </form>

my.js

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {
     // Access the "default" token model
     var tokens = mvc.Components.get("default");
     var selected_values_array = [];
     var submittedTokens = mvc.Components.get('submitted');

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             return _(['checkbox']).contains(cell.field);
         },
         render: function($td, cell) {
             var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).addClass('checkbox').click(function() {
                 // console.log("checked",$(this).attr('class'));
                 // console.log("checked",$(this).attr('value'));
                 if($(this).attr('class')==="checkbox")
                 {
                     selected_values_array.push($(this).attr('value'));
                     $(this).removeClass();
                     $(this).addClass("checkbox checked");
                 }
                 else {
                     $(this).removeClass();
                     $(this).addClass("checkbox");
                     var i = selected_values_array.indexOf($(this).attr('value'));
                     if(i != -1) {
                         selected_values_array.splice(i, 1);
                     }
                     // Change the value of a token $mytoken$
                 }
                 console.log(selected_values_array);
             }).appendTo($td);
         }
     });

     //List of table IDs
     var tableIDs = ["myTable"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
             });
         }
     }
     $(document).ready(function () {
         $("#mybutton").on("click", function (e) {
             e.preventDefault();
             console.log("in");
             tokens.set("mytoken", selected_values_array.join());
             submittedTokens.set(tokens.toJSON());
         });
     });
 });

my.css

/* The standalone checkbox square*/
 .checkbox {
   width:20px;
   height:20px;
   border: 1px solid #000;
   display: inline-block;
 }

 /* This is what simulates a checkmark icon */
 .checkbox.checked:after {
   content: '';
   display: block;
   width: 4px;
   height: 7px;

   /* "Center" the checkmark */
   position:relative;
   top:4px;
   left:7px;

   border: solid #000;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }

Here I have created javascript and Css (my.js and my.css).
Keep both file in SPLUNK_HOME/etc/apps/MYAPP/appserver/static/ path.

There are two tables in dashboard. First for selection and seconf for selected value.
I have stored value in javascript variable selected_values_array and splunk token mytoken.
You can use splunk token mytoken in any search.
2nd table is an example of using splunk token mytoken. You can use this token for store in lookup.

Thanks

[mwdbhyat]

@kamlesh_vaghela any thoughts on how this could be implemented to select all the fields in a table row? EG - Table 1 has - field1 field2 field3 and the Select box, when I tick that row for selection -> field1 field2 field3 get sent to table 2 on a single row--essentially i want it to select the whole row with values and any sparklines i have embedded in the table row and send it to another table.

Right now it looks like it only does it by a single defined value of whatever you set the eval to.. Would it be best to just make the eval = all the fields in the row?

[MelnikovTimofey]

Use TableView.BaseCellRenderer to define your own string renderer. Example: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEUB.
And create css style for checkbox

[mayurr98]

Hey have a look at this
https://answers.splunk.com/answers/433204/how-to-create-a-table-with-checkboxes-in-my-html-d.html

Let me know if this helps!

[493669]

Hi @allan_newton
please refer https://answers.splunk.com/answers/587089/multiselect-table-rows.html
here you need to include js and css to include checkbox in each row which will store field key value once it is checked in checkmark.