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!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...