topic Re: Adding Custom Sidebar to Splunk UI in Dashboards & Visualizations

Adding Custom Sidebar to Splunk UI

davidoff96 — Thu, 09 Sep 2021 19:29:29 GMT

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.

Re: Adding Custom Sidebar to Splunk UI

isoutamo — Fri, 10 Sep 2021 07:00:38 GMT

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

Re: Adding Custom Sidebar to Splunk UI

davidoff96 — Fri, 10 Sep 2021 18:14:00 GMT

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)

Re: Adding Custom Sidebar to Splunk UI

jhanvidattani — Fri, 10 Sep 2021 19:34:25 GMT

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

Re: Adding Custom Sidebar to Splunk UI

davidoff96 — Mon, 13 Sep 2021 14:34:46 GMT

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?

Re: Adding Custom Sidebar to Splunk UI

jhanvidattani — Tue, 14 Sep 2021 05:10:20 GMT

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

Re: Adding Custom Sidebar to Splunk UI

isoutamo — Tue, 14 Sep 2021 06:01:47 GMT

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.