Hide Calendar Column By Condition

[IVAN88]

Hi,

I have a Calendar datapage, and want to hide 1 column/field by condition. For example :

if Room = X then hide Field "Notes" else Show field "Notes"

How can I do this ?

Rgds,

[CoopperBackpack]

Hello @IVAN88,

In my opinion, the easiest way is to use Calculated Field instead of the Notes field. 

For example:

CASE WHEN [@field:Room] < 10
THEN [@field:Notes]
ELSE ''
END

So, when the condition to display the field is met the field is displayed, if not - the field is empty.

Then JavaScript can hide the label of the Calculated Field when it is empty.

<script>
document.addEventListener('DataPageReady', hideFieldHandler);
 
function hideFieldHandler() {
    const calcFields = document.querySelectorAll('dl dd:nth-of-type(2)'); //2 is the position of the Calculated field
    const calcLabels = document.querySelectorAll('dl dt:nth-of-type(2)'); //2 is the position of the Calculated field

    calcFields.forEach((field, index) => {
        if(field.innerHTML == "&nbsp;"){
            calcLabels[index].style.display = 'none';
        }
    })
}
</script>

In this example, the Calculated field is the second field on the Calendar page, so I reference it as 'nth-of-type(2)'. The digit should be replaced according to your page layout.

 

Feel free to update the thread if you have further questions. 

[Kurumi]

Hi @IVAN88 - you may also check this forum post 

 

[IVAN88]

Thanks @CoopperBackpack it works as expected