Cascade dropdown not working on first selection

Forms SharePoint Online
1

Hello,

We have implemented a cascade dropdown and it looks fine except. First time when we select a Entity (which is the parent dropdown), the filter does not work and shows all POAs in the Company. Second time onwards, it shows the POAs as per the previous selection (not for the currently selected entity).

Please see the code below.

fd.field('POAName').ready().then(function() {
        function filterLookupP(v)
        {
            // getting the selected Division (0 if nothing is selected).
            var categoryId1 = 0;
            if (v) {
            categoryId1 = isNaN(v) ? v.LookupId : v;
            }

            if (categoryId1) {
                // setting filtration
                fd.field('POAName').filter = 'Entity/Id eq ' + categoryId1;
            } else {
                // resetting the filtration
                fd.field('POAName').filter = null;
            }

            fd.field('POAName').widget.dataSource.read();
        }

        //filter Projects when form opens
        fd.field('Entity').ready().then(function(field) {
            filterLookupP(field.value);
        });


        //filter Projects when Division changes
        fd.field('Entity').$on('change', function(value){
            filterLookupP(value);
            fd.field('POAName').value = null;
        });
    });
2

Dear @Rinu,
If you're using SharePoint Online, you don't need to rely on JavaScript filtering anymore, the latest version of Plumsail Forms allows you to configure filtering and cascading lookups without a single line of JavaScript. Find our examples here - Filter Lookup by another field: Lookup, Person, Choice

If you want to do it with JS code, please, try the following:

function filterPOAName(entity) {
    var entityId = entity && entity.LookupId || entity || null;
    fd.field('POAName').filter = 'Entity/Id eq ' + entityId ;
    fd.field('POAName').refresh();
}

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

        //filter POAName when form opens
        fd.field('Entity').ready().then(function(field) {
            filterPOAName(field.value);
        });
    });
});
3

Thanks Nikita Kurguzov

1 Like