Hide / Show fields based on dropdown value when the form loads (Edit and Display)

Forms SharePoint Online
1

Hello All,

I have a SharePoint list and within here, a dropdown showing item categories. When this category changes, I hide / show sections in an accordion.

This works perfectly when editing the form and the value changes, hiding / showing the relevant sections.

When the form loads though, i.e. looking at it from an edit or display perspective, the code never calls - probably because the field isn't being changed.

Here's my call in the spRendered function:
fd.field('ItemClassification').$on('change',setAccordionFormatting);

Which then calls this:

function setAccordionFormatting() {
switch(fd.field('ItemClassification').widget.text()) {

        case 'Infrastructure BOS': 
            showInfraAccordionPanel();
        break;
            
        case 'Business Service': 
            showBusinessServiceAccordionPanel();
        break;
        
        case 'Client Device': 
            showClientAccordionPanel();
        break;
        
        case 'Software Application': 
            showSoftwareAccordionPanel();
        break;
        
        case 'Cloud Service': 
            showCloudAccordionPanel();
        break;
        
        case 'Shared Device': 
            showSharedAccordionPanel();
        break;
        
        case 'Entity': 
            hideAllAccordionPanel();
        break;
        
    }  
    
}

I think I need to change it so gets the value from SharePoint on load, rather than the change event / checking for the value which hasn't yet been set.

Can anyone advise?

Many thanks,
Dayna

2

Hello @Dayna,

Since the ItemClassification field is a lookup field, you need to make sure the it is fully loaded and ready before getting its value on form load.
Wrap the setAccordionFormatting() function into the ready event like so:

fd.field('ItemClassification').ready(function(field) {
    setAccordionFormatting()
});

Please learn more in Lookup field - JavaScript framework.