Inside the Power Platform JavaScript Development Course: Are you hiding the correct field?

Here is an excerpt from the Power Platform JavaScript Development course that I thought I would share as another example of the course content.

This was so incredibly embarrassing: 

So I have worked with Dynamics since 2005, and to be quite honest, I can hide a field with the best of them. I mean, I literally have years of experience. But it did me no good today…

So after spending over an hour of pure mental anguish, I am unable to tell you why perfectly good, logical, well-written, and pretty JavaScript, is not hiding the field I wanted hidden.

I finally called one of my coworkers over and asked him what I had done wrong. He says, “Is this field on the form more than once?”  “I don’t know,” I answered. Turned out, that was exactly what happened.

The field was on the form more than once so when I asked it to be hidden, only the first iteration of that field on the form was hidden – and it was not the one that I wanted to be hidden.

Solving the Problem

What to do, what to do. There are several ways to solve this problem:

1. Hide all iterations of the field. That is what the business rules do. (we’ll cover that later).
2. Hide only a specific field, in a specific, and known location.

That last one is the hardest to deal with, but that is why we are developers and why we are doing this. Let’s jump into it:

Point One: There is only one attribute

The first thing to remember about a model-driven application is that there is only one attribute on the form.

An Attribute is the data element of a field.

Attributes have one or more Controls associated. The combination of an Attribute and a Control make up  a Field.

Option One: Hide/Show Everything

When a hide/show business rule is created, they cannot, and do not, assume anything. You want that field hidden, the they hide it wherever it exists. Using our User Interface (UI) library, we too can replicate the same functionality using this code:

this.setFieldVisibilityForAllControls = function (fieldName, visible) {
     const field = this.formContext.getAttribute(fieldName);
 
     if (field == null) {
         return;
     }
 
     field.controls.forEach(function (c, i) {
         c.setVisible(visible);
     });
 }

All this code does, is to find the attribute of a given name, then loop through all of the associated controls, and either hide or show them, depending on the directive.

Option Two: Get Specific

If you need to set a specific field, in a specific place, then you will need to connect to that specific field.

Remember:

• Tabs contain Sections
• Sections contain Controls
• Controls have an Attribute attached

So to reach a specific control, we must start at the top, and work our way down: Tab, Section, Control.

this.setSpecificFieldVisibility = 
function (tabName, sectionName, fieldName, visible) {
    const tab = this.formContext.ui.tabs.get(tabName);
 
    if (tab == null) {
        return;
    }
 
    const section = tab.sections.get(sectionName);
 
    if (section == null) {
        return;
    }
 
    const control = section.controls.get(fieldName);
 
    if (control == null) {
        return;
    }
 
    control.setVisible(visible);
}

This will set the visibility of a specific field, in a specific section, on a specific tab.

Conclusion

I will admit, this may be overkill, but if it works, it works.