Hide Report Column conditionally

[FinTheHuman]

Hello, 

I want to hide my column conditionally.  So I have a virtual field that is a Dropdown where I identify which column(s) I want to hide in my report. Is this possible? 

[Aether]

Hi @FinTheHuman,

You may try checking this article for hiding a column in the tabular DataPage.

As for the hiding it conditionally, it needs use a JavaScript code to accomplish. But let me check if there is a workaround for this  

[Aether]

Hi @FinTheHuman,

I have found a workaround to accomplish this without using JavaScript. But in this process, you need to disable the "AJAX Loading" of the DataPage. On this workaround, we will call the CSS inside the formula in order for us to do the conditioning. You can try the following steps :

Step 1:  Add a Virtual field in the search form that will identify the column(s) to hide. (Recomend: Dropdown) Like this:

Note: (I use (1, 2, 3, etc.) as value to simplify the conditioning in the next steps ) 

Step 2: In the Advance option, pass the parameter of the virtual field "on-exit"

Step 3: Add a calculated field in the Results page and use this formula:

CASE WHEN '[@Hide]' = '1'
THEN 
"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(2)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}
</style>" 

WHEN '[@Hide]' = '2'
THEN 
"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(4)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}
</style>" 

WHEN '[@Hide]' = '3'
THEN 
"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(6)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: none;}
</style>" 

ELSE

"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}
</style>" 

END

Important note in this formula:

- The "nth-of-type(1)" part of the code is the placed number of the column.  You may change it depending where your column is placed. 

-  When using a parameter in the formula, make sure to add a single qoute inbetween the parameter. Like this: ('[@Hide]')

- In the formula, I always use/call the first column for me to hide the calculated field in the report:

Step 4: Add a Header& Footer and put this code :

In Header:
<div id="target">
  
In Footer:
</div>

Step 5: Lastly, Add/call the calculated field in the Header:

 

You can test the functionality here: https://c1abv183.caspio.com/dp/482760005190fa207cb14f088ff5

I also, uploaded the DataPage and Dependencies for you to have a reference. I hope this helps!

CaspioData_2021-Jan-28_1134.zip

[Kurumi]

 

[Kurumi]

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

 

 

[futurist]

On 1/28/2021 at 11:35 AM, WatashiwaJin said:

Hi @FinTheHuman,

I have found a workaround to accomplish this without using JavaScript. But in this process, you need to disable the "AJAX Loading" of the DataPage. On this workaround, we will call the CSS inside the formula in order for us to do the conditioning. You can try the following steps :

Step 1:  Add a Virtual field in the search form that will identify the column(s) to hide. (Recomend: Dropdown) Like this:

Note: (I use (1, 2, 3, etc.) as value to simplify the conditioning in the next steps ) 

Step 2: In the Advance option, pass the parameter of the virtual field "on-exit"

Step 3: Add a calculated field in the Results page and use this formula:

CASE WHEN '[@Hide]' = '1'
THEN 
"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(2)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}
</style>" 

WHEN '[@Hide]' = '2'
THEN 
"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(4)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}
</style>" 

WHEN '[@Hide]' = '3'
THEN 
"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(6)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: none;}

#target table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: none;}
</style>" 

ELSE

"<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}
</style>" 

END

Important note in this formula:

- The "nth-of-type(1)" part of the code is the placed number of the column.  You may change it depending where your column is placed. 

-  When using a parameter in the formula, make sure to add a single qoute inbetween the parameter. Like this: ('[@Hide]')

- In the formula, I always use/call the first column for me to hide the calculated field in the report:

Step 4: Add a Header& Footer and put this code :

In Header:
<div id="target">
  
In Footer:
</div>

Step 5: Lastly, Add/call the calculated field in the Header:

 

You can test the functionality here: https://c1abv183.caspio.com/dp/482760005190fa207cb14f088ff5

I also, uploaded the DataPage and Dependencies for you to have a reference. I hope this helps!

CaspioData_2021-Jan-28_1134.zip 32.48 kB · 4 downloads

 Hi,

Jus to add, you may refer to this link on how to hide multiple sibling elements all at once:

 

[Kurumi]

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.