Adding Custom Sidebar to Splunk UI

[davidoff96]

Hello,

My company has a sidebar that is consistent throughout all our other internal applications, and we were trying to get that same sidebar on our Splunk instance as well. We wanted to add a custom sidebar, with links to other pages from there (sort of looks like the bootstrap 5 sidebar https://getbootstrap.com/docs/5.0/examples/sidebars/), within all the apps (home/search/etc).

Is there anyway this can be done? When I looked elsewhere for tips on styling the UI, most of them were for styling the dashboards themselves. Is there also a way to include a custom javascript file within that UI as well? I am new to splunk, so maybe I am not looking in the right areas.

[isoutamo]

Hi

I didn't know if this is possible or not (haven't seen it), but is it option for you to just add those to navigation bar as own submenu? https://dev.splunk.com/enterprise/docs/developapps/createapps/addnavsplunkapp/

r. Ismo

[davidoff96]

Hey Ismo,

Thanks for the reply. I believe my company is actually currently doing that, so the navbar at the top looks correct. Its just that we want a sidebar on the left. Or is there some js file I can edit that will run on page load, where I can modify the html? I could add it through that if needed (though I'd rather not write the html in the javascript)

[jhanvidattani]

Hello @davidoff96 

I have never such a case before, but regarding js you can try the below thing:

• Added HTML code in XML dashboard and provide some id to it.
• Perform changes for this id from js file (which can be included in <dashboard script="file.js">

[davidoff96]

Thats a great idea Jhan. I needed it to be site/application wide though. Is there an xml file I can edit to change the layout on every page? Sort of like a _Layout.cshtml in asp.net?

[jhanvidattani]

@davidoff96 

I have not worked with dot net, but I can provide steps for SPlunk:

Follow the below things to make changes in your Splunk App:

• Navigate to folder $SPLUNK_HOME/etc/apps/<app_name>
  • In default/data/ui/nav/default.xml add <file_name> so it becomes visible in Splunk Navigation Bar
  • In default/data/ui/views add <file_name.xml> wherein we will be adding actual dashboard code (input and panels)
  • Add your <custom_file.js> file in appserver/static folder
  • Restart Splunk
• In <file_name> dashboard (which will now be visible from UI) add your HTML code (refer to link mentioed in previos comment)  and import your js file as: <form script="custom_file.js">

If you find my solution/debugging steps useful, then an upvote would be appreciated.

[isoutamo]

You shouldn’t ever do any changes under default, use always local directory path for your own changes! Only situation to use default is when you have done your own app.