Dashboards & Visualizations

Is it possible to add panel inside a html tag?

Jhanzkie
Path Finder

Hello, sorry to ask this very noob question.

Can i add panel inside a html tag?
For example.
I have a table command in html and in that cell i want to add a single panel .

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Jhanzkie 

You can achieve this with the Javascript Extension. Please try below sample code. I hope sample code will give some idea about the implementations. 

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    var SingleView = require("splunkjs/mvc/singleview");
    var TableView = require("splunkjs/mvc/tableview");
    var SearchManager = require("splunkjs/mvc/searchmanager");

    var sampleSearch = new SearchManager({
        id: "sampleSearch",
        earliest_time: "-1d@d",
        latest_time: "",
        preview: true,
        autostart: false,
        cache: false,
        search: 'index=_internal | stats count'
    });
    $(document).ready(function() {
        var mySingleView = new SingleView({
            id: "example-single" + Date.now(),
            managerid: "sampleSearch",
            el: $("#divSingleView")
        }).render();
        var myCustomtable = new TableView({
            id: "modal_example-table" + Date.now(),
            managerid: "sampleSearch",
            pageSize: "10",
            el: $("#divTableView")
        }).render();
        sampleSearch.startSearch();
    })
});

 

XML.

<dashboard script="a.js">
<label>Single View in HTML Example</label>
<row>
  <panel>
    <html>
      <div>Hello World</div>
      <table border="1" style="width:800px" >
        <thead>
          <td>
            Single View
          </td>
          <td>
            Table View
          </td>
        </thead>
        <tr>
          <td>
            <div id="divSingleView"></div>
          </td>
          <td>
            <div id="divTableView"></div>
          </td>
        </tr>
      </table>
    </html>
  </panel>
</row>
</dashboard>

 

Screen:

Screenshot 2022-02-15 at 11.38.29 AM.png

 

Thanks

 KV

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Jhanzkie 

You can achieve this with the Javascript Extension. Please try below sample code. I hope sample code will give some idea about the implementations. 

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    var SingleView = require("splunkjs/mvc/singleview");
    var TableView = require("splunkjs/mvc/tableview");
    var SearchManager = require("splunkjs/mvc/searchmanager");

    var sampleSearch = new SearchManager({
        id: "sampleSearch",
        earliest_time: "-1d@d",
        latest_time: "",
        preview: true,
        autostart: false,
        cache: false,
        search: 'index=_internal | stats count'
    });
    $(document).ready(function() {
        var mySingleView = new SingleView({
            id: "example-single" + Date.now(),
            managerid: "sampleSearch",
            el: $("#divSingleView")
        }).render();
        var myCustomtable = new TableView({
            id: "modal_example-table" + Date.now(),
            managerid: "sampleSearch",
            pageSize: "10",
            el: $("#divTableView")
        }).render();
        sampleSearch.startSearch();
    })
});

 

XML.

<dashboard script="a.js">
<label>Single View in HTML Example</label>
<row>
  <panel>
    <html>
      <div>Hello World</div>
      <table border="1" style="width:800px" >
        <thead>
          <td>
            Single View
          </td>
          <td>
            Table View
          </td>
        </thead>
        <tr>
          <td>
            <div id="divSingleView"></div>
          </td>
          <td>
            <div id="divTableView"></div>
          </td>
        </tr>
      </table>
    </html>
  </panel>
</row>
</dashboard>

 

Screen:

Screenshot 2022-02-15 at 11.38.29 AM.png

 

Thanks

 KV

Jhanzkie
Path Finder

ill try this one, thanks

0 Karma

Jhanzkie
Path Finder

may i also add if i can have a layout like this in my dashboard ?

Jhanzkie_0-1645095376881.png

for column 2,
3 panels  .. 

just asking if its possible though.

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Yes @Jhanzkie , With JS & Css you can add any Splunk Chart OR Component.. 

First Design a HTML container and then use JS for populating those container with Splunk Chart Or Components. 


Happy Splunking 

KV 

🙂 

Jhanzkie
Path Finder

thank you very much for the help 😄

ITWhisperer
SplunkTrust
SplunkTrust

Panel is not a valid tag within html syntax, so no this is not possible as you describe it. What are you trying to do? Perhaps there is another way.

0 Karma
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...