Hide custom named column from SimpleResultsTable

[stefano_guidoba]

Hi,

we're trying to use a little piece of JavaScript (put in application.js) to perform column hiding for SimpleResultsTable in a dashboard.
Here's the code:

if(Splunk.Module.GraphicResultsTable) {
var orig = Splunk.Module.GraphicResultsTable.prototype.onResultsRendered;
Splunk.Module.GraphicResultsTable.prototype.onResultsRendered = function() {
    var elements = [];
    orig.call(this);
    $('th', this.container).each(function(i, el) {
        if(/^.*_hide\s*$/.test($(el).text())) {
            elements.push($(el).text());
            $(el).hide();
        }
    });

    for(n = 0; n < elements.length; n++) {
        $("td[field|='" + elements[n] + "']", this.container).hide();
    }

}

}

As you can see, we're trying to tell Splunk, when building HTML table, to hide column headers and cells which are named _hide. With this piece of code everything works fine for a single column. When trying to put 2 columns in our SimpleResultsTable, the thing happening is that all "th" involved are correctly hidden, while only the first "td" is hidden, leaving the second perfectly visible (see the image attached, where we would want the column with "B24A" and "B24H" hidden)

I've checked the HTML/CSS generated, and have seen that for the column not hidden there's not the same CSS class as for the hidden one, but I have no idea how to change my JS to fix this (not a big expert of JS 😞 ).

Any suggestion would be very helpful!

P.S.1: I took JS template code from Ziegfried in this answer Remove _raw field from table view

P.S.2: as one might notice, my JS refers to a GraphicResultsTable, which is a custom module made by a colleague for custom SimpleResultsTable where it's possible to add custom CSS classes via Splunk

[stefano_guidoba · Accepted solution]

Hey,

found the solution, provided below:

if(Splunk.Module.GraphicResultsTable) {
var orig = Splunk.Module.GraphicResultsTable.prototype.onResultsRendered;
Splunk.Module.GraphicResultsTable.prototype.onResultsRendered = function() {
    var elements = [];
    orig.call(this);
    $('th', this.container).each(function(i, el) {
        if(/^.*_hide\s*$/.test($(el).text())) {
            elements.push($(el).text());
            $(el).hide();
        }
    });

    for(n = 0; n < elements.length; n++) {
        $("td[field|=" + elements[n].trim() + "]", this.container).hide();
    }

}

}

It should also work with SimpleResultsTable.
Enjoy!

[stefano_guidoba]

Hi Sideview,

the problem is we developed a custom SimpleResultsTable to be able to add CSS classes to specific columns (as you can see, we have "semaphores" images in the "status" column).
Would your table module also be able to do so?

[sideview]

You should take a look at the Table module in Sideview Utils 2.X. The Table module is very widely used, and it has a "hiddenFields" param. When you specify fields in that param, they will not be visible in the rendered Table, but they will be available for all drilldown searches and drilldown logic. http://sideviewapps.com/apps/sideview-utils

[stefano_guidoba]

But I do want to have it in the results set, because I'm using it for dashboard drilldown 🙂 My only concern is to not show it.

[linu1988]

I am not familiar with java script programming as well. But if you hide the filed doesn't mean the field is not there is the resultset, hence relevant column values shows up!! But I may sound stupid for my analysis.

[stefano_guidoba]

Hi Linu,
as you can see headers are correctly hidden (I put two columns named interface_hide and procedure_hide, and they are not shown). The problem is the cells of procedure_hide column are not hidden (second column).
I'm not using a "for" for headers because it uses a foreach 🙂

[linu1988]

I think the first block missed the for loop, so only one header is getting hidden.