DFFS > Filtering Checkbox based on another field answer

Forums Dynamic Forms for SharePoint DFFS > Filtering Checkbox based on another field answer

Tagged: 

Viewing 7 reply threads
  • Author
    Posts
    • #18742
      Jhap
      Participant

      Hi Sir Alex,

      Is it possible in DFFS to filter checkbox selection based on another field answer?
      ==========================
      Scenario :
      EVENT TYPE field choices (radio type) = Company, Departmental
      REQUIRED field choices (checkbox type) = Catering, Transportation, Other

      So, when I select DEPARTMENTAL the selection in the field REQUIRED should show only CATERING and OTHER. when I select COMPANY it will show all the selection available in REQUIRED field.

      ==========================

      Thank you so much.

    • #18786
      Alexander Bautz
      Keymaster

      You can add this to the custom js:

      function toggleOptionVisibility(){
      	var val = getFieldValue("ChoiceColumn2"), arr = [];
      	switch(val){
      		case "Enter Choice #1":
      			arr = ["Enter Choice #1","Enter Choice #2","Enter Choice #3"];
      		break;
      		case "Enter Choice #2":
      			arr = ["Enter Choice #4","Enter Choice #5","Enter Choice #6"];
      		break;
      		case "Enter Choice #3":
      			arr = ["Enter Choice #7","Enter Choice #8","Enter Choice #9"];
      		break;
      	}
      	jQuery("#dffs_ChoiceColumn3 input").each(function(){
      		if(jQuery.inArray(jQuery(this).next().text(),arr) > -1){
      			jQuery(this).parents("tr:first").show();
      		}else{
      			jQuery(this).parents("tr:first").hide();
      		}
      	});
      }
      
      // On change
      jQuery("#dffs_ChoiceColumn2 input:radio").on("click",function(){
         	toggleOptionVisibility();
      });
      
      
      // On load
      toggleOptionVisibility();

      Change “ChoiceColumn2” with the FIN of your “EVENT TYPE” col, and “ChoiceColumn3” with the FIN of your “REQUIRED” col. Also change the “Enter Choice #X” to match the trigger values in the “EVENT TYPE” in the “switch” statement and the array of choices to show in the “arr” to match your “REQUIRED” options.

      Alexander

    • #18799
      Jhap
      Participant

      Thank you so much sir Alex. It is working. Only it does not work if the
      checkbox is configured in Specify the number of columns to distribute the choices over under the tab Misc of DFFS.

      I configured the REQUIRED checkbox to display 4 selections per row as per my screenshot attached in the first thread.

      1st row : Security, Catering, Transportation, Venue Reservation
      2nd row : Media Capturing, Electronic Media, Print Media, Other

      Now my Event Type field selection are COMPANY and DEPARTMENTAL. If the event type selected is DEPARTMENTAL, then it will show Security, Media Capturing, Electronic Media, Print Media, Other. In this case, when I select DEPARTMENTAL as the event type, the it shows me only the selection which are available in the 2<sup>nd</sup> row.

      It is possible to make it work if the checkbox type field is configured in Specify the number of columns to distribute the choices over under the tab Misc of DFFS?

      Kind regards,

      Attachments:
      • #18804
        Jhap
        Participant

        Hi Sir Alex,

        Please ignore it. I manage to make it work with Specify the number of columns to distribute the choices over under the tab Misc of DFFS?

        I changed the tr to td

        	jQuery("#dffs_ChoiceColumn3 input").each(function(){
        		if(jQuery.inArray(jQuery(this).next().text(),arr) > -1){
        			jQuery(this).parents("tr:first").show();
        		}else{
        			jQuery(this).parents("tr:first").hide();
        		}
        	});
        • This reply was modified 2 years, 6 months ago by Jhap.
    • #18860
      Alexander Bautz
      Keymaster

      I’m glad you figured it out.

      Alexander

    • #19931
      Brett Ross
      Participant

      How would you do this if ChoiceColumn3 is a drop-down rather than a checkbox?

    • #19991
      Alexander Bautz
      Keymaster

      Modified to work with dropdown select. Please note that you cannot use a “default value” in list settings. Also note that if you plan to use it in EditForm you must add an option like “please select an option” to be able to properly filter the options. If you don’t do that, the previously selected option will stick even if you hide it.

      function toggleOptionVisibility(){
      	var val = getFieldValue("ChoiceColumn2"), arr = [];
      	switch(val){
      		case "Enter Choice #1":
      			arr = ["","Enter Choice #1","Enter Choice #2","Enter Choice #3"];
      		break;
      		case "Enter Choice #2":
      			arr = ["","Enter Choice #4","Enter Choice #5","Enter Choice #6"];
      		break;
      		case "Enter Choice #3":
      			arr = ["","Enter Choice #7","Enter Choice #8","Enter Choice #9"];
      		break;
      		default:
      			arr = [""];
      		break;
      	}
      	jQuery("#dffs_ChoiceColumn3 option").each(function(){
      		if(jQuery.inArray(jQuery(this).text(),arr) > -1){
      			jQuery(this).show();
      		}else{
      			jQuery(this).prop("selected",false).hide();
      		}
      	});
      }
      
      // On change
      jQuery("#dffs_ChoiceColumn2 input:radio").on("click",function(){
         	toggleOptionVisibility();
      });
      
      // On load
      toggleOptionVisibility();
    • #21671
      Chris Diltz
      Participant

      This works perfectly in Chrome but the child drop-down (ChoiceColumn3) is not filtering in IE-11. What am I missing?

      • #21674
        Chris Diltz
        Participant

        Also, I’m not getting any JS errors in the Custom JS editor, form, or in the console.

    • #21689
      Alexander Bautz
      Keymaster

      Hi,
      It turns out hiding an option won’t work in IE. Try changing the code like this:

      jQuery("#dffs_ChoiceColumn3 option").each(function(){
          if(jQuery.inArray(jQuery(this).text(),arr) > -1){
              if (jQuery(this).parent().is("span")) {
                  jQuery(this).unwrap().show();
              }
          }else{
              if (!jQuery(this).parent().is("span")) {
                  jQuery(this).prop("selected",false).wrap("<span>").hide();
              }
          }
      });

      It will wrap the <option> tag in a <span> and it should work.

      Alexander

      • #21709
        Chris Diltz
        Participant

        That did the trick. Thanks Alex!

Viewing 7 reply threads
  • You must be logged in to reply to this topic.