JavaScript: how to create a class to be used in HTML dashboards?

[arkadyz1]

I'm trying to create a JavaScript class (a simple one - no inheritance or anything) which would populate an HTML document with some UI and would be fed some events from Splunk searches (one by one) for some custom representation.

The body of my JavaScript looks like this:

var MyClass = function(args) {
  ...
  this.container = $(args.element);
  this.container.append(...);
  ...
}

MyClass.prototype.CONSTANT = ...;

MyClass.prototype.function1 = function(...) {
  ...
}

MyClass.prototype.function2 = function(...) {
  ...
}

As you can see, it uses jQuery - something I will have to require. I was somewhat successful wrapping everything in require(["jquery"], function($) { <MyClass body> }, but if I simply include my javascript file in the HTML like this:

<script src="{{SPLUNKWEB_URL_PREFIX}}/static/app/myAppName/myclass_test.js" type="text/javascript"></script>

MyClass is not visible to the inline JavaScript. I guess I'll need to remove that <script> line from my HTML and require the file from within the JavaScript (in this case I won't have to require jquery into my file - it's already there, along with underscore, backbone, mvc etc.). How should I properly wrap my code to be used with require? And how do I specify the file location?

My objective is to achieve something like this:

var MyClass = require("/somepath/myclass_test.js");

var myClassView = new MyClass({ ..., element:"#myDiv", ... });

...
myClassView.addEvent(<event from a Splunk search>);

where myDiv is an id of a div I put inside HTML (similar to the meaning of el argument to various Splunk views, such as TableView). I know how to attach events to the searches (real-time in my case) returning new data, so the only part missing is how to properly include it - to figure out the path in require and the proper wrapping of my class' code.

I wonder if I also have to add anything to require.config call which Splunks puts there inside HTML dashboards.

[alacercogitatus · Accepted solution]

Ok, so this should work well for you. In your myclass_test.js, inside that function, make sure you return the object. So it should look something like this:

   define(function(require, exports, module) {
    var _ = require('underscore'),
        $ = require('jquery');
    var myClass = { object };
    return myClass;
 });

Then, in your HTML dashboard, find the require.config section.

var AppBase = "{{SPLUNKWEB_URL_PREFIX}}/static/app/myAppName";
require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    paths : {
              "myClass":  AppBase + "/myclass_test"
            },
    waitSeconds: 0 
  });

Now, after that section there should be a section of require statements. To the array ( [] ), add, "myClass" at the end of it, and then in the function section, add myClass. Then in side that Javascript block of the function, you can reference myClass.

require( [ 
      ...
      "myClass"
       ], 
      function(
      ...
      myClass) {
             //// Do ALL THE THINGS
 });

Come find me on #splunk on Efnet IRC to discuss more!

[arkadyz1]

OK, after some chat on IRC, I got it working. Thanks!

Just for the future reference: in addition to the constructor defined in myClass (var myClass = function() { ... }), you can have a big myClass.prototype = { var ...; function ...(...) { ... }; or lots of myClass.prototype.member = ...; statements. Just make sure to return the constructor in the end!