topic Re: How to customize the UI of an app? in Dashboards & Visualizations

How to customize the UI of an app?

deniswow — Thu, 13 Aug 2015 17:29:38 GMT

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.

Re: How to customize the UI of an app?

s2_splunk — Thu, 13 Aug 2015 20:01:53 GMT

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

Also, you will find a ton of information here

Re: How to customize the UI of an app?

deniswow — Fri, 14 Aug 2015 10:38:47 GMT

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?

Re: How to customize the UI of an app?

deniswow — Fri, 14 Aug 2015 16:03:44 GMT

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

Re: How to customize the UI of an app?

paramagurukarth — Tue, 18 Aug 2015 09:14:30 GMT

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

Re: How to customize the UI of an app?

deniswow — Tue, 18 Aug 2015 09:34:21 GMT

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?

Re: How to customize the UI of an app?

deniswow — Wed, 26 Aug 2015 09:05:28 GMT

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.