Getting Data In

How to display multiple SplunkJS inputs on one line

spammenot66
Contributor

Is there a way to display multiple splunkjs one one line?

Here's my js code:

    require([
        "splunkjs/mvc",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/tableview",
        "splunkjs/mvc/dropdownview",
        "splunkjs/mvc/multidropdownview",
        "splunkjs/mvc/simplexml/ready!"
    ], function(
        mvc,
        SearchManager,
        TableView,
        DropdownView, 
        MultiDropdownView 
    ) {

        // Create the search manager and views
        var mainSearch = new SearchManager({
            id: "mysearch",
            search: "index=_internal | head 5",
            data: mvc.tokenSafe("$datamod$"),
            status_buckets: 300,
            preview: true,
            cache: false
        });

        var table1 = new TableView({
            id:"table",
            managerid: "mysearch",
            el: $("#mytable")
        }).render();

        var mydropdown = new DropdownView({
            id: "selData",
            showClearButton: false,
            value: mvc.tokenSafe("$datamod$"),
            el: $("#mydropdown")
        }).render();

        // Set the dropdown list choices
        var choices = [
            {label: "events",  value: "events" },
            {label: "preview", value: "preview"},
            {label: "results", value: "results"},
            {label: "summary", value: "summary"}
        ];
        mydropdown.settings.set("choices", choices);

        // Display the type of selected results model in the console
        var myChoice = "results";
        mydropdown.on("change", function(){
            myChoice = mydropdown.settings.get("value");
            var myResults = mainSearch.data(myChoice);
            myResults.on("data", function() {
                console.log("Type: ", myChoice);
                console.log("Has data? ", myResults.hasData());
                console.log("Data (rows): ", myResults.data().rows);
                console.log("Backbone collection: (rows) ", myResults.collection().raw.rows);
            });
        });

        var mymultiselect = new MultiDropdownView({
                id: "example-multidropdown",
                managerid: "example-search",
                vakye: mvc.tokenSafe("$datams$"),
                default: "main",
                labelField: "index",
                valueField: "index",
                el: $("#mymultidropdownview")
            }).render();

       var mymultiselect_search = new SearchManager({
                id: "example-search",

                search: "| eventcount summarize=false index=* index=_* | dedup index | fields index" 
            });


    });

Here's my Simple XML

    <dashboard script="splunkresultsmodelv2.js">
      <label>SplunkResultsModelv2</label>
      <row>
        <panel>
          <title>$datamod$ $datams$</title>
          <html>
            <h2>
              <a href="https://docs.splunk.com/DocumentationStatic/WebFramework/1.4/compref_splunkresultsmodel.html">SplunkResultsModel</a>
            </h2>
            <span id="mymultidropdownview"/>
            <span id="mydropdown"/>
            <div id="mytable"/>

         <!-- <div>dropdown:$datamod$</div><div>          multiselect:$example-multidropdown$</div>-->


          </html>
        </panel>
      </row>
    </dashboard>

screenshot

0 Karma
1 Solution

spammenot66
Contributor

easy solution would be handle it in the css. float:left for the form input and clear:left for the table

<dashboard script="splunkresultsmodelv2.js">
  <label>SplunkResultsModelv2</label>
  <row>
    <panel>
      <title>$datamod$ $datams$</title>
      <html>
        <h2>
          <a href="https://docs.splunk.com/DocumentationStatic/WebFramework/1.4/compref_splunkresultsmodel.html">SplunkResultsModel</a>
        </h2>
        <div style="float: left" id="mymultidropdownview"/>
        <span style="float: left" id="mydropdown"/>
        <div  style="clear: left" id="mytable"/>

      </html>
    </panel>
  </row>
</dashboard>

View solution in original post

0 Karma

spammenot66
Contributor

easy solution would be handle it in the css. float:left for the form input and clear:left for the table

<dashboard script="splunkresultsmodelv2.js">
  <label>SplunkResultsModelv2</label>
  <row>
    <panel>
      <title>$datamod$ $datams$</title>
      <html>
        <h2>
          <a href="https://docs.splunk.com/DocumentationStatic/WebFramework/1.4/compref_splunkresultsmodel.html">SplunkResultsModel</a>
        </h2>
        <div style="float: left" id="mymultidropdownview"/>
        <span style="float: left" id="mydropdown"/>
        <div  style="clear: left" id="mytable"/>

      </html>
    </panel>
  </row>
</dashboard>
0 Karma
Get Updates on the Splunk Community!

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI!Discover how Splunk’s agentic AI ...

Splunk Enterprise Security 8.x: The Essential Upgrade for Threat Detection, ...

Watch On Demand the Tech Talk on November 6 at 11AM PT, and empower your SOC to reach new heights! Duration: ...

Splunk Observability as Code: From Zero to Dashboard

For the details on what Self-Service Observability and Observability as Code is, we have some awesome content ...