Adding Checkboxes to the tableview

[bheemireddi]

I have a dashboard with a table view with multiple columns, one of the field is incidentid, user should be able to select multiple incidents and submit for the further action. Is it possible to add the checkboxes to the table through simple xml and java script?

Thinking, will have an additional field in the field, and when I try to render the table, I should be able to update this field with Checkboxes.

Any ideas?

[chadmedeiros]

Previous answer was a great initial template. I took a try at building upon it to add some functionality to the checkboxes. It depends on what your usecase is, but see below:

var selected = [];  // 'selected' is an array that contains the IDs of every checkbox that the user selects.
$(document).on('click', '.customcheck', function() { 
    if($(this).children("i").css("display") == "none") 
    {
        // Do this if the box is going from unchecked to checked:
        $(this).children("i").css("display", "inline"); 
        selected.push($(this).children("i").prop("id"));

    } else {
        // Do this if the box is going from checked to unchecked:
        $(this).children("i").css("display", "none"); 
        var index = selected.indexOf($(this).children("i").prop("id"));
        if (index > -1) {
            selected.splice(index, 1);
        }

    }
});

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/layoutview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simplexml/element/visualization",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simplexml/searcheventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/linklist",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel",
    "splunkjs/mvc/tableview"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        LayoutView,
        Dashboard,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        VisualizationElement,
        FormUtils,
        EventHandler,
        SearchEventHandler,
        DropdownInput,
        RadioGroupInput,
        LinkListInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel,
        TableView
        ) {     
        var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
                // Only use the cell renderer for the Select field
                return (cell.field === 'Select');
            },
            render: function($td, cell) {
                if(cell.field === 'Select')
                {
                    //console.log("cellData: ", cell);
                    var cellvalue = cell.value;

                    // This is to handle page changes. If the user selects a box, goes to next table page, then goes back, it rechecks that box to maintain history.
                    if(selected.includes(cellvalue)) 
                    {
                        $td.html('<label class="checkbox"><a href="#" data-name="splunk_web_service" class="btn customcheck"><i id="'+cellvalue+'" class="icon-check" style="display: inline;"></i></a></label>');
                    } else {
                        $td.html('<label class="checkbox"><a href="#" data-name="splunk_web_service" class="btn customcheck"><i id="'+cellvalue+'" class="icon-check" style="display: none;"></i></a></label>');
                    }
                }
            }

        });

        mvc.Components.get('tableid').getVisualization(function(tableView){
            // Register custom cell renderer
            tableView.table.addCellRenderer(new RangeMapIconRenderer());
            // Force the table to re-render
            tableView.table.render();
        });
    }
);

In our case, the next step would be to add a submit button that would trigger something to happen based on the values stored in the 'selected' array.

[mwdbhyat]

@chadmedeiros did you ever add the submit functionality ? This is awesome, I just want it to send the selected checkboxes to another table when i hit submit..

[splunk_ankman]

Yes. You can do through using xml and simple javascript code. Please find below:
xml:

<panel>
  <table id="tableid">
    <title>Records</title>
    <search>
      <query>index="_internal" |eval Select=SourceType  
        | table Select,*
      </query>        
      <earliest>-1d@d</earliest>
      <latest>now</latest>
      </search>
    <option name="wrap">true</option>
    <option name="rowNumbers">false</option>
    <option name="dataOverlayMode">none</option>
    <option name="drilldown">none</option>
    <option name="count">100</option>
    <option name="link.openSearch.visible">true</option>
    <option name="link.inspectSearch.visible">false</option>
  </table>
</panel>

javascript:

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
        // Only use the cell renderer for the Select field
        return (cell.field === 'Select');
    },
    render: function($td, cell) {
        if(cell.field === 'Select')
        {
            //console.log("cellData: ", cell);
            var icon = cell.value;
            //console.log("icon: ", icon);

            $td.html('<label class="checkbox"><a href="#" data-name="splunk_web_service" class="btn"><i id="icon'+icon+'" class="icon-check" style="display: none;"></i></a></label>');
        }
    }
});

mvc.Components.get('tableid').getVisualization(function(tableView){
    // Register custom cell renderer
    tableView.table.addCellRenderer(new RangeMapIconRenderer());
    // Force the table to re-render
    tableView.table.render();
});

});