(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
One of the most common things you need to do as the Power Pages developer is conditionally hiding/showing fields/sections etc. This often includes hiding fields by default. And there is a quite straightforward way to do that - by using javascript (check this article from Oliver Rodrigues to find out how to do that). However, with fields hidden by default, this can lead to a blinking page problem when, for a brief moment, your fields are visible and only then are hidden by the code. Blinking can be especially harsh on slow networks or forms with lots of hidden fields that are scattered across regular ones.
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):
<tr>
<td>
<div class="info">
<label for="crfbd_issuetype" id="crfbd_issuetype_label" class="field-label">Issue Type</label>
</div>
<div class="control">
<input type="text" maxlength="100" id="crfbd_issuetype" class="text form-control " >
</div>
</td>
</tr>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:
tr:has(#crfbd_issuetype) {
display: none;
}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.
Caveat
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.
Conclusion
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.