Hide Column In Tabular Report

[GoodBoy]

Hello guys! Just want to share this other solution on how to hide a column in a tabular report using CSS. Just paste the code below in the Header.

<style>
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(5),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(5) /* replace 5 with the position order of column to be hidden */
{
display:none !important;
}
</style>

 

The form[action*='[@cbAppKey]'] is used here so this CSS will only be applied to this specific DataPage. It is good to use if you will embed it in a webpage with many DataPages. 

[GoodBoy]

Additionally, if your tabular report has an aggregation or grouping, the code will be changed slightly as we will add another 2 lines (For TotalsRow & Group) after the first 2 lines in the code above. The new code will be like this: 

<style>
form[action*='[@cbAppKey]'] tr.cbResultSetDataRow td:nth-child(5),
form[action*='[@cbAppKey]'] tr.cbResultSetTableHeader th:nth-child(5), /* replace 5 with the position order of column to be hidden */
form[action*='[@cbAppKey]'] tr.cbResultSetTotalsRow td:nth-child(2),
form[action*='[@cbAppKey]'] tr.cbResultSetGroup1Row td:nth-child(2) /* replace 2 with the position order of td class of column you want to hide using F12 key*/
{
display:none !important;
}
</style>

 

[Meekeee]

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

 

[DesiLogi]

On 11/4/2021 at 5:32 AM, KlisaN137 said:

Hi @kpcollier

Great spot by you, the proposed solution does not work if we have search form, and we are experiencing some strange behavior - hiding some other fields as you described it during consecutive search.

The reason for this is because it appears that when 'Search' button is clicked, the code from footer is not executed only once, but a couple of times. In order to execute the code only once, when page is first reloaded, we can add an IF statement before the actual code, which will check how many columns are still there:

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

    const check = document.querySelectorAll('table[data-cb-name="cbTable"] th');
    
    /* Just set the number in IF below to the number of columns you have BEFORE hiding anything */
    if(check.length===9){
       // code goes here
    }
});
</script>

 

Additionally, I refactored whole code to be able to hide any number of columns without adding redundant code, just add or edit arguments in function deleting :

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

    const check = document.querySelectorAll('table[data-cb-name="cbTable"] th');
    if(check.length===9){
        const deleting = (...args) =>{
               let label, values
               for(let a of args){
                      label = document.querySelector(`table[data-cb-name="cbTable"] th:nth-of-type(${a})`);
                      values = document.querySelectorAll(`table[data-cb-name="cbTable"] td:nth-of-type(${a})`);
                      label.parentElement.removeChild(label);

                      values.forEach(el => {
                            el.parentElement.removeChild(el);
                      });
               }
        }
        
        /* In below function call, just put any number of column you want to hide, but in reverse order - from highest number to the lowest */
        deleting(8,5);
    }
});
</script>

 

Hi @KlisaN137, 

This is a really great solution. My only question is if you have 2 or more datapages on the same html page, using this code. How do you delineate the datapages in the js so each one runs correct to the page. I imagine it's putting the appkey in (`table[data-cb-name="cbTable"] but I can't figure out the exact syntax for that. Any suggestions? Thanks!

[kpcollier]

@DesiLogi

You might be able to wrap everything in an if statement like seen on this page:

https://howto.caspio.com/datapages/ajax-loading/

document.addEventListener('DataPageReady', function (event) {
       	if (event.detail.appKey == 'MY_DATAPAGE_APPKEY') {
              //do something 
       	}
});

 

[DesiLogi]

Hi @kpcollier,

Thanks for the suggestion--it makes sense to me but I couldn't get it to work. Strangely, adding the appkey worked fine on the second datapage (there are two on the html page) but not on the first--and the first datapage worked (hid the correct columns) in Preview so I know the code was accurate. It's possible some stuff in the datapage (a lot of complex calculated fields and also css in header) is interfering when it's not alone. 

That said, I ended up using the responsive css in the header/footer to accomplish this particular task. I really, really like the javascript approach, though, and will use that where there's only one datapage deployed. Thanks again for posting this info!

