Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Hide Dashboard title but not edit and export butto...
- 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 want to hide Dashboard title but not edit and export button. I can't leave <label></label> as blank because I am using this name in the navigation tab. If I'll leave the label as blank then in the navigation bar where I am placing this dashboard the name appears as None.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello @nagar57,
just add a few lines of js in order to hide the dashboard title at load time.
Here is the content of the js file.
require(['splunkjs/mvc','jquery', 'splunkjs/mvc/simplexml/ready!'], function (mvc,$) {
var utils = require("splunkjs/mvc/utils");
$(document).ready(function () {
var l = document.getElementsByClassName("dashboard-title dashboard-header-title");
l[0].innerHTML = "";
});
});
The js file shall be set in the appserver/static directory of the app and referenced in the dahboard like this:
<form script="name_of_the__script.js">
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The best option is to use the pre-defined configuration tags for the form or dashboard element.
<form hideTitle="true">
You can read about all options which includes hideExport, hideAppBar here:
https://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#dashboard_or_...
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi
Try this
<dashboard>
<label>dashboard title</label>
<row depends="$hide$">
<html>
<style>
h1[data-view="views/dashboard/header/Title"]{
display:none !important;
}
</style>
</html>
</row>
</dashboard>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sorry but not working. The above accepted answer worked. I don't know whether it's a version problem or not. I am using Splunk 7.2
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@nagar57 please add the following hidden row with CSS Style override to your existing dashboard. If you want to apply this for all dashboards in your Splunk App then move this to dashboard.css in your Splunk App under appserver/static folder (PS: If folder does not exist you will have to create one and this may require you to refresh/restart/bump your Splunk instance and clear out browser history).
<row depends="$alwaysHideCSSSection$">
<panel>
<html>
<style>
h1.dashboard-header-title{
visibility:hidden;
}
</style>
</html>
</panel>
</row>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sorry but not working. The above accepted answer worked. I don't know whether it's a version problem or not. I am using Splunk 7.2
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello @nagar57,
just add a few lines of js in order to hide the dashboard title at load time.
Here is the content of the js file.
require(['splunkjs/mvc','jquery', 'splunkjs/mvc/simplexml/ready!'], function (mvc,$) {
var utils = require("splunkjs/mvc/utils");
$(document).ready(function () {
var l = document.getElementsByClassName("dashboard-title dashboard-header-title");
l[0].innerHTML = "";
});
});
The js file shall be set in the appserver/static directory of the app and referenced in the dahboard like this:
<form script="name_of_the__script.js">
What Is Splunk? Here’s What You Can Do with Splunk
Level Up Your .conf25: Splunk Arcade Comes to Boston
Manual Instrumentation with Splunk Observability Cloud: How to Instrument Frontend ...
