Cannot set properties of undefined (setting 'hidden')

Forms
1

I am trying to hide/show fields dynamically. Your tutorial looks straight forward however when implementing I continue to get an error “Cannot set properties of undefined (setting 'hidden')”. Found an article on your support site with the same issue but didn’t see a resolution other than to confirm the names of the controls are correct which I have.

My JS is as followed:

window.fd = fd;
window.$ = $;

fd.spRendered(() => {
// This code is executed once the form is rendered

fd.field('Type_x0020_of_x0020_Dispute').$on('change', function (value) {
    showHideFields();
})

});

function showHideFields(){

fd.field('DebitCardDetailsHeading').hidden = true;
fd.field('DebitCardDetails').hidden = true;
fd.field('BillingDetailsHeading').hidden = true;
fd.field('BillingDetails').hidden = true;
fd.field('ATMDetailsHeading').hidden = true;
fd.field('ATMDetails').hidden = true;

if(fd.field('Type_x0020_of_x0020_Dispute').value === 'ATM')
{
    fd.field('ATMDetailsHeading').hidden = false;
    fd.field('ATMDetails').hidden = false;
}
else if(fd.field('Type_x0020_of_x0020_Dispute').value === 'Billing')
{
    fd.field('BillingDetailsHeading').hidden = false;
    fd.field('BillingDetails').hidden = false;
}
else if(fd.field('Type_x0020_of_x0020_Dispute').value === 'Debit Card')
{
    fd.field('DebitCardDetailsHeading').hidden = false;
    fd.field('DebitCardDetails').hidden = false;        
}

}

fd.created(vue => {
showHideFields();
});

2

Hi there, not a Plumsail employee myself, but I’ve been using the SharePoint version of Forms for a bit now and have run into a similar issue. Some components are defined as controls and should be called with fd.control(‘FieldName’) instead of fd.field. This is likely true of at least the headings, and same with Details components if those are data tables.

2 Likes
3

Hi, that fixed it! New to using Plumsail and wasn’t aware of the difference. Appreciate your help!

2 Likes