All Apps and Add-ons

How can I change the text color for specific values in a multivalue field?

Contributor

hi

I am trying to change the text color for a multivalued field.

I'm using cellrender like Splunk 6.x Dashboard Examples

For example:

My objective is to change the color for specific values on one multivalued field.

field1  |   field2
        |   7888
   A    |   1666
        |   3452

   B    |  5667
        |  8565

So to understand my aim, I represent my table like this: field2 is a multivalued field

if (field2.value == 7888), I just want to color only this value and not the cell with ($td).

How can I do this?

0 Karma
1 Solution

Contributor

hi VsplunkV,

for my problem to color a specific value within multivalued field, i overwrite the html content in source code by javascript implement.

require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc, TableView) {
        var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
            canRender: function (cell) {
                // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
                return _(['fieldName1', 'fieldName2']).contains(cell.field);
            },
        render: function ($td, cell) {

            if (cell.field === 'fieldName1') {
                var valueDx = String(cell.value)
                var html_content = "";
                var tokens = [];
                var separators = ['\\,'];

                tokens = valueDx.split(new RegExp(separators.join('|'), 'g'));

                for (var i = 0; i < tokens.length; i++) {

                    var numbers = parseFloat(tokens[i].split(":")[1]);

                    if (numbers == 7888) {

                        html_content = html_content + "<div tabindex=\"0\" class=\"multivalue-subcell\" style=\"color:#E80C0C;\" data-mv-index=\"" + i + "\">" + tokens[i] + "</div>";

                    } else {

                        html_content = html_content + "<div tabindex=\"0\" class=\"multivalue-subcell\" data-mv-index=\"" + i + "\">" + tokens[i] + "</div>";
                    }
                }
                    $td.html(html_content).addClass('string');
            }
        }
    });

    mvc.Components.get("tableName").getVisualization(function (tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

View solution in original post

0 Karma

Contributor

hi VsplunkV,

for my problem to color a specific value within multivalued field, i overwrite the html content in source code by javascript implement.

require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc, TableView) {
        var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
            canRender: function (cell) {
                // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
                return _(['fieldName1', 'fieldName2']).contains(cell.field);
            },
        render: function ($td, cell) {

            if (cell.field === 'fieldName1') {
                var valueDx = String(cell.value)
                var html_content = "";
                var tokens = [];
                var separators = ['\\,'];

                tokens = valueDx.split(new RegExp(separators.join('|'), 'g'));

                for (var i = 0; i < tokens.length; i++) {

                    var numbers = parseFloat(tokens[i].split(":")[1]);

                    if (numbers == 7888) {

                        html_content = html_content + "<div tabindex=\"0\" class=\"multivalue-subcell\" style=\"color:#E80C0C;\" data-mv-index=\"" + i + "\">" + tokens[i] + "</div>";

                    } else {

                        html_content = html_content + "<div tabindex=\"0\" class=\"multivalue-subcell\" data-mv-index=\"" + i + "\">" + tokens[i] + "</div>";
                    }
                }
                    $td.html(html_content).addClass('string');
            }
        }
    });

    mvc.Components.get("tableName").getVisualization(function (tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

View solution in original post

0 Karma

Explorer

Hi, Did you find the answer for this question Yet? I have similar situation.

Based on the Range, I need to set the different color. I am using 6.6.5 Version.

0 Karma

Contributor

hi yes i did it.

i will add the answer tomorow

it's not difficult, i use the same cellrender for highlight and i overwrite the html content to get the good class.

so it's only javascript and css, don't worry about the version of splunk.
my solution work on 6.3.3 to 7

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!