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

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

zd00191 — Tue, 29 Sep 2020 06:43:23 GMT

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';

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

alacercogitatus — Thu, 16 Jul 2015 19:02:34 GMT

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.

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

martin_mueller — Thu, 16 Jul 2015 21:03:34 GMT

You can skip the ternary operator like so:

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

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

alacercogitatus — Fri, 17 Jul 2015 11:12:49 GMT

bah, you are correct sir. changed!

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

martin_mueller — Fri, 17 Jul 2015 11:30:46 GMT

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

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

zd00191 — Sat, 18 Jul 2015 17:38:13 GMT

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

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

zd00191 — Tue, 21 Jul 2015 02:03:37 GMT

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!