Solved: How to add icons for the multiple fields in splunk...

Nadhiyaa · ‎06-30-2019

I have multiple columns in my table .Fields having values either "Yes" or "No". Yes will be displayed as check-circle icon and No will be displayed as x-circle icon.Whats the missing thing in the below js.

Eg. Wireless and VSP are the fields .Below is the js .

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {

    No: 'x-circle',
    Yes: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
        // Only use the cell renderer for the range field
        return cell.field === 'Wireless';

    },
    render: function($td, cell) {
        var icon = 'question';
        // Fetch the icon for the value
        if (ICONS.hasOwnProperty(cell.value)) {
            icon = ICONS[cell.value];
        }
        // Create the icon element and add it to the table cell
        $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- Wireless %>" title="<%- Wireless %>"></i>', {
            icon: icon,
            Wireless: cell.value
        }));
    }
});

var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the range field

        return cell.field === 'VSP';
    },
    render: function($td, cell) {
        var icon = 'question';
        // Fetch the icon for the value
        if (ICONS.hasOwnProperty(cell.value)) {
            icon = ICONS[cell.value];
        }
        // Create the icon element and add it to the table cell

$td.addClass('icon').html(_.template('', {
icon: icon,

            VSP: cell.value
        }));
    }
});

mvc.Components.get('table1').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

});

niketn · ‎06-30-2019

@Nadhiyaa while I will be posting a fix with Simple XML JS extension, I would like to point out that there is another option to add icons to table using Unicode characters in Splunk as well. Refer to one of the questions: https://answers.splunk.com/answers/659050/unicode-characters-in-dashboardssearches.html

Following is a run anywhere dashboard example with both options

Option 1) Using unicode characters in Simple XML Dashboard.
Option 2) Using Simple XML JS Extension to add icon to cell on render.

<dashboard script="table_with_icon.js">
  <label>Check Mark and Cross Using Simple XML</label>
  <init>
    <!-- Unicode Characters for Check and Cross -->
    <!-- https://emojipedia.org/heavy-check-mark/ -->
    <!-- https://emojipedia.org/cross-mark/ -->
    <set token="tokCheckGreen">✔️</set>
    <set token="tokCrossRed">❌</set>
  </init>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithUnicodeIcon td{
            text-align: center;
          }
        </style>
      </html>
      <table id="tableWithUnicodeIcon">
        <title>Table with Unicode Icons (Simple XML)</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| foreach LAN Wireless None 
  [| eval "<<FIELD>>"=if('<<FIELD>>'=="Yes","$tokCheckGreen$","$tokCrossRed$")]
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithJSIcon td.icon {
              text-align: center;
          }
          #tableWithJSIcon td.icon i {
              font-size: 25px;
              text-shadow: 1px 1px #aaa;
          }
          #tableWithJSIcon td.icon .No {
              color: red;
          }
          #tableWithJSIcon td.icon .Yes {
              color: #006400;
          }
        </style>
      </html>
      <table id="tableWithJSIcon">
        <title>Table with JS Icon</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the JS required for Option 2 as per your Simple XML JS extension approach table_with_icon.js:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
    console.log("Inside Script");
    // Translations from rangemap results to CSS class
    var ICONS = {
        No: 'x-circle',
        Yes: 'check-circle'
    };
    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Only use the cell renderer for the range field
            return _(["Wireless", "LAN", "None"]).contains(cell.field);
        },
        render: function ($td, cell) {
            var icon = 'question';
            // Fetch the icon for the value
            if (ICONS.hasOwnProperty(cell.value)) {
                icon = ICONS[cell.value];
            }
            // Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %> title="<%- range %>"></i>', {
                icon: icon,
                range: cell.value
            }));
        }
    });
    mvc.Components.get('tableWithJSIcon').getVisualization(function (tableView) {
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new RangeMapIconRenderer());
    });
});

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn · ‎06-30-2019

@Nadhiyaa while I will be posting a fix with Simple XML JS extension, I would like to point out that there is another option to add icons to table using Unicode characters in Splunk as well. Refer to one of the questions: https://answers.splunk.com/answers/659050/unicode-characters-in-dashboardssearches.html

Following is a run anywhere dashboard example with both options

Option 1) Using unicode characters in Simple XML Dashboard.
Option 2) Using Simple XML JS Extension to add icon to cell on render.

<dashboard script="table_with_icon.js">
  <label>Check Mark and Cross Using Simple XML</label>
  <init>
    <!-- Unicode Characters for Check and Cross -->
    <!-- https://emojipedia.org/heavy-check-mark/ -->
    <!-- https://emojipedia.org/cross-mark/ -->
    <set token="tokCheckGreen">✔️</set>
    <set token="tokCrossRed">❌</set>
  </init>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithUnicodeIcon td{
            text-align: center;
          }
        </style>
      </html>
      <table id="tableWithUnicodeIcon">
        <title>Table with Unicode Icons (Simple XML)</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| foreach LAN Wireless None 
  [| eval "<<FIELD>>"=if('<<FIELD>>'=="Yes","$tokCheckGreen$","$tokCrossRed$")]
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableWithJSIcon td.icon {
              text-align: center;
          }
          #tableWithJSIcon td.icon i {
              font-size: 25px;
              text-shadow: 1px 1px #aaa;
          }
          #tableWithJSIcon td.icon .No {
              color: red;
          }
          #tableWithJSIcon td.icon .Yes {
              color: #006400;
          }
        </style>
      </html>
      <table id="tableWithJSIcon">
        <title>Table with JS Icon</title>
        <search>
          <query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
       LAN=substr(LAN,1,1),
       None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
       LAN=if((LAN%2)==0,"Yes","No"),
       None=if((None%2)==0,"Yes","No")
| table sno *</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the JS required for Option 2 as per your Simple XML JS extension approach table_with_icon.js:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
    console.log("Inside Script");
    // Translations from rangemap results to CSS class
    var ICONS = {
        No: 'x-circle',
        Yes: 'check-circle'
    };
    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Only use the cell renderer for the range field
            return _(["Wireless", "LAN", "None"]).contains(cell.field);
        },
        render: function ($td, cell) {
            var icon = 'question';
            // Fetch the icon for the value
            if (ICONS.hasOwnProperty(cell.value)) {
                icon = ICONS[cell.value];
            }
            // Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %> title="<%- range %>"></i>', {
                icon: icon,
                range: cell.value
            }));
        }
    });
    mvc.Components.get('tableWithJSIcon').getVisualization(function (tableView) {
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new RangeMapIconRenderer());
    });
});

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn · ‎04-13-2020

@Nadhiyaa could you please confirm whether one of above options worked for you or not?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

vnravikumar · ‎06-30-2019

Hi

Try this

<dashboard script="table.js">
  <label>Icon</label>
  <row>
    <html>
      <head>
        <style>
          .yes {
              background-image: url('/static/app/search/images/yes.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
          .no {
              background-image: url('/static/app/search/images/no.png') !important;
              background-repeat: no-repeat !important;
              background-size: 20px 20px; !important;
          }
        </style>
      </head>
    </html>
  </row>
  <row>
    <panel>
      <table id="sample">
        <search>
          <query>| makeresults 
| eval Wireless = "Yes,No,Yes,Yes,No" 
| makemv delim="," Wireless 
| mvexpand Wireless 
| appendcols 
    [| makeresults 
    | eval VSP = "No,No,Yes,Yes,Yes" 
    | makemv delim="," VSP 
    | mvexpand VSP ] 
| appendcols 
    [| makeresults 
    | eval Others = "1,2,3,4,5" 
    | makemv delim="," Others 
    | mvexpand Others ] 
| table Wireless,VSP,Others</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

java script:table.js

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Wireless','VSP']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = cell.value;
            if(value=="Yes" )
                {
                    $td.html("<div class='yes'> </div>")
                }
            else
            {
                    $td.html("<div class='no'> </div>")
            }
         }
    });

    var sh = mvc.Components.get("sample");
    if(typeof(sh)!="undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }

  });

In this sample, I had placed two images yes.png and no.png under /opt/splunk/etc/apps/search/appserver/static/images/ modify it accordingly to your need.

How to add icons for the multiple fields in splunk table

CSS

javascript

Index This | I’m short for "configuration file.” What am I?

New Articles from Academic Learning Partners, Help Expand Lantern’s Use Case Library, ...

Your Guide to SPL2 at .conf24!