All Apps and Add-ons
Highlighted

Web Framework customize table cells with Icons not working

Motivator

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?

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Splunk Employee
Splunk Employee

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.

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Motivator

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

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Motivator

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?

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Splunk Employee
Splunk Employee

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?

View solution in original post

Highlighted

Re: Web Framework customize table cells with Icons not working

Motivator

yep, thanks! it worked

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Motivator

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.

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Motivator

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?

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Splunk Employee
Splunk Employee

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.

0 Karma
Highlighted

Re: Web Framework customize table cells with Icons not working

Splunk Employee
Splunk Employee

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();
});

0 Karma