- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- How do you add a custom header to Simple XML dashb...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I have requirement that I must have a header on all of my dashboards. Is there any way I can add a header to my Simple XML dashboards without converting them to HTML?
I tried adding it using JS, but it isn't working quite as desired.
My JS (test.js):
//# sourceURL=test.js
var headerHtml =
"<div id=\"siteHeader\">" +
" <div class=\"dynamic\">" +
" Some Text Here" +
" </div>" +
" <div class=\"anotherClass\">" +
" More Text Here" +
" </div>" +
"</div>";
var header = document.getElementByTagName('Header')[0];
header.innerHTML = headerHtml + header.innerHTML;
My Simple XML:
...
This code will add my header, but it breaks the App selector dropdown in the top-left next to the Splunk logo. This App selector is in the black bar. If I comment out header.innterHTML = headerHtml + header.innerHTML; the App selector works fine, but I have no header.
What is the right way to add a custom header to my dashboards?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I came up with a solution using JS.
I replaced my original JS with:
var outerDiv = document.createElement("div");
var innerDiv1 = document.createElement("div");
outerDiv.appendChild(innerDiv1);
var innerDiv1Text = document.createTextNode("Some Text Here");
innerDiv1.appendChild(innerDiv1Text);
var innerDiv2 = document.createElement("div");
outerDiv.appendChild(innerDiv2);
var innerDiv2Text = document.createTextNode("More Text Here");
innerDiv2.appendChild(innerDiv2Text);
var body = document.getElementsByTagName('body')[0];
body.insertBefore(outerDiv, body.firstChild);
The header now shows up in the desired location and all of the dropdowns in the black bar work.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I came up with a solution using JS.
I replaced my original JS with:
var outerDiv = document.createElement("div");
var innerDiv1 = document.createElement("div");
outerDiv.appendChild(innerDiv1);
var innerDiv1Text = document.createTextNode("Some Text Here");
innerDiv1.appendChild(innerDiv1Text);
var innerDiv2 = document.createElement("div");
outerDiv.appendChild(innerDiv2);
var innerDiv2Text = document.createTextNode("More Text Here");
innerDiv2.appendChild(innerDiv2Text);
var body = document.getElementsByTagName('body')[0];
body.insertBefore(outerDiv, body.firstChild);
The header now shows up in the desired location and all of the dropdowns in the black bar work.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@eroffol, seems like you can do this job easily with Prebulit Panel in Splunk where you can have <html> panel with header section as you need.
<dashboard>
<label>Some Dashboard Name</label>
<!-- Prebuilt Panel your_prebuilt_panel_name with HTML Panel and CSS Style to generate Dashboard Header Panel -->
<row>
<panel id="yourPanelIDForCSSIfRequired" ref="your_prebuilt_panel_name"></panel>
</row>
Instead of html panel you can also have an actual HTML file that can be added with src for header in the pre-built panel.
<html src="your_html_page_with_header_details.html">
Refer to Splunk Dashboard Examples app for detailed examples.
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
This isn't quite what I am looking for. For reasons that I can't explain, the requirement is that the header must be the very first thing on the page. It must appear above the black bar with the App dropdown, Administrator dropdown, etc... and above the green bar with Links to other dashboards, Link to the Search view, and the App name.
Unfortunately, using an html panel will not allow me to add my html in the correct location
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
My JS actually breaks all dropdowns in the black bar (app selector, Administrator, Messages, Setting, etc..)
Also, it looks like my formatting got screwed up. Here is what It should look like:
My JS (test.js):
//# sourceURL=test.js
var headerHtml =
"<div id=\"siteHeader\">" +
" <div class=\"dynamic\">" +
" Some Text Here" +
" </div>" +
" <div class=\"anotherClass\">" +
" More Text Here" +
" </div>" +
"</div>";
var header = document.getElementsByTagName('Header')[0];
header.innerHTML = headerHtml + header.innerHTML;
My Simple XML:
<dashboard script="test.js">
</dashboard>
Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!
Transform your security operations with Splunk Enterprise Security
Splunk Admins and App Developers | Earn a $35 gift card!
