All Apps and Add-ons

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

sfatnass
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

sfatnass
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

sfatnass
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());
    });

});
0 Karma

VsplunkV
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

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

Set Up More Secure Configurations in Splunk Enterprise With Config Assist

This blog post is part 3 of 4 of a series on Splunk Assist. Click the links below to see the other ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...

Enterprise Security Content Update (ESCU) v3.54.0

The Splunk Threat Research Team (STRT) recently released Enterprise Security Content Update (ESCU) v3.54.0 and ...