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!

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...

Splunkbase | Splunk Dashboard Examples App for SimpleXML End of Life

The Splunk Dashboard Examples App for SimpleXML will reach end of support on Dec 19, 2024, after which no new ...

Understanding Generative AI Techniques and Their Application in Cybersecurity

Watch On-Demand Artificial intelligence is the talk of the town nowadays, with industries of all kinds ...