Web Framework customize table cells with Icons not working

[aelliott]

I am getting the following error :

Uncaught TypeError: Object function _(message) {
    if (_i18n_locale.locale_name == 'en_DEBUG') return __debug_trans_str(message);
    var entry = _i18n_catalog['+-'+message];
    return entry == undefined ? message : entry;
} has no method 'template'

when attempting to do the following to my data:
Creating a custom cell renderer
http://dev.splunk.com/view/SP-CAAAEUB

what is this _.template?

[magnew_splunk · Accepted solution]

Yea, require is a bit esoteric. You need to also assign it in the function call. So you should modify that to be:

var deps = [
     "splunkjs/ready!",
     "splunkjs/mvc/searchmanager",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/tableview",
"underscore"
];
require(deps, function (mvc, SearchManager, TableElement, TableView, _) {
.. my code 
});

or you can just assign underscore at the top after mvc:

var deps = [
     "splunkjs/ready!",
     "underscore",
     "splunkjs/mvc/searchmanager",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/tableview",

];
require(deps, function (mvc, _) {
.. my code 
});

See the pattern?

[magnew_splunk]

The part of the sample that registers the renderer will change to look something like this:

mvc.Components.get('myTable').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new CustomIconRenderer());
// Force the table to re-render
tableView.table.render();
});

[magnew_splunk]

The key is that the TableElement is wrapper around a TableView. So you still need to set up the CustomIconCellRenderer on BaseCellRenderer on TableView, then you can register that custom renderer on the TableView instance wrapped by your TableElement. So, setting up the new renderer is the same, but you have to call getVisualization on the element to get the TableView, then register the renderer.

[aelliott]

I would like to do this same thing but with
"splunkjs/mvc/simplexml/element/table" so that I can have the open in search feature and Loading image. I attempted to simply change it to "splunkjs/mvc/simplexml/element/table" and it did not work, said there was no extend method. Do you know how I can achieve this?

[aelliott]

I did mine a little different than the example..
where it says .addClass('icon') i did .addClass('icon').addClass(icon)

Then i wrote the css as follows(example):
td.icon.alert-circle {
color: red;
}
td.icon.check-circle {
color: #006400;
}
etc.
The other method was not working properly as it was inheriting it's color from it's master for some reason and they were staying blue, i find this more clean as well.

[aelliott]

yep, thanks! it worked

[magnew_splunk]

Hi aelliott,

It looks like underscore.js isn't loaded on the page. Are you using require to load underscore as in the sample? _.template is the templating function from in underscore.js (http://underscorejs.org/#template). In the sample underscore.js is being assigned to the variable ' _ ' , but in your context ' _ ' is i18n.

[aelliott]

Underscore does not seem to be loading even though i have it in my deps
var deps = [
"splunkjs/ready!",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/tableview",
"underscore"
];

require(deps, function (mvc) {

.. my code

});

It is possible that i18n is taking over for _. functions. I am not including i18n.. how do i change the order at which they load for my dashboard?

[aelliott]

Yeah I just found something that says I need that.
I do have it in there.
I will verify that it is being loaded.