I am trying to create my own custom module to implement a set of customized UI widgets. The issue I am having is any time I try to load one of these in my app I get a JavaScript Popup warning me:
Splunk encountered the following unknown module: "VAppBar" . The view may not load properly.
If I click ok the page loads correctly and my module works as expected.
The Module shows up in the list of registered modules for the app server at http://localhost:9997/en-US/modules#Splunk.Module.VAppBar
Splunk.Module.VAppBar extends Splunk.Module
Voxeo version of the App Bar
Defined in /opt/splunk-410/etc/apps/voxsearch/appserver/modules/VAppBar/VAppBar.js
My module config looks like this:
Zyzzyva:splunk-410 rj$ ls -R etc/apps/voxsearch/appserver
modules
etc/apps/voxsearch/appserver/modules:
VAppBar
etc/apps/voxsearch/appserver/modules/VAppBar:
VAppBar.conf VAppBar.css VAppBar.html VAppBar.js
Zyzzyva:splunk-410 rj$ cat etc/apps/voxsearch/appserver/modules/VAppBar/VAppBar.conf
[module]
# The JavaScript name of the module
className = Splunk.Module.VAppBar
# The module class to subclass from
superClass = Splunk.Module
description = Voxeo version of the App Bar
Zyzzyva:splunk-410 rj$
Is there some other configuration I need to update to allow the loading of custom app modules?
Looking at module_loader.js I see where this is getting thrown but I am not sure sure why:
buildModuleInstanceList: function() {
this._modules = [];
// get the collection of all module container divs.
var moduleContainers = $('.SplunkModule');
for (var i=0, lim=moduleContainers.length; i<lim; i++) {
var container = moduleContainers[i];
var subclass = container.className.replace("SplunkModule ","");
var moduleId = $(container).attr('id');
if (subclass in Splunk.Module) {
// Wish I was here, but I'm not...
} else {
alert(sprintf(_('Splunk encountered the following unknown module: "%s" . The view may not load properly.'), subclass));
this.logger.error("Splunk.ModuleLoader - Assertion failed. View config specifies a Module whose implementation cannot be found. className=",
subclass);
}
}
Ok, I found my own darn problem.
The issue was the JS file for my module was invalid and was not getting executed correctly. The HTML would render leading me to believe the module was loading correctly but in reality it was silently bombing out and leaving the Splunk.Modules object in a state where it was not fully populated.
Lessons learned:
BTW: Loading modules from the app dir works great.
Ok, I found my own darn problem.
The issue was the JS file for my module was invalid and was not getting executed correctly. The HTML would render leading me to believe the module was loading correctly but in reality it was silently bombing out and leaving the Splunk.Modules object in a state where it was not fully populated.
Lessons learned:
BTW: Loading modules from the app dir works great.
That, is awesome news. Yea i should have mentioned make sure to check for syntax errors in the file or runtime errors on initialize
I believe that the ability to package modules in apps/<appname>/appserver/modules
broke a few releases ago. I did not discover the problem myself so im not sure what the status is, but Im pretty sure I did hear that.
Take a look at the page source and I think you can confirm:
a) the JS file didnt get picked up.
b) your VAppBar.html did not run and its output is not included in the page.
Given the error, im pretty sure you'll find that at least the former is the case.
1) If its feasible you can break the app-encapsulation and move your module(s) to a voxeo subfolder in the main modules directory.
2) I've been doing a lot of custom app prototyping lately and if you need only to customize the runtime behaviour of an existing module (without changing its html or giving it its own python endpoint) then you can modify classes easily from application.js. This may or may not be feasible given your specifics. Here's a taste of what im talking about.
switch (Splunk.util.getCurrentView()) {
case "special_view" :
if (Splunk.Module.AppBar) {
Splunk.Module.AppBar = $.klass(Splunk.Module.AppBar, {
someMethod: function($super, someArg) {
var returnValue = $super(someArg);
alert('hello world');
return returnValue;
}
});
}
}
just repeating your own comment down here, that it was just a simple syntax error in the module's JS file. What you're doing is the best way - creating a custom module and shipping it in your app.
I will have to check the js situation. HTML is indeed running ok however. I actually already tried running it in the main modules dir first, sadly I get the same js error there.
Any sugguestions for a work around or patch other then just editing the built-in modules? I need to build a hybrid of app and account bar for our ui embedding.