Dashboards & Visualizations

LayoutPanel name for Help | About menu section

Ant1D
Motivator

Hey,

I want to place a HTML link in the position where the Help | About menu resides in Splunk Web.

Does anyone know the layoutPanel value (e.g. appHeader) that will make this possible?

Also does anyone know where I can get a list of all of the layoutPanel positions that I can use in Advanced XML? This will be useful for positioning modules in a view.

Thanks in advance for your help.

0 Karma
1 Solution

ziegfried
Influencer

That sould be navigationHeader. You can take a look at the (mako-) template that renderes the view at $SPLUNK_HOME/share/splunk/search_mrsparkle/view/dashboard.html and $SPLUNK_HOME/share/splunk/search_mrsparkle/view/search.html (search form).

Available regions for a dashboard (might not be complete):

  • appHeader
  • navigationHeader
  • viewHeader
  • splSearchControls-inline
  • mainSearchControls
  • panel_row{n}_col{n}[_grp{n}]


One option to position the content to the right of the Help | About Links is to add it before the AppBar:

<module name="StaticContentSample" layoutPanel="navigationHeader">
    <param name="text"><![CDATA[ <span>|</span><a href="#"> Test</a> ]]></param>
</module>
<module name="AppBar" layoutPanel="navigationHeader"/>

and set the CSS (application.css) to float right:

.navigationHeader .StaticContentSample { float: right; }

Tweaking the padding/margin in the CSS might help in positioning it.


An easier option as well, is to just use JS to add the link to the menu. In application.js:

$('<a href="#">Test</a> <span>|</span>').prependTo(".AppBar .auxLinks");

or

$('<span>|</span> <a href="#">Test</a>').appendTo(".AppBar .auxLinks");

If you only want to do this in one view, you can do this by surround this statements with something like:

if($('body.splView-flashtimeline').length) { ... }

View solution in original post

ziegfried
Influencer

That sould be navigationHeader. You can take a look at the (mako-) template that renderes the view at $SPLUNK_HOME/share/splunk/search_mrsparkle/view/dashboard.html and $SPLUNK_HOME/share/splunk/search_mrsparkle/view/search.html (search form).

Available regions for a dashboard (might not be complete):

  • appHeader
  • navigationHeader
  • viewHeader
  • splSearchControls-inline
  • mainSearchControls
  • panel_row{n}_col{n}[_grp{n}]


One option to position the content to the right of the Help | About Links is to add it before the AppBar:

<module name="StaticContentSample" layoutPanel="navigationHeader">
    <param name="text"><![CDATA[ <span>|</span><a href="#"> Test</a> ]]></param>
</module>
<module name="AppBar" layoutPanel="navigationHeader"/>

and set the CSS (application.css) to float right:

.navigationHeader .StaticContentSample { float: right; }

Tweaking the padding/margin in the CSS might help in positioning it.


An easier option as well, is to just use JS to add the link to the menu. In application.js:

$('<a href="#">Test</a> <span>|</span>').prependTo(".AppBar .auxLinks");

or

$('<span>|</span> <a href="#">Test</a>').appendTo(".AppBar .auxLinks");

If you only want to do this in one view, you can do this by surround this statements with something like:

if($('body.splView-flashtimeline').length) { ... }

Ant1D
Motivator

Thanks for the JS info. I might give it a try. Thanks for the different options.

0 Karma

Ant1D
Motivator

It works! but I am not surprised. Clever thinking as usual from yourself. Thanks again.

0 Karma

ziegfried
Influencer

Modified answer

Ant1D
Motivator

Hi Ziegfried. Thanks for the info. I tried navigationHeader before but it puts my link just below the menu bar. Is there a (simple) way of positioning the module so that it appears on the right hand side and not the left?

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Network to App: Observability Unlocked [May & June Series]

In today’s digital landscape, your environment is no longer confined to the data center. It spans complex ...

SPL2 Deep Dives, AppDynamics Integrations, SAML Made Simple and Much More on Splunk ...

Splunk Lantern is Splunk’s customer success center that provides practical guidance from Splunk experts on key ...

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

This puzzle (first published here) is based on matching timestamps to cron expressions.All the timestamps ...