How to customize the UI of an app?

[deniswow]

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.

[paramagurukarth]

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

[s2_splunk]

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

Also, you will find a ton of information here

[deniswow]

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.

[deniswow]

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?

[deniswow]

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

[deniswow]

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?