Adapting JavaScript to Hide/Show Fields Based on Multi-Select Choice Column Containing a Value

Forms
1

I am working on a Plumsail form where I have a multi-select choice column (entitytype) in a SharePoint list. Based upon the values contained in the column (e.g., ['Normal', 'ExtendedA', 'ExtendedB']), I wish to hide or show other columns (e.g., if value contains Normal, hide columns; if the value contains ExtendedA or ExtendedB, show columns).

After reviewing the 'Work with SharePoint form fields in JavaScript' post I could do so with a single-select choice column, but not a multi-select choice column. I am certain it is because what I am doing is searching an array to validate if it contains a string, not looking for equivalency.

I found 'Hiding a field based on contents of SP checkboxes' post and tried to adapt that. In addition, I tried working with .includes. Neither of those two options worked Would someone please assist as I am sure it is something in my syntax as I am new to JavaScript?

Code that works for single-select choice column:

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

// Hides excol-fields based on the value of the formtype field (a single-select choice) upon change
function showHideFields(){
fd.field('excoltext').hidden = true;
fd.field('excolchoice').hidden = true;
fd.field('excolnumber').hidden = true;

if(fd.field('formtype').value === 'Normal'){
    fd.field('excoltext').hidden = false;
    fd.field('excolchoice').hidden = false;
}
else if(fd.field('formtype').value === 'Extended'){
    fd.field('excolnumber').hidden = false;
}
else{
    
}

}

fd.spRendered(() => {

// Clears excol-fields based on the value of the formtype field upon change
function clearFields() {
    if (fd.field('formtype').value == 'Normal') {
        // Clear fields of any value
        fd.field('excolnumber').clear();
    }
    else if (fd.field('formtype').value == 'Extended') {
        fd.field('excoltext').clear();
        fd.field('excolchoice').clear();
    }
    else{
        
    }
}

// Calling clearFields when formtype value changes
fd.field('formtype').$on('change', clearFields);

// Calling showHideFields when formtype value changes
fd.field('formtype').$on('change', value => {
    showHideFields();
});

showHideFields();

})

My attempt at adapted code using a multi-select choice column that does not work:

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

fd.spRendered(function() {

function hideOrShowFields() {
    fd.field('excoltext').hidden = true;
    fd.field('excolchoice').hidden = true;
    fd.field('excolnumber').hidden = true;
    
    if (fd.field('entitytype').value.indexOf("Normal") >= 0) {
        // Hide the excolnumber field and show the others
        $(fd.field('excoltext').$parent.$el).show();
        $(fd.field('excolchoice').$parent.$el).show();
        $(fd.field('excolnumber').$parent.$el).hide();
    } else {
        // Show the excolnumber field and hide the others
        $(fd.field('excoltext').$parent.$el).hide();
        $(fd.field('excolchoice').$parent.$el).hide();
        $(fd.field('excolnumber').$parent.$el).show();
    } else if {
        (fd.field('entitytype').value.indexOf("ExtendedA") >= 0) {
            // Show the excolnumber field and hide the others
            $(fd.field('excoltext').$parent.$el).hide();
            $(fd.field('excolchoice').$parent.$el).hide();
            $(fd.field('excolnumber').$parent.$el).show();
        } else {
            // Hide the excolnumber field and show the others
            $(fd.field('excoltext').$parent.$el).show();
            $(fd.field('excolchoice').$parent.$el).show();
            $(fd.field('excolnumber').$parent.$el).hide();
        }
    } else if {
        (fd.field('entitytype').value.indexOf("ExtendedB") >= 0) {
            // Show the excolnumber field and hide the others
            $(fd.field('excoltext').$parent.$el).hide();
            $(fd.field('excolchoice').$parent.$el).hide();
            $(fd.field('excolnumber').$parent.$el).show();
        }
    } else {
        // Hide the excolnumber field and show the others
            $(fd.field('excoltext').$parent.$el).show();
            $(fd.field('excolchoice').$parent.$el).show();
            $(fd.field('excolnumber').$parent.$el).hide();
    }
}

// Calling hideOrShowFields when the user changes the entitytype
fd.field('entitytype').$on('change',hideOrShowFields);

// Calling hideOrShowFields on form loading
hideOrShowFields();

});

Also tried with .includes as a parameter for the multi-select choice column's value but did not work

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

// Hides excol-fields based on the value of the 'entitytype' field upon change
function showHideFields(){
fd.field('excoltext').hidden = true;
fd.field('excolchoice').hidden = true;
fd.field('excolnumber').hidden = true;

// Check for multi-select choice column 'entitytype'
if(fd.field('entitytype').value.includes('Normal')){
    fd.field('excoltext').hidden = false;
    fd.field('excolchoice').hidden = false;
}
if(fd.field('entitytype').value.includes('Extended')){
    fd.field('excolnumber').hidden = false;
}

}

fd.spRendered(() => {

fd.field('entitytype').$on('change', value => {
    showHideFields();
});

showHideFields();

})

2

Hello @hjlUsesPlumsail,

Welcome to the Plumsail Community!

Are you getting any errors in the browser console? Could you please share the export of the form:

image
image617×477 17.8 KB

3

Margo:

I figured out a few issues by looking into the errors in the IDE (I needed else if and ending with else as well as an extra bracket) and resolved the errors in the development environment. However, the edit form's behavior still does not hide or display the dependent columns upon the value change of the entitytype field as expected (when 'Normal' is selected for entitytype, display excoltext and excolchoice and hide excolnumber; when ExtendedA or ExtendedB are selected for entitytype, display excolnumber and hide excoltext and excolchoice. It displays all three columns all the time.

I have uploaded the exported form. Thank you for your assistance.

DyanmicContentWParentChildList_Item (Edit).json (9.3 KB)

4

@hjlUsesPlumsail,

Are there any errors in the browser console when you open the Edit form or changing the entitytype field value?

Why are you using this code:

 $(fd.field('excoltext').$parent.$el).hide();

and not:

//hide
fd.field('excoltext').hidden = true;
//show
fd.field('excoltext').hidden = false;
5

Hi Margo,

The reason I initially tried that code is because I was adapting the code I found on this related post on Plumsail Community. After your question, I did try substituting the other version (fd.field('fieldname').hidden - binaryvalue; however, that behaved the same way (all of the fields displayed all of the time no matter which value(s) were selected in the multi-select choice column 'entitytype').

When I open the console in Edge and test changing the 'entitytype' value on the form, these are the errors that appear related to the Plumsail form:

image
image778×108 6.1 KB

image
image795×769 50.8 KB

Thank you for your assistance.

6

@hjlUsesPlumsail,

The internal name of the field in the code is invalid. It should be: entititytype.

Please update the code and test.

7

Margo:

Thank you so much for that catch. It works nicely now after making that correction. This JavaScript will be so handy for future forms my team creates that use the multi-select choice columns. We really appreciate the help!

1 Like