Cascade (dynamic list selection)

[HYM]

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)

[HYM]

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

[HYM]

check please the screenshot is an example

Attachments:

1. 

   Searchable-lookup.png
   

[Alexander Bautz]

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

Alexander

[HYM]

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?

[Alexander Bautz]

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

[HYM]

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

Attachments:

1. 

   DFFS_SearchableLookup.png
   

[Alexander Bautz]

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

[Author]

Posts