Splunk Search

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

zd00191
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 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';
0 Karma
1 Solution

alacercogitatus
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

alacercogitatus
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.

zd00191
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

martin_mueller
SplunkTrust
SplunkTrust

You can skip the ternary operator like so:

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

alacercogitatus
SplunkTrust
SplunkTrust

bah, you are correct sir. changed!

martin_mueller
SplunkTrust
SplunkTrust

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

zd00191
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
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...