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!

AI for AppInspect

We’re excited to announce two new updates to AppInspect designed to save you time and make the app approval ...

App Platform's 2025 Year in Review: A Year of Innovation, Growth, and Community

As we step into 2026, it’s the perfect moment to reflect on what an extraordinary year 2025 was for the Splunk ...

Operationalizing Entity Risk Score with Enterprise Security 8.3+

Overview Enterprise Security 8.3 introduces a powerful new feature called “Entity Risk Scoring” (ERS) for ...