[GoodBoy]

Hello~ Just sharing this more efficient way of hiding multiple columns in a report.  Thank you for this, @futurist!

 

[Meekeee]

Hi - Just an update, here are the other ways for you to hide column in the Tabular Report:

Without Download/Sort Options:

table[id*='cbTable'] > tbody > tr[class*='cbResultSetTableHeader'] > th:nth-child(1), td[class*='cbResultSetData']:nth-child(1){

    display:none !important;
  
}

With Download/Sort Options:

table[id*='FreezeTabularHeaderObj'] > tr[data-cb-name="header"] > th:nth-child(1), td[class*='cbResultSetData']:nth-child(1), #target table:nth-of-type(1) th:nth-of-type(1), #target table:nth-of-type(2) th:nth-of-type(1){

    display:none !important;
  
}

Replace 1 with the position order of column to be hidden.

[Javier]

On 10/23/2020 at 12:43 AM, CoopperBackpack said:

Hello @rush360,

Please add this code to the Footer and test. It works on my end.

<script>
document.addEventListener('DataPageReady', changeColSpan);

  function changeColSpan() {
  var elem = document.querySelector('.cbResultSetTotalsLabelCell');
  var currentColSpan = elem.colSpan;
    
  elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed

  document.removeEventListener('DataPageReady', changeColSpan);

}

</script>

Hope this helps!

Hi @CoopperBackpack,

This code works fine until I enable the "bulk edit" option in the "Result page Editing option",  my tabular report create a space before the total result:

 

<td class="cbResultSetTotalsLabel cbResultSetTotalsLabelCell" colspan="1"></td>

<td class="cbResultSetTotalsLabel cbResultSetTotalsLabelCell" colspan="20">Total Invoices</td>

 

Any idea on how to make reference to the 2nd cell area with the spancol=20. your code point to the first cbResultSetTotalsLabelCell

 

Thank you

 

 

 

 

[CoopperBackpack]

Hello @Javier,

I suggested that code for a particular case that was shown on the screenshot.

You are correct, the bulk edit adds one more cell (one more field actually) and we need to reference the second cell with the 'cbResultSetTotalsLabelCell' CSS class.
For example: 

I changed the 'elem' variable in this code to reference the second cell.

<script>
document.addEventListener('DataPageReady', changeColSpan);

  function changeColSpan() {
  const elem = document.getElementsByClassName('cbResultSetTotalsLabelCell')[1];
  const currentColSpan = elem.colSpan;
    
  elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed

  document.removeEventListener('DataPageReady', changeColSpan);
}
</script>

Please test this solution.

Also, please note that when you hide the fields by CSS, for example: 
td:nth-child(4)  {display: none;}
th:nth-child(4)  {display: none;}

and Bulk edit is enabled, it is considered as the first field, so you need to define the order number of the field to hide accordingly.  

[Javier]

14 hours ago, CoopperBackpack said:

Hello @Javier,

I suggested that code for a particular case that was shown on the screenshot.

You are correct, the bulk edit adds one more cell (one more field actually) and we need to reference the second cell with the 'cbResultSetTotalsLabelCell' CSS class.
For example: 

I changed the 'elem' variable in this code to reference the second cell.

<script>
document.addEventListener('DataPageReady', changeColSpan);

  function changeColSpan() {
  const elem = document.getElementsByClassName('cbResultSetTotalsLabelCell')[1];
  const currentColSpan = elem.colSpan;
    
  elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed

  document.removeEventListener('DataPageReady', changeColSpan);
}
</script>

Please test this solution.

Also, please note that when you hide the fields by CSS, for example: 
td:nth-child(4)  {display: none;}
th:nth-child(4)  {display: none;}

and Bulk edit is enabled, it is considered as the first field, so you need to define the order number of the field to hide accordingly.  

Hello @CoopperBackpack

 

Thank you very much for taking the time to review my problem, your solution worked perfectly