Getting Data In

Adding Checkboxes to the tableview

bheemireddi
Communicator

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?

0 Karma

chadmedeiros
Path Finder

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
Builder

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

0 Karma

splunk_ankman
Explorer

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();
});

});

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

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

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...