Cascade (dynamic list selection)

Forums General discussion Cascade (dynamic list selection)

This topic contains 7 replies, has 2 voices, and was last updated by  Alexander Bautz 2 months ago.

  • Author
    Posts
  • #25439

    MYH
    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

    MYH
    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

    MYH
    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

    MYH
    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

    MYH
    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

You must be logged in to reply to this topic.