Cascade (dynamic list selection)

Forums General discussion Cascade (dynamic list selection)

Viewing 7 reply threads
  • Author
    Posts
    • #25439
      HYM
      Participant

      Hi alex how are you?
      i have a question for you abt the dffs cascading dropdown.
      i have a list “Requests” and i have many document libraries depending on document type. requests list is to retrieve a document from a chosen document library, what i want to do is to add a field with the name of my document libraries and use this value in my cascading dropdown so when i pick 1st document library the values in my cascading fields should be refreshed to see the documents in my library to chose them. can we do that with dffs?
      it’s like i am using 3 stages of cascading (List, document type, document)

    • #25450
      HYM
      Participant

      Alex i found a way to do that thank you.

      but i want to know if we can make the field searchable also i want to add search option to any choice or cascade field

    • #25452
      HYM
      Participant

      check please the screenshot is an example

    • #25464
      Alexander Bautz
      Keymaster

      I’m glad you found a solutions, but unfortunately there is no search / filter option in the cascading dropdown solution.

      Alexander

    • #25479
      HYM
      Participant

      what i am looking for Alex is to use the autocomplete option but i want also the field to contain data like a choice field
      can we do that?

    • #25485
      Alexander Bautz
      Keymaster

      Hi,
      You can use this setting on the autocomplete: https://spjsblog.com/dffs/dffs-plugins/spjs-autocomplete/#listOptionsOnFocus.

      I found out I could write a custom filter function to use with any dropdown-select list. Add this code to your Custom JS:

      function filterDrowdown(elm, fin) {
          var s = jQuery(elm).text().toLowerCase();
          if(s === ""){
              jQuery(elm).addClass("customFilterEmpty");
          }else{
              jQuery(elm).removeClass("customFilterEmpty");
          }
          jQuery("#dffs_" + fin + " option").each(function () {
              if (jQuery(this).text().toLowerCase().match(s) || jQuery(this).val() === "0") {
                  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();
                  }
              }
          });
      }
      
      function addFilterToDropdown(fin) {
          jQuery("#dffs_" + fin).find("td.ms-formbody").prepend("<div placeholder='type to filter the drop-down list' class='customFilter customFilterEmpty' contenteditable='true' onkeydown='if(event.keyCode===13){return false;}' onkeyup='filterDrowdown(this,\"" + fin + "\")'></div>");
      }

      and this to your Custom CSS:

      .customFilter{
          width:100%;
          margin-bottom:2px;
          padding:2px 4px;
          border:1px silver solid;
          cursor:text;
      }
      .customFilterEmpty::before {
          content: attr(placeholder);
          color: #c5c5c5; 
      }

      Then add the filter textarea above the dropdown-select like this:

      addFilterToDropdown("FieldInternalNameOfYourField");

      For anyone wondering why I don’t use a plain input field: Adding another input field in the ms-formbody cell will mess with the cascading dropdown code and with getFieldValue / setFieldValue – this is why I went with a contenteditable div.

      Hope someone can make use of this snippet.

      Alexander

    • #25778
      HYM
      Participant

      Hi Alex, please check the attached png file.
      can we add this search option inside the choice field and not above of it?

    • #25813
      Alexander Bautz
      Keymaster

      This is not possible with a dropdown select – to do this you would have to hide the original dropdown and replace it with a custom made control using HTML, CSS and JavaScript – and ensure a selection in the custom dropdown is written back to the original dropdown to ensure it is saved when the form is saved.

      Alexander

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