Dashboards & Visualizations

Hide Dashboard title but not edit and export buttons

nagar57
Communicator

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.

1 Solution

poete
Builder

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">

View solution in original post

jbjerke_splunk
Splunk Employee
Splunk Employee

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_...


0 Karma

vnravikumar
Champion

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>
0 Karma

nagar57
Communicator

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

0 Karma

niketn
Legend

@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!!!"

nagar57
Communicator

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

0 Karma

poete
Builder

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">
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...