Dashboards & Visualizations
Highlighted

How to customize the UI of an app?

New Member

Hi,

I've created a sample application using Splunk Web.

I would like to customize a top level navigation bar (AccountBar) "Admonistrator | Messages | ...".
My investigations led me to the Master.html, but it is in the core of Splunk and I'd link to do this on the App level.

Can you please clarify the proper way to do this? And it would be helpful to have an overall vision of the App architecture:
- How to extend views.
- How to replace modules.
- How to extend a module with a custom logic.

0 Karma
Highlighted

Re: How to customize the UI of an app?

Splunk Employee
Splunk Employee

May I recommend this, an excellent source of information around building apps in Splunk.

Also, you will find a ton of information here

0 Karma
Highlighted

Re: How to customize the UI of an app?

New Member

I got the idea, but it not unclear how to expend Searches page and remove some things in the AccountBar.

The solution I see:
- Copy searches.html into loca/data/ui/views folder and change it.

Am I right?

0 Karma
Highlighted

Re: How to customize the UI of an app?

New Member

I'm able to replace a whole "search" view using "local" folder, but still could not find proper way to customize AccountBar.

0 Karma
Highlighted

Re: How to customize the UI of an app?

New Member

There is a Master.js under exposed/js/views/shared/appbar that seems like a layout for AccountBar.
But changing JS / HTML files does not affect AccountBar. Am I missing anything?

0 Karma
Highlighted

Re: How to customize the UI of an app?

New Member

If I'd like to customize default Search View of a "Search & Reporting" App, adding custom XML view overrides default VIew. But I'd like to keep all the functionality and using default Search view does not load "application.js" and all the stuff as Splunk.util.getCurrentView(), $(document).bind("PageReady", someFunction); is not working.

0 Karma
Highlighted

Re: How to customize the UI of an app?

How to extend view --- :
     If you are using advanced xml to create your views. Then you can customize your views using application.js, application.css
     sample application.js
switch (Splunk.util.getCurrentView()) {
    case "view_name":
        if (Splunk.Module.ModuleName) {
                                Splunk.Module.ModuleName = $.klass(Splunk.Module.ModuleName, {
                                          methodOfThatModule :function(){
                                                       // Your custom implementation
                                            }
}

});

How to replace modules :
1. You can have a customized copy of those modules inside your app and flush and replace the original file inside splunk on deploying your app or restart your app by executing a shell scrip with the help of inputs.conf
2. Create and use custom modules by extending the original one

How to extend a module with a custom logic :
Same available in appliation.js

0 Karma