Solved: Re: Can i add panel inside a html tag?

Jhanzkie · ‎02-13-2022

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 .

kamlesh_vaghela · ‎02-14-2022

@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 · ‎02-14-2022

@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 · ‎02-17-2022

ill try this one, thanks

Jhanzkie · ‎02-17-2022

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

for column 2,
3 panels ..

just asking if its possible though.

kamlesh_vaghela · ‎02-17-2022

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 · ‎02-17-2022

thank you very much for the help 😄

ITWhisperer · ‎02-13-2022

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.

Is it possible to add panel inside a html tag?

CSS

panel

Demo Day: Strengthen Your SOC with Splunk Enterprise Security 8.1

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Are you a member of the Splunk Community?

Is it possible to add panel inside a html tag?

CSS

panel

Demo Day: Strengthen Your SOC with Splunk Enterprise Security 8.1

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...