Hide Columns on Tabular Report When Empty

[bbeshlian]

Hello,

Is there a function available to hide columns on a tabular report of they empty?

Thanks,

Bill

[Alison]

Hi @bbeshlian ,

Here is a snippet of JavaScript code to hide columns if they are empty:

<script>
document.addEventListener('DataPageReady', function(e) {

    let table = document.querySelectorAll('.cbResultSetTable')[0];
    let tbody = table.querySelector('tbody');
    let thead = table.querySelector('thead');

    let colsLen = tbody.rows[0].cells.length,
        rowsLen = tbody.rows.length;

    let hideNode = function(node) {
        if (node) {
            node.style.display = "none";
        }
    };

    for (var j = 0; j < colsLen; ++j) {
        let counter = 0;
        for (var i = 0; i < rowsLen; ++i) {
            if (tbody.rows[i].cells[j].textContent.trim() == '') {
                counter++;
            }
        }
        if (counter == (rowsLen)) {
            for (var i = 0; i < rowsLen; ++i) {
                hideNode(tbody.rows[i].cells[j]);
            }

            hideNode(thead.rows[0].cells[j]);
        }
    }
});
</script>

You should put the code above into the Footer element on the Search and Report Wizard - Configure Results Page Fields.

[Alison]

The below code hides empty columns on the weekly calendar report datapage:

<script>
document.addEventListener('DataPageReady', function() {
let table = document.querySelectorAll('.cbResultSetCalendar ')[0];
let tbody = table.querySelector('tbody');
let colsLen = tbody.rows[0].cells.length, rowsLen = tbody.rows.length;

let hideNode = function(node) { if (node) node.style.display = "none"; };

for (var j = 0; j < colsLen; ++j) {
    let counter = 0;
    for (var i = 1; i < rowsLen; ++i) {
        if (tbody.rows[i].cells[j].childNodes.length==1) ++counter;
    }
    if (counter == (rowsLen-1)) {
        for (var i = 1; i < rowsLen; ++i) {
            hideNode(tbody.rows[i].cells[j]);
        }
        hideNode(tbody.rows[0].cells[j]);
    }
}
});
</script>

 

[Alison]

If you want to hide empty days on the monthly calendar report datapage, feel free to use the code below:

<script>
document.addEventListener('DataPageReady', function() {
let table = document.querySelectorAll('.cbResultSetCalendar ')[0];
let tbody = table.querySelector('tbody');
    let colsLen = tbody.rows[0].cells.length,
        rowsLen = tbody.rows.length;

    let hideNode = function(node) {
        if (node) node.style.display = "none";
    };

    let hideNode2 = function(node) {
        if (node) node.style.display = "none";
    };

    for (var i = 1; i < rowsLen; ++i) {
        let counter = 0;
        for (var j = 0; j < colsLen; ++j) {
            if (tbody.rows[i].cells[j].childNodes.length == 1) {
                ++counter;
            }
        }

        if (counter == colsLen) {
            for (var j = 0; j < colsLen; ++j) {
                hideNode2(tbody.rows[i].cells[j]);
            }
        } else {
            for (var j = 0; j < colsLen; ++j) {
                if (tbody.rows[i].cells[j].childNodes.length == 1) {
                    hideNode(tbody.rows[i].cells[j]);
                }
            }
        }
    }
/*The below code will hide the empty columns as well*/
    for (var j = 0; j < colsLen; ++j) {
        let counter = 0;
        for (var i = 1; i < rowsLen; ++i) {
            if (tbody.rows[i].cells[j].childNodes.length == 1) ++counter;
        }
        if (counter == (rowsLen - 1)) {
            for (var i = 1; i < rowsLen; ++i) {
                hideNode(tbody.rows[i].cells[j]);
            }
            hideNode(tbody.rows[0].cells[j]);
        }
    }
});
</script>

 

[ray]

On 12/11/2018 at 10:16 AM, Alison said:

Hi @bbeshlian ,

Here is a snippet of JavaScript and JQuery code to hide columns if they are empty:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
document.addEventListener('DataPageReady', function(e) {
    let $table = $('.cbResultSetTable:first');
    let tbody = $table[0].tBodies[0];
    let colsLen = tbody.rows[0].cells.length,
        rowsLen = tbody.rows.length;

    let hideNode = function(node) {
        if (node) node.style.display = "none";
    };

    for (var j = 0; j < colsLen; ++j) {
        let counter = 0;
        for (var i = 1; i < rowsLen; ++i) {
            if (tbody.rows[i].cells[j].textContent.trim() == '') ++counter;
        }
        if (counter == (rowsLen - 1)) {
            for (var i = 1; i < rowsLen; ++i) {
                hideNode(tbody.rows[i].cells[j]);
            }
            hideNode(tbody.rows[0].cells[j]);
        }
    }
});
</script>

You should put the code above into the Footer element on the Search and Report Wizard - Configure Results Page Fields.

Hello Alison,

This is not working for me. I have placed this in the footer of Configure Results Page Fields but there are two columns with no values in any of the results and they still display in my tabular report. I tried putting the link to jQuery in my HTML page as well with no luck. The empty fields I am trying to hide are 1) a text field and 2) a foreign key field. Are there any qualifiers to add or other issues that might be affecting my success?

Thank you!

[Alison]

Hello @ray,

Could you share a link to the datapage with me, please?

[Kurumi]

Hi - Just to add, if you want to hide a column in a Pivot Report - you can use this code: