Splunk Search

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

Communicator

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 ApplicationAvailability column and the ApplicationResponse 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';
0 Karma
1 Solution

SplunkTrust
SplunkTrust

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.

View solution in original post

SplunkTrust
SplunkTrust

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.

View solution in original post

Communicator

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;
}
0 Karma

SplunkTrust
SplunkTrust

You can skip the ternary operator like so:

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

SplunkTrust
SplunkTrust

bah, you are correct sir. changed!

SplunkTrust
SplunkTrust

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

Communicator

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!

0 Karma