Cascading Menus – force one item to bottom of list…

[BenR]

Alexander,

Hello – I hope you are well.

I would like to create a Cascading Menu, where on Tier-1, a specific item is forced to the bottom of the list.

I have about 50 items, for which an Alphabetic list is great, however, I have one item – “Other” – which I would like to force to the bottom of the list… How can I do this? The client does not accept a character in front of the value to force it to do so.

What can I do to sort all items alphabetically and yet force this one item, Other, to the bottom of the list?

As always, we appreciate your support and efforts!

R’grds – Ben.
Reference:
Version information
Custom DFFS-folder: DFFS_v4.4.5.35_2021-10-31
DFFS Loader: v2
DFFS frontend: 4.4.5.35 – October 31, 2021
DFFS frontend CSS: 4.64 /
Autocomplete: 1.6.52 – April 25, 2021
Cascading dropdowns: 3.7.48 – September 22, 2021
jQuery: 1.12.4
Lookup: 1.1.20 – March 10, 2020
Resource management: 2.4.5 – August 29, 2019
SPJS-Utility: 1.354 – October 15, 2021
vLookup: 2.2.162 – October 12, 2021

[Alexander Bautz]

Hi,
You can use custom sorting as shown here: https://spjsblog.com/dffs/dffs-plugins/spjs-cascading-dropdowns/#Sorting_of_the_options

Please note that you must add the function call to built the cascading dropdown in your Custom JS (not in the Cascading dropdown tab) and that you must add the spjs.casc.customSort function above the spjs.casc.init function call.

If your first field in the current list (the first dropdown) has internal name “Level1” and the option you want to put last is “A” you use it like this.

spjs.casc.customSort.Level1 = function(a, b) {
    // Put A last in the dropdown
    if(a.text === "A" || b.text === "A"){
        return -1;
    }
    // Normal alphabetic sorting
    if(a.text < b.text){
        return -1;
    }
    if(a.text > b.text){
        return 1;
    }
    return 0;
};

Alexander

[BenR]

Alexander,

I’m only part way successful. I have removed the this particular Cascade from the Cascading Dropdown tab, and manually invoked from the Custom JS tab. (Should I mention that I have two other Cascades specified in the Cascading Dropdown tab?).

The cascade works, however the sort seems not to have an affect – the list still follows standard alphabetic sort.

This is what I have assembled… The letter I would like to force to the bottom of the list is “O”, and tier-1’s internal name is “Title”

//Manual invocation of Cascade for ProductLineL1
spjs.casc.customSort.Title = function(a, b) {
    // Put O last in the dropdown
    if(a.text === "O" || b.text === "O"){
        return -1;
    }
    // Normal alphabetic sorting
    if(a.text < b.text){
        return -1;
    }
    if(a.text > b.text){
        return 1;
    }
    return 0;
};

spjs.casc.init(
 {
 "manualMode":true,
 "dataSource":"",
 "lookupList":"ProductLines",
 "lookupListBaseUrl":"https://sp.REDACTED.net/sites/spptdgsl/VPP",
 "lookupListFields":["Title","ProductLineL2","ProductLineGrouping"],
 "thisListFields":["ProductLineL1","ProductLineL2","ProductLineGrouping"],
 "setFields":[],
 "dropDownDefaultvalue":"- Select - ",
 "filter":"",
 "hideEmptyDropdowns":false,
 "autoselectSingleOption":true,
 "clearInvalidSelection":false,
 "addOwnValue":false,
 "addOwnValueMouseover":"",
 "cancelOwnValueMouseover":"",
 "sideBySide":true,
 "multichoiceDelimiter": ";" + String.fromCharCode(13, 10), // this represents a semicolon and a linefeed
 "debug":false
 }
);

Does this look right?

As always, your support and efforts are appreciated!

R’grds – Ben.

[Alexander Bautz]

You must use the full text “Other” and not just “O” and the name of the first “thisListFields” and not “lookupListFields” – something like this:

spjs.casc.customSort.ProductLineL1 = function(a, b) {
    // Put Other last in the dropdown
    if(a.text === "Other" || b.text === "Other"){
        return -1;
    }
    // Normal alphabetic sorting
    if(a.text < b.text){
        return -1;
    }
    if(a.text > b.text){
        return 1;
    }
    return 0;
}

Alexander

[BenR]

Alexander,

Very good – now the sort is modified, but “Other” is moved to the top of the list instead of at the bottom.

Is there another tweak you can recommend?

R’grds – Ben.

[Alexander Bautz]

Try changing -1 to 1 here:
if(a.text === “Other” || b.text === “Other”){
return 1;
}
Alexander

[BenR]

Alexander,

YES! Success!

Thank you for your patience – I know you support many users, but you stayed with me and guided me to success.

Stay well, R’grds – Ben.

[Alexander Bautz]

I’m glad it worked!

Alexander

[Author]

Posts