Jump to content
  • 0

Hide Report Column conditionally


FinTheHuman
 Share

Question

2 answers to this question

Recommended Posts

  • 0

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:
image.png.3789aa82c8dbf27790bb0d9d98f24f86.png

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"
image.png.4a9c86cf6eb5db830c9f34a674caed59.png

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:
image.png.ab577087b1dde3e7b115ee248d510884.png

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

image.png.92b20d61ec5131ff5d3e53fb71467598.png

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

Step 5: Lastly, Add/call the calculated field in the Header:
image.png.0199b0993dd2a89e1279537ed64eda4e.png

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...