Custom Icons in Dashboards

The table element provides us with the additional functionality of showing icons on the basis of the range of the values of the fields.

Let’s take an example to understand how to create custom icons in the dashboards table.

Suppose that the user wants to categorize result according to values. If the values are between 0-100 then ✅ good, 100-200, then ⚠️ moderate, above 200 then 🔴 severe. This categorization can be achieved using the rangemap command.

To make the categorization more visual, we can add icons accordingly. For example the good ones are marked with a green tick mark, the moderate ones with an orange triangle, and the severe ones with a red circle.

Let’s take an example to understand this better. Steps:

1. Consider this query:

2. The result of the query we get is as following :

3. Now we will create a css file and js file and place it in respective app’s file location , i.e $SPLUNK_HOMEetcappsappserverstatic, where app_name is the name of the app. The JavaScript file defines what needs to be done on which fields, and the CSS file holds formatting options such as color, font, size, etc.

4. Put the following code in js file:

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

	var CustomIconRenderer = TableView.BaseCellRenderer.extend({
	canRender: function(cell) {
	return cell.field === 'count';
	},
	render: function($td, cell) {
	var count = cell.value;

	// Compute the icon base on the field value
	var icon;
	if(count > 3000) {
	icon = 'alert-circle';
	} else if(count > 1000) {
	icon = 'alert';
	} else {
	icon = 'check';
	}

	// 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, the table will re-render automatically
	tableView.addCellRenderer(new CustomIconRenderer());
	});

	});

view raw table_icons_rangemap.js hosted with ❤ by GitHub

5. Put the following code in css file:

	/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: orangered;
	}

	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-alert-circle {
	color: #ef392c;
	}
	.icon-inline i.icon-alert {
	color: #ff9c1a;
	}
	.icon-inline i.icon-check {
	color: #5fff5e;}

view raw table_decorations.css hosted with ❤ by GitHub

6. Include the name of css and js file in the tag of xml file. The table in which the range values are to be replaced with an icon is set as the same table ID that we have set in the preceding JS file.

	<dashboard script="table_icons_inline.js" stylesheet="table_decorations.css">

	<label>Table Icon Set (Inline)</label>
	<description>Add icons to table cells based on custom conditions.</description>

	<row>
	<table id="table1">

view raw custom_table_icon_set_rangemap.xml hosted with ❤ by GitHub

7. Once all preceding settings are done, click on Save and restart Splunk to make the changes effective.

8. Once Splunk is restarted, the range field will have icons in place of values.

Hence you have successfully Customized and icon in the table.

If you are still facing issue regarding custom icons in dashboards Feel free to Ask Doubts in the Comment Box Below and Don’t Forget to Follow us on 👍 Social Networks, happy Splunking >😉