Cascade Lookup in Forms

Forms
1

I've a form, where i want to apply cascade filtering based on lookup fields

image
image.png712×423 12.7 KB

here,
Category<Incident,Request
ServiceCatalog<Hardware,Software,Access
Service<VPN Access(Software),Laptop(Hardware) - does lookup to ServiceCatalog
KBase<kb-VPN(VPN Access), kb-laptop(Laptop) - does lookup to Service

i used this code, but it does not apply the cascade filtering

fd.beforeCreate(function(vueConfig) {
function filterProducts(category) {
var categoryId = category && category.LookupId || category || null;
fd.field('Service').filter = 'ServiceCatalog/Id eq ' + categoryId;
fd.field('Service').widget.dataSource.read();
}

fd.spRendered(function() {

fd.field('Service').ready().then(function() {
  
    fd.field('ServiceCatalog').$on('change', function(value){
        filterProducts(value);
        fd.field('Service').value = null;
    });

 
    fd.field('ServiceCatalog').ready().then(function(field) {
        filterProducts(field.value);
    });
});

}};

2

Hello @Shrenik,

You don't need to use the beforeCreate event. I've updated the code, please try it out.

Also, did you specified the ServiceCatalog filed in the Service field settings, as described in the article?

If the filtering still doesn't work, please share the screenshot of the errors from the browser console(F12).

function filterProducts(category) {
    var categoryId = category && category.LookupId || category || null;
    fd.field('Service').filter = 'ServiceCatalog/Id eq ' + categoryId;
    fd.field('Service').widget.dataSource.read();
}

fd.spRendered(function() {

    fd.field('Service').ready().then(function() {

        fd.field('ServiceCatalog').$on('change', function(value){
            filterProducts(value);
            fd.field('Service').value = null;
        });

        fd.field('ServiceCatalog').ready().then(function(field) {
            filterProducts(field.value);
        });
    });
});
3

Perfect!
this absolutely worked for me. Thanks

1 Like