Re: Highlight different values table Column in Spl...

sjkalai · ‎07-07-2022

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.

ITWhisperer · ‎07-07-2022

Can you use colorPalette map?

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

sjkalai · ‎07-07-2022

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

ITWhisperer · ‎07-07-2022

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 · ‎07-07-2022

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.

ITWhisperer · ‎07-07-2022

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

sjkalai · ‎07-07-2022

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

ITWhisperer · ‎07-07-2022

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

sjkalai · ‎07-11-2022

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.

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

dashboard

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor

Introducing the 2024 SplunkTrust!