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
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

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

The Problem: Too Many Alerts, Too Little Context Security operations teams running Splunk Enterprise Security ...

All Work and No Play? Not at .conf26! Unwind at These Evening Events

Between hands-on technical sessions, keynote reveals, and diving into live architectures, .conf26 is packed ...

Join the Hackathon at .conf26 and build a No-Code AI agent

Join us for the AI Agent Buildathon, an in-person, three-hour hands-on Hackathon where you’ll use Splunk Agent ...