UI Hide Form Categories then Show on Field Trigger

This is a small add on I was asked for once to make it so that sections of the form will hide until the user fills in the prior fields. It's quite simple actually.

Add this to the xyzDialog.ts

---

    protected onDialogOpen() {
        super.onDialogOpen();

        if (this.isNew()) { //we only want the fields hidden when the entry is new. 

            this.categoryToggler(this.form.myTriggerField, 'myCategoryTitle');

        }
    }

 protected categoryToggler(triggerField: Serenity.LookupEditor, categoryTitle: string) {
        var myTag = categoryTitle;                
        var ele = this.element.find(".category-title:contains('" + myTag + "')").parent();

        ele.toggle(false); //hidden by default
        
        triggerField.changeSelect2(e => {
            var myTrigger = triggerField.value;               
                                                            
            if (Q.isEmptyOrNull(myTrigger) === true ) {
                ele.toggle(false); //if trigger is empty, keep hidden or make hidden. 
            }

            else {
                ele.toggle(true); // if trigger not empty, show category
            }                
        });           
    };       

---

All you need to do then is replace the myField with the field you wish to use as a trigger. And add the title of the category section for myCategoryTitle.

---

Explanation:

categoryToggler:

myField will be checked whether it's null or empty. If it is null or empty, it will default to hiding the category and anything within it. If it is not null, it'll trigger the selected category to be shown.

myCategoryTitle is checked against all the category-title tags to see which one we want, then it takes the parent so that it can use the full div for the category as the container to hide/show.