Creating a summary of fields by multi-selected val...

uveys · ‎04-09-2020

Hey everybody!
I have this following multi-select construction with checkboxes and submit button. This gives me the selected value on the first panel and allows me to pass that onto the secondary panel. However the value on panel2 therefore loses its connection to other field attributes in the search and is being represented as just a passed-on-text-value. What i want to have is to have the same construction, with the difference of being able to keep the connection of the value that is being passed on to the other field attributes of the search, so that i can construct a summary of certain fields by this transferred value . Here are the . .js and xml:

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');
    // Custom renderer for applying checkbox.
    var CustomRenderer = TableView.BaseCellRenderer.extend({
            canRender: function (cell) {
                return _(['Select Value']).contains(cell.field);
            },
            render: function ($td, cell) {
                var a = $('<div>').attr({
                        "id": "chk-sourcetype" + cell.value,
                        "value": cell.value
                    }).addClass('checkbox').click(function () {
                        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);
                            }
                        }
                        console.log(selected_values_array);
                    }).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);
    });

    $(document).ready(function () {

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

And the xml:

<form script="multiselect_table.js" stylesheet="multiselect_table.css">
  <label>Summary by ID</label>
  <row>
    <panel>
      <table id="myTable">
        <title>Panel A</title>
        <search>
          <query>Res!=220 | stats count by MId, a, b, c, d 
               | eval "Select Sourcetype"= MId
               | table "Select Sourcetype" Mid, a, b, c, d count</query>
          <earliest>-5d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">row</option>
        <drilldown>
          <condition field="*"></condition>
        </drilldown>
      </table>
      <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 sum(c) as totalc, sum(d) as totald by SelectedRowValue 
                 | table SelectedRowValue, a, b, c, d</query>
          <earliest>-5d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">cell</option>
      </table>
    </panel>
  </row>
</form>

What i wanna have is a summary of the fields a, b, c, d on panel 2, by SelectedRowValue. I'd also like to do that without a submit button, as in the data gets passed on right after i click on checkbox, without having to submit it by the button. Thanks in advance!

Creating a summary of fields by multi-selected values

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Your Feedback. Our Roadmap. Visit the PX Feedback Booth at .conf26

Agentic SOC Triage: Investigating Splunk ES Notables with MCP Server and a Local LLM

Painting a Clearer Picture: Creating Cross-Domain Visibility with AI Canvas

Join the Conversation