How to show certain values based on another field containing 1 or more values

Forms SharePoint Online
1

I have a field called Impacted States. This is a multi select field. It contains FL, LA, SC, and TX.

I have another field called Impacted Manuals. The values would be something like:

  • Impact Manual 1 (LA)
  • Impact Manual 2 (FL)
  • Impact Manual 3 (LA, FL, TX)
  • Impact Manual 4 (FL, LA, SC)

If the impacted states field contains FL then only the impact manual 2, 3 and 4 should be visible. If the field contains TX then only manual 3 should be visible, if its LA and TX then manuals, 1, 3, and 4 should be visible.

I haven't been able to find anything to help explain how I can code this into my form. Both fields would be multi-select fields and the only values that should be shown are based off of the values of the one field.

Any help would be appreciated.

2

Hello @Nazman1126,

You can check if a certain option is selected and show/hide other fields using this code:

fd.spRendered(function(){
  fd.field('ChoiceMultiple').$on('change', function(value){
    if(value.includes('Option 1')){
      $(fd.field('Title').$parent.$el).show();
    }
    if(value.includes('Option 2')){
      $(fd.field('Status').$parent.$el).show();
    }
  });
});
3

@Margo It's not necessarily about showing fields, it's about hiding and/or showing specific values. The impacted manuals field would be visible but would only show certain values based on the impacted states that are multi-selected. If they select FL and LA I only want values that contain FL and/or LA to be visible. Its not a show/hide of a field but a hide/show of the values inside of the field and that code I don't think is going to do that.

4

Hello @Nazman1126,

Thank you for clarification. You can change dropdown field options dynamically based on another field values using this code:

fd.field('DropDown1').$on('change', function(value){
    var options = [];
    if(value.includes('Option 1')){
        options.push('Choice 1', 'Choice 2');
    }
    if(value.includes('Option 2')){
        options.push('Choice 3', 'Choice 4');
    }

    fd.field('DropDown2').widget.setDataSource({
            data: options
    });

})
5

@Margo Thank you for this. Could you help explain this code to me? This is different than code I have used in the past with the forms and I am not sure how to insert this into my current code. Usually my code is just:

function checkClient() {
if statement goes here.

The code you are showing me I am not sure how to work it into my current code.

6

@Nazman1126,

In the code I've shared, the function is called when the value of the field changes. Please see the comments.

fd.spRendered(function(){

    function changeOptions(){
        //replace DropDown1 with the internal name of the Impacted States field
        var selctedOptions = fd.field('DropDown1').value;

        //create blank array
        var options = [];

        //check selected options. 
        //Replace Option 1 and Option 2 with the option within Impacted States field
        if(value.includes('Option 1')){
            //add corresponding options to the array.
            options.push('Choice 1', 'Choice 2');
        }
        if(value.includes('Option 2')){
            //add corresponding options to the array.
            options.push('Choice 3', 'Choice 4');
        }
        
        //populate DropDown2 with the new array of otions.
        //Replace DropDown2 with the internal name of Impacted Manuals
        fd.field('DropDown2').widget.setDataSource({
                data: options
        });
    }

    //call function on from load
    changeOptions();

    //cal function on field change
    fd.field('DropDown1').$on('change', changeOptions);
    
});
7

@Margo Below is the code I have. I integrated it with the code you gave me and it is not working. We create the variable selected options but use it no where in the code. Shouldn't that go somewhere?

   function checkImpactStates () {
        var selectedOptions = fd.field('Impacted_x0020_States').value;
        var options = [];
        
        if (value.includes('FL')){
            options.push('Evergreen H03 (LA, FL, TX)', 'Evergreen H06 (FL)', 'Legacy H03 (FL, LA, SC)', 'Legacy H06 (FL)');
        } else if (value.includes('LA')) {
            options.push('Citizens - Dwelling Property (LA)', 'Citizens - Dwelling Wind (LA)', 'Citizens - Homeowners (LA)', 'DP3 (LA)', 'Evergreen H03 (LA, FL, TX)', 'Dwelling Wind Only (LA)', 'Legacy H03 (FL, LA, SC)', 'HO-Standard - (LA)');
        } else if(value.includes('SC')) {
            options.push('Legacy H03 (FL, LA, SC)');
        } else {
            options.push('Evergreen H03 (LA, FL, TX)');
        }
        
        fd.field('Impacted_x0020_Manuals').widget.setDataSource({
            data: options
        )};
    }
8

@Nazman1126,

There is syntax error in the code. I've corrected it:

   function checkImpactStates () {
        var selectedOptions = fd.field('Impacted_x0020_States').value;
        var options = [];
        
        if (value.includes('FL')){
            options.push('Evergreen H03 (LA, FL, TX)', 'Evergreen H06 (FL)', 'Legacy H03 (FL, LA, SC)', 'Legacy H06 (FL)');
        } else if (value.includes('LA')) {
            options.push('Citizens - Dwelling Property (LA)', 'Citizens - Dwelling Wind (LA)', 'Citizens - Homeowners (LA)', 'DP3 (LA)', 'Evergreen H03 (LA, FL, TX)', 'Dwelling Wind Only (LA)', 'Legacy H03 (FL, LA, SC)', 'HO-Standard - (LA)');
        } else if(value.includes('SC')) {
            options.push('Legacy H03 (FL, LA, SC)');
        } else {
            options.push('Evergreen H03 (LA, FL, TX)');
        }
        
        fd.field('Impacted_x0020_Manuals').widget.setDataSource({
            data: options
        });
    }
9

@Margo It is still not working. It is still showing all of the options. I'm confused why I created the var SelectedOptions but don't use it anywhere in the code.

I tried changing it to If (selectedOptions.value.includes('FL')){

but that does not work either.

10

Hello @Nazman1126,

Thank you for pointing that out! This is my bad, try out this code:

   function checkImpactStates () {
        var selectedOptions = fd.field('Impacted_x0020_States').value;
        var options = [];
        
        if (selectedOptions.includes('FL')){
            options.push('Evergreen H03 (LA, FL, TX)', 'Evergreen H06 (FL)', 'Legacy H03 (FL, LA, SC)', 'Legacy H06 (FL)');
        } else if (selectedOptions.includes('LA')) {
            options.push('Citizens - Dwelling Property (LA)', 'Citizens - Dwelling Wind (LA)', 'Citizens - Homeowners (LA)', 'DP3 (LA)', 'Evergreen H03 (LA, FL, TX)', 'Dwelling Wind Only (LA)', 'Legacy H03 (FL, LA, SC)', 'HO-Standard - (LA)');
        } else if(selectedOptions.includes('SC')) {
            options.push('Legacy H03 (FL, LA, SC)');
        } else {
            options.push('Evergreen H03 (LA, FL, TX)');
        }
        
        fd.field('Impacted_x0020_Manuals').widget.setDataSource({
            data: options
        )};
    }
11

@Margo That works great. Thank you so much for your help. I tried to do the code the way you have it now but I had the syntax wrong.