Dashboards & Visualizations

How to add another app-bar, right below App's default navigation menu bar?

jincy_18
Path Finder

I have a requirement where I need to show multiple DB connectivity status icons right below the apps navigation bar.
Also, I need this to be visible throughout the app, irrespective of which dashboard I navigate to.

  1. Is it possible for any app to have multiple app-bars? How to achieve this?
  2. Alternatively how can we add a div tag below existing app-bar, to customize it with different color and add custom icons to it?
  3. Any other way to achieve this?

Thanks in advance !

0 Karma
1 Solution

jincy_18
Path Finder

Got a solution for this.

We used javascript to add our own customized div tags which changes on search result and used css for the appropriate styling. Sample snippet for adding div tags:

  var div = document.createElement('div');
        div.className = 'statusbar';
        div.id = 'statusbar';
        div.innerHTML = '<ul><li id="dbstatus1" >DB1 : <div id="dbstatus1-icon"></div></li><li id="filestatus"  >FILE: <div id="filestatus-icon"></div></li></ul>';
        var p= document.getElementsByClassName('header splunk-header splunk-view')[0]
        p.appendChild(div);

View solution in original post

0 Karma

jincy_18
Path Finder

Got a solution for this.

We used javascript to add our own customized div tags which changes on search result and used css for the appropriate styling. Sample snippet for adding div tags:

  var div = document.createElement('div');
        div.className = 'statusbar';
        div.id = 'statusbar';
        div.innerHTML = '<ul><li id="dbstatus1" >DB1 : <div id="dbstatus1-icon"></div></li><li id="filestatus"  >FILE: <div id="filestatus-icon"></div></li></ul>';
        var p= document.getElementsByClassName('header splunk-header splunk-view')[0]
        p.appendChild(div);
0 Karma

jfraiberg
Communicator

In simplexml you can add an html panel at the top and add what you want there -

<row>
<panel>
<html>
<div>
your stuff goes here
</div>
</html>
</panel>
</row>

Instead of trying to make it persistent across every dashboard, you can just add it to every dashboard 🙂

Nextbeat
Path Finder

Definitely better to define things that can't be controlled directly without accessing the backend.

0 Karma
Get Updates on the Splunk Community!

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...

Updated Data Management and AWS GDI Inventory in Splunk Observability

We’re making some changes to Data Management and Infrastructure Inventory for AWS. The Data Management page, ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...