Filter dropdown by string

shedev · February 13, 2020, 10:22pm

I have tried to modify a script I used to show/hide accordions. When the user selects a value from the "Exam" field, the corresponding field "Team" should only show strings that contain the same value.

When the user selects the "Blue" Exam option, the Team options should only be "Blue1" and "Blue2"

mnikitina · February 14, 2020, 9:42am

Hello @shedev,

You can create cascading dropdowns to achieve this.

Please find step-by-step instructions here.

shedev · February 15, 2020, 3:13pm

Thank you - I was able to achieve desired results. Once I added this JS, another conflict arose when applying show/hide to other fields based on selection. Here is the JS I am using to show/hide four different fields on the same form.

//This shows or hides MSPMClass1

fd.spRendered(function() {
function hideOrShowexam() {
    if (fd.field('exam').value == 'MSPM') {
        // Show the MSPMClass1
$(fd.field('MSPMClass1').$parent.$el).show();
    } else {
        // Hide the MSPMClass1
$(fd.field('MSPMClass1').$parent.$el).hide();
    }
}
      // Calling hideOrShowexam when the user changes exam
fd.field('exam').$on('change',hideOrShowexam);

// Calling hideOrShowexam on form loading
hideOrShowexam();
});

I found that after adding the code and following the "Cascading Lookups" documentation, my other show/hide code no longer worked. I tried various approaches and was able to get them to appear, but now they ALL display.

My sense is that I am missing some way to differentiate between the field filters. I am stuck.

// Cascading Lookups || Trying category=exam_products=team (works)

function filterteam(exam) {
var examId = exam && exam.LookupId || exam || null;
fd.field('team').filter = 'exam/Id eq ' + examId;
fd.field('team').widget.dataSource.read();
}

fd.spRendered(function() {
fd.field('team').ready().then(function() {
//filter team when exam changes
fd.field('exam').$on('change', function(value){
filterteam(value);
fd.field('team').value = null;
});
    //filter team when form opens
    fd.field('exam').ready().then(function(field) {
        filterteam(field.value);
    });
});
});

//This shows or hides CNSRClass1 (shows multiple classes)

fd.spRendered(function() {
function hideOrShowexam() {
var examId = exam && exam.LookupId || exam || null;
    if (fd.field('exam').filter = 'exam/Id eq ' + examId == 'CNSR') {

        // Show the CNSRClass1
$(fd.field('CNSRClass1').$parent.$el).show();
    } else {
        // Hide the CNSRClass1
$(fd.field('CNSRClass1').$parent.$el).hide();
}
}
  // Calling hideOrShowexam when the user changes exam
fd.field('exam').$on('change',hideOrShowexam);

// Calling hideOrShowexams on form loading
hideOrShowexam();
});

//This shows or hides MSPMClass1 (shows multiple classes)

fd.spRendered(function() {
function hideOrShowexam() {
var examId = exam && exam.LookupId || exam || null;
    if (fd.field('exam').filter = 'exam/Id eq ' + examId == 'MSPM') {
        // Show the MSPMClass1
$(fd.field('MSPMClass1').$parent.$el).show();
    } else {
        // Hide the MSPMClass1
$(fd.field('MSPMClass1').$parent.$el).hide();
    }
}
      // Calling hideOrShowexam when the user changes exam
fd.field('exam').$on('change',hideOrShowexam);

// Calling hideOrShowexam on form loading
hideOrShowexam();
});

mnikitina · February 17, 2020, 9:42am

@shedev,

To get the value of the lookup field you need to use this code: fd.field('exam').value.LookupValue

I've updated the conditions in your code, please see below.

// Cascading Lookups || Trying category=exam_products=team (works)


function filterteam(exam) {
    var examId = exam && exam.LookupId || exam || null;
    fd.field('team').filter = 'exam/Id eq ' + examId;
    fd.field('team').widget.dataSource.read();
}

fd.spRendered(function() {
    fd.field('team').ready().then(function() {
        //filter team when exam changes
        fd.field('exam').$on('change', function(value){
            filterteam(value);
            fd.field('team').value = null;
        });

        //filter team when form opens
        fd.field('exam').ready().then(function(field) {
            filterteam(field.value);
        });
    });

//This shows or hides CNSRClass1 (shows multiple classes)


    function hideOrShowexam() {
    
        if (fd.field('exam').value.LookupValue == 'CNSR') {

            // Show the CNSRClass1
	$(fd.field('CNSRClass1').$parent.$el).show();
			
        } else {
            // Hide the CNSRClass1
	$(fd.field('CNSRClass1').$parent.$el).hide();
        }
    }
	
	    // Calling hideOrShowexam when the user changes exam
    fd.field('exam').$on('change',hideOrShowexam);

    // Calling hideOrShowexams on form loading
    hideOrShowexam();

//This shows or hides MSPMClass1 (shows multiple classes)

    function hideOrShowexam() {
        if (fd.field('exam').value.LookupValue == 'MSPM') {
            // Show the MSPMClass1
	$(fd.field('MSPMClass1').$parent.$el).show();
	
        } else {
            // Hide the MSPMClass1
	$(fd.field('MSPMClass1').$parent.$el).hide();

        }
    }
		    // Calling hideOrShowexam when the user changes exam
    fd.field('exam').$on('change',hideOrShowexam);

    // Calling hideOrShowexam on form loading
    hideOrShowexam();

});

shedev · February 17, 2020, 4:21pm

Thank you for that clarification. I think I am still missing how to separate the functions. I have 5 Classes and 5 Exams. If I use the format of the code you provided, all the Classes show up.

If I remove these:

    });    
});

});

from the end of this:

// Cascading Lookups || Trying category=team_products=exam (works!)
function filterteam(exam) {
var examId = exam && exam.LookupId || exam || null;
fd.field('team').filter = 'exam/Id eq ' + examId;
fd.field('team').widget.dataSource.read();
}

fd.spRendered(function() {
fd.field('team').ready().then(function() {
//filter team when exam changes
fd.field('exam').$on('change', function(value){
filterteam(value);
fd.field('team').value = null;
});
    //filter team when form opens
    fd.field('exam').ready().then(function(field) {
        filterteam(field.value);
    });    
});
});

And place them after my 5th block (the very end of the file), that last block hides and the four above it remain: (4 more blocks above this line, plus the "Cascading Lookups code)

     }
}
      // Calling hideOrShowexam when the user changes exam
fd.field('exam').$on('change',hideOrShowexam);

// Calling hideOrShowexam on form loading
hideOrShowexam();

This is how I am separating the blocks (above and below).

//This shows or hides PEDSClass1 (from multiple classes)

function hideOrShowexam() {
    if (fd.field('exam').value.LookupValue == 'PEDS') {
        // Show the PEDSClass1

$(fd.field('PEDSClass1').$parent.$el).show();

    } else {
        // Hide the PEDSClass1

$(fd.field('PEDSClass1').$parent.$el).hide();

    }
}
      // Calling hideOrShowexam when the user changes exam
fd.field('exam').$on('change',hideOrShowexam);

// Calling hideOrShowexam on form loading
hideOrShowexam();

    });    
});

});

Thank you again for your ongoing help.

shedev · February 17, 2020, 4:48pm

UPDATE: I resolved this be declaring unique function names for each of the five show/hide blocks.

Examples:

function hideOrShowexam1

function hideOrShowexam2

function hideOrShowexam3

function hideOrShowexam4

function hideOrShowexam5