Table: Using custom inline icons for multiple fields in a table (multiple columns)

[zd00191]

I have the follinwg code from my .js file

var CustomIconRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
                return cell.field === 'Application_Availability';

If I want to add inline icons for multiple fields a my table, how do I get the custom icon renderer to read both Application_Availability column and the Application_Response column. Should it look like the code below? Please help. Thanks!

var CustomIconRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
                return cell.field === 'Application_Availability', 'Application_Response';

[alacercogitatus · Accepted solution]

You need to set a proper conditional statement.

var CustomIconRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
               var allowedCells = ["Application_Availability","Application_Response" ];
              return (allowedCells.indexOf(cell.field) > -1 ) ;

It will take the field name cell.field, and see if it is located in the array allowedCells. Update that array to whatever field names apply. If it finds it, it will return true, if not, it will return false.

[zd00191]

I am having issues getting this to work. I have copied my .js and .css files below. I triple checked them but may be I missed something.

 require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function(_, $, mvc, TableView) {

        var CustomIconRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
              var allowedCells = ["Application_Availability","Application_Response"]          return (allowedCells.indexOf(cell.field)) > -1;
            },

             render: function($td, cell) {
                var count = cell.value;

                // Compute the icon base on the field value
                var icon;
                if(count <= 50) {
                    icon = 'severe';
                } else if(count > 50 && count < 100) {
                    icon = 'elevated';
                } else if(count == 100) {
                    icon = 'low';
                } else {
                    icon='none';
                }

                // Create the icon element and add it to the table cell
                $td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                    icon: icon,
                    text: cell.value
                }));
            }
        });

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

.css=====================================================

/* Custom Icons */

td.icon {
    text-align: center;
}

td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
}

td.icon .severe {
    color: red;
}

td.icon .elevated {
    color: yellow;
}

td.icon .low {
    color: #006400;
}

/* Row Coloring */

#highlight tr td {
    background-color: #c1ffc3 !important;
}

#highlight tr.range-elevated td {
    background-color: #ffc57a !important;
}

#highlight tr.range-severe td {
    background-color: #d59392 !important;
}


#highlight .table td {
    border-top: 1px solid #fff;
}

#highlight td.range-severe, td.range-elevated {
    font-weight: bold;
}

.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
}
.icon-inline i.icon-severe {
    color: #ef392c;
}
.icon-inline i.icon-elevated {
    color: #ff9c1a;
}
.icon-inline i.icon-low {
    color: #5fff5e;
}

[martin_mueller]

You can skip the ternary operator like so:

return allowedCells.indexOf(cell.field) > -1;

[alacercogitatus]

bah, you are correct sir. changed!

[martin_mueller]

You've basically implemented if true then true else false endif 😛

[zd00191]

I tried using this but no icons are showing up. I have my .js and .css below. Could you please take a look? Thank you so much!