Update lookup Views/filters dynamically using D365 JS

Requirement:

We had a requirement recently where we need to update the Product field's Lookup View dynamically based on the other fields, lets say Brand and Type. 

If Brand has a value then Product lookup should be set with new custom view and if Brand is cleared then "All products" view should be shown with the added filter condition for Type.

Solution:

Create the following two functions to add in the 'addpresearch' event of Product lookup.

1. If Brand has a value, create a new function named 'filterProductBasedonBrand' and set the custom view  for Product lookup.

Example: 

 function filterProductBasedOnBrand(executionContext) {  
   //Get Form context    
   var formContext = executionContext.getFormContext();  
   //Get Brand.   
   var brand = formContext.getAttribute("brand").getValue();  
   //If Brand has value, set the custom lookup view to product lookup.   
   if (brand !== null) {  
     //Get Brand Id.   
     brand = productBrand[0].id.replace(/[{}]/g, '');  
     //Create Custom View   
     var viewDisplayName = "Product Lookup Custom View";  
     var viewId = "{8BA005B2-6A2A-4735-BAB2-0C74AE8442A4}";  
     var entityName = "product";  
     var fetchxml = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='true'>" +  
       "<entity name='product'>" +  
       "<attribute name='name' />" +  
       "<attribute name='productid' />" +  
       "<attribute name='msdyn_productnumber'/>" +  
       "<order attribute='name' descending='false' />" +  
       "<link-entity name='msdyn_sharedproductdetail' from='msdyn_sharedproductdetailid' to='msdyn_sharedproductdetailid' link-type='inner' alias='ad'>" +  
       "<filter type='and'>" +  
       "<condition attribute='lkp_brandid' operator='eq' value='" + brandId + "' />" +  
       "</filter>" +  
       "</link-entity>" +  
       "</entity>" +  
       "</fetch>";  
     var layoutXml = "<grid name='resultset' " +  
       "object='1' " +  
       "jump='productid' " +  
       "select='1' " +  
       "icon='1' " +  
       "preview='1'>" +  
       "<row name='result' " +  
       "id='productid'>" +  
       "<cell name='name'/>" +  
       "<cell name='msdyn_productnumber'/>" +  
       "</row>" +  
       "</grid>";  
     //Set custom lookup view to Product   
     formContext.getControl("productid").addCustomView(viewId, entityName, viewDisplayName, fetchxml, layoutXml, true);  
   }  
 };  

                          
2. If only type has a value, create a new function named 'filterProductBasedonType' and set the view to "All products" and add custom filter to filter based on Type.

Example:

 function filterProductBasedonType(executionContext)  
 {  
   var formContext = executionContext.getFormContext();  
   
   //Set the default view of the lookup  
   formContext.getControl("productid").setDefaultView("<viewid>");  
   var fetchxml = "<filter type='and'>" +  
     "<condition attribute='ccba_os_equipmenttype' operator='eq' value='" + equipmentType + "' />" +  
     "</filter>";  
   
   //Add custom filter (type)  
   formContext.getControl("productid").addCustomFilter(fetchxml);  
 }  
   

Create a function to add the 'addpresearch' event for Product lookup. Add the above functions to the presearch event based on the conditions and register it on both onload of the form and on change of the Brand.

 function addProductPresearchHandlers(executionContext) {  
   var formContext = executionContext.getFormContext();  
   //Get Type and Brand.    
   var type = formContext.getAttribute("type").getValue();  
   var brand = formContext.getAttribute("brand").getValue();  
   //If Brand has a value, remove the existing event handlers and add the new one to filter based on brand   
   if (brand !== null) {  
     formContext.getControl("productid").removePreSearch(filterProductBasedonType);  
     //remove this handler before adding it again.Otherwise the same function will be called multiple times since this is called on change of Brand and onload event as well.   
     formContext.getControl("productid").removePreSearch(filterProductBasedOnBrand);  
     formContext.getControl("productid").addPreSearch(filterProductBasedOnBrand);  
   }  
   //If Type has value, remove the existing event handlers and add the new one to filter based on Type   
   else if (type !== null) {  
     formContext.getControl("productid").removePreSearch(filterProductBasedOnBrand);  
     //remove this handler before adding it again.Otherwise the same function will be called multiple times since this is called on change of Brand and onload event as well.   
     formContext.getControl("productid").removePreSearch(filterProductBasedonType);  
     formContext.getControl("productid").addPreSearch(filterProductBasedonType);  
   }  
 }