(Quick Tip) Hiding fields by default on Power Pages - CSS way
Help UKRAINE ! Your action matters! Donate to support Ukrainian Army! Donate to charity funds! Organize/join street protests in your city to support Ukraine and condemn Russian aggression! Expose and report Russian disinformation! #StandWithUkraine
CSS to the rescue
So how we can hide fields by default without using JS? Using CSS may sound obvious, until we take a look at how the fields are rendered on Power Pages. Let’s say we have a couple of fields (Issue Type, Issue Severity and Feature Priority) that should be hidden by default and later conditionally shown.
Let’s take a closer look at the Issue Type (crfbd_issuetype). This is a simple text field. Usually, websites render text fields like label/input combo. But in Power Pages it looks a bit different (simplified HTML):
As you can see label and input itself are in different containers. We can hide them by targeting input and label independently, but we would have an empty tr which wouldn’t look nice on the form. So ideally we would need to somehow target their common parent. But there is no parent selector in CSS. Or is it?
Welcome :has. This selector allows you to target the parent or relative sibling of something. This opens the door for a wide variety of interesting styling options, including hiding the parent when some conditions satisfied for the child. Learn more about :has pseudo-class here.
In our case, CSS would look simple - tr as the tag name and id as a selector:
And that’s it - now your fields are hidden by default, no JS necessary. Below you can find a small demo:
Additional bonus - they are also hidden in the Power Page editor.
But this approach has a caveat. And in this case, it is a support across browsers. According to caniuse - Firefox and some mobile browsers (like Opera Mini or Samsung Browser) don’t support this pseudo-class. So to make sure it will work always I would advise using both CSS and JS - if the browser doesn’t support :has JS will do the trick.
Now we have a clear way to hide fields by default using some CSS magic. And we can still use JS to ensure that it will work across the browsers.