Filter list library control based on value in lookup control

Hi.
I have a list library control 'SuppliersListTable ' and need to filter this to show just the item the user selects in a lookup control to the same list 'SupplrName'. My java is not working do I need a CAML query?
(For fitler = I've use the internal field name and the display name)

Thanks

//Filter the Suppliers data table
fd.spRendered(function() {

// Get the value of the Supplier lookup control
var supplierValue = fd.control('SupplrName').value.LookupValue;

// Filter the Suppliers List or Library control based on the selected value
fd.control('SuppliersListTable').filter = "Title eq '" + supplierValue + "'";
});

Hello @cknightTSY,

Welcome t Plumsail Community!

You should use this code to filter List or Library control dynamically:

fd.spRendered(function() {
    var dt = fd.control('SuppliersListTable');
    //filetr on form load
    dt.ready(function() {
        filterDT();
    });

    //filter List or Library with new value when  field changes
    fd.field('SupplrName').$on('change', function() {
        filterDT();
    });

});



function filterDT() {
    dt.filter = "<Eq><FieldRef Name='Title'/><Value Type='Text'>" + fd.control('SupplrName').value.LookupValue + "</Value></Eq>;
    dt.refresh();
}

Please see Filter by one field dynamically article for more details.

Thanks but still no luck. The control to filter on is a Lookup control. I changed fd.field to fd.control, but it's still not working.

fd.spRendered(function() {
var dt = fd.control('SuppliersListTable');
//filter on form load
dt.ready(function() {
filterDT();
});

//filter List or Library with new value when field changes
fd.control('SupplrName').$on('change', function() {
    filterDT();
});

});

function filterDT() {
dt.filter = "<Eq><FieldRef Name='Title'/><Value Type='Text'>" + fd.control('SupplrName').value.LookupValue + "</Value></Eq>;
dt.refresh();

}

@cknightTSY,

Please check the browser console for errors when changing the lookup control value and share the screenshot.

hi I get this in console:

@cknightTSY,

There is a syntax error in your code. I've fixed it for you, please test the code:

fd.spRendered(function() {
    var dt = fd.control('SuppliersListTable');
    //filter on form load
    dt.ready(function() {
        filterDT();
    });

    //filter List or Library with new value when field changes
    fd.control('SupplrName').$on('change', function() {
        filterDT();
    });

});

function filterDT() {
    dt.filter = "<Eq><FieldRef Name='Title'/><Value Type='Text'>" + fd.control('SupplrName').value.LookupValue + "</Value></Eq>";
    dt.refresh();
}

Still not working sorry. I think the values are not matching btw these 2 fields. Can we use Text1 field to display what is being returned from both? How do we do this? Thanks

image

@cknightTSY,

What is the source list of the Lookup control? What is the source list of the Lookup control? Is it the same as the List or Library control?

You can try to filter List or Library control by text field instead of the Lookup control and make sure the code works:

fd.spRendered(function() {
    var dt = fd.control('SuppliersListTable');
    //filter on form load
    dt.ready(function() {
        filterDT();
    });

    //filter List or Library with new value when field changes
    fd.field('Text1').$on('change', function() {
        filterDT();
    });

});

function filterDT() {
    dt.filter = "<Eq><FieldRef Name='Title'/><Value Type='Text'>" + fd.field('Text1').value + "</Value></Eq>";
    dt.refresh();
}

Hi.

The list is the same for the lookup and control.

I tried your code but no luck. Can we have a remote session? This was in console:

@cknightTSY,

Looks like your code is missing this line:

var dt = fd.control('SuppliersListTable');

Please export the form and share it with me. I'll check the code.

Item_Edit.xfds (52.8 KB)

Thanks here it is

Dear @cknightTSY,
You're getting this error because the filterDT function is outside the scope where dt is defined, move it inside the fd.spRendered() function, like this:

fd.spRendered(function() {
    var dt = fd.control('SuppliersListTable');
    //filter on form load
    dt.ready(function() {
        filterDT();
    });

    //filter List or Library with new value when field changes
    fd.field('SupplierNameTXT').$on('change', function() {
        filterDT();
    });
    
    function filterDT() {
        dt.filter = "<Eq><FieldRef Name='CompanyName'/><Value Type='Text'>" + fd.field('SupplierNameTXT').value + "</Value></Eq>";
        dt.refresh();
    }

});

Alternatively, you can pass dt as an argument to the function:

fd.spRendered(function() {
    var dt = fd.control('SuppliersListTable');
    //filter on form load
    dt.ready(function() {
        filterDT(dt);
    });

    //filter List or Library with new value when field changes
    fd.field('SupplierNameTXT').$on('change', function() {
        filterDT(dt);
    });

});

function filterDT(dt) {
    dt.filter = "<Eq><FieldRef Name='CompanyName'/><Value Type='Text'>" + fd.field('SupplierNameTXT').value + "</Value></Eq>";
    dt.refresh();
}

Thanks.

The below code worked for just using the text field as the filter.

With the code for the lookup control as filter (below), the table is being filtered (I can see the refresh) but with no result. So the value from the lookup control must not match the text needed in the table column.

fd.spRendered(function() {
var dt = fd.control('SuppliersListTable');
//filter on form load
dt.ready(function() {
filterDT();
});

//filter List or Library with new value when field changes
fd.control('SupplrName').$on('change', function() {
    filterDT();
});

function filterDT() {
    dt.filter = "<Eq><FieldRef Name='Title'/><Value Type='Text'>" + fd.control('SupplrName').value + "</Value></Eq>";
    dt.refresh();
}

});

They are coming from the same list so there should always be a match. The lookup control is probably returning an integer or json and not text?

Dear @cknightTSY,
Here's how to retrieve value or ID from Lookup control - Lookup control — SharePoint forms

Don't forget the ready event, you might need to wrap change inside of it.