All Apps and Add-ons

How to highlight different values table Column in Splunk dashboard table?

sjkalai
Explorer

Hi 
I am referring below table for example,  I want add CSS for both values in Office column in the table. 

 Name Position Office Age
Airi Satou Accountant Tokyo 33
Angelica Ramos Chief Executive Officer London 47
Ashton Cox Junior Technical Author San Francisco 66
Bradley Greer Software Engineer London 41
Brenden Wagner Software Engineer San Francisco 28
Brielle Williamson Integration Specialist New York 61
Bruno Nash Software Engineer London 38
Caesar Vance Pre-Sales Support New York 21
Cara Stevens Sales Assistant New York 46
Cedric Kelly Senior Javascript Developer Edinburgh 22

 

I want highlight both values Tokyo and San Francisco. I have added script it will work but problem is its will work one value only. It will highlight San Francisco only. I have add script as follows 

 

 

require(
    [
        'underscore',
        'jquery',
        'splunkjs/mvc', 
        'splunkjs/mvc/tableview', 
        'splunkjs/mvc/simplexml/ready!'
    ],
    function (_, $, mvc, TableView) {
        function cssLoad(tableName, field_name, field_val) {
            var CustomLinkRender = TableView.BaseCellRenderer.extend({
                canRender: function (cell) {
                    return _([field_name]).contains(cell.field);
                },
                render: function ($td, cell) {
                    var cell_value = cell.value;
                    if (cell.field == field_name) {
                        if (cell_value == field_val.trim()) {
                            $td.css('color', '#1717E6');
                            $td.css('font-weight', 'bold');
                            $td.css('text-decoration', 'underline');
                            $td.css('text-decoration-color', 'blue');
                        }
                    }
                    $td.text(cell_value).addClass('string');
                }
            });

            var selectedTable = mvc.Components.get(tableName);
            if (typeof (selectedTable) != "undefined") {
                selectedTable.getVisualization(function (tableView) {
                    tableView.addCellRenderer(new CustomLinkRender());
                    tableView.render();
                });
            }
        }
        //Single table Hardcode call 
        cssLoad('table1', 'Position', 'Software Engineer');
        cssLoad('table1', 'Age', '66');
        cssLoad('table1', 'Office', 'Tokyo');
        cssLoad('table1', 'Office', 'New York')
    });

 

 

 

 Please Help me!.  For highlight multiple values. 

Labels (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Can you use colorPalette map?

        <format type="color" field="Office">
          <colorPalette type="map">{"Tokyo":#1717E6,"San Francisco":#1717E6}</colorPalette>
        </format>
0 Karma

sjkalai
Explorer

No. I want add underline CSS also. If using color palette we cannot add underline. 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Add a hidden panel with CSS

    <panel depends="$stayhidden$">
      <html>
        <style>
          #table1 table tbody td[data-cell-index="2"] div.multivalue-subcell[data-mv-index="1"]{
            color: #1717E6 !important;
            font-weight: bold !important;
            text-decoration: underline !important;
            text-decoration-color: blue !important;
          }
        </style>
      </html>
    </panel>

Then move the values you want highlighted to a multivalue field

| eval Office=if(Office="Tokyo" OR Office="San Francisco",mvappend("",Office),Office)

sjkalai
Explorer

Thanks for reply @ITWhisperer . Is possible to achieve this via script only. Because it have condition check multiple values and multiple columns. function call back and args are passed by using csv file read and then pass. I have show only hardcode call it have dynamic args passing call.  

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

I have no idea - can you not use the csv lookup to determine which values to move to the multivalue fields?

0 Karma

sjkalai
Explorer

No. I don't want multivalued field. We can show only single value per cell. 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

OK you haven't understood my solution - there is still only one useful value in each cell, it is just that the one to be highlighted has been moved to the second mv and the first is now an empty string - the CSS highlighting only applies to the second mv

0 Karma

sjkalai
Explorer

I understood your solution. But problem is in original table there was a link and table cell has a core relations to other tables. if click any where in table td it will show other table based on the cell click value. If I will go for your solution core relations table are not working. So that what I need solution via script. Any way thanks mate.

0 Karma
Get Updates on the Splunk Community!

Splunk Training for All: Meet Aspiring Cybersecurity Analyst, Marc Alicea

Splunk Education believes in the value of training and certification in today’s rapidly-changing data-driven ...

Investigate Security and Threat Detection with VirusTotal and Splunk Integration

As security threats and their complexities surge, security analysts deal with increased challenges and ...

Observability Highlights | January 2023 Newsletter

 January 2023New Product Releases Splunk Network Explorer for Infrastructure MonitoringSplunk unveils Network ...