--- source_url: https://itmustbecode.com/related-record-filtering-with-the-lookup-dropdown-pcf/ title: Related Record Filtering with the Lookup Dropdown PCF date: 2022-02-09T02:37:48+00:00 categories: - blog tags: - dataverse - fluentui - pcf - react word_count: 946 reading_time_minutes: 5 type: posts --- In the latest release of the **LookupDropdown PCF** control for Dataverse, I have added a new feature that adds support for **related record filtering**, hence the ability to filter the values of a dropdown in real-time based on the value of another lookup field. When rendered, this can produce nice cascading effect as seen below. {{< figure src="./image-8.png" alt="" caption="" >}} {{< figure src="./image-9.png" alt="" caption="" >}} In this post I will show how to configure the PCF control for this scenario and dissert on what's happening under the hood to make the magic happen. To get more context on the control, have a look at my initial post on the LookupDropdown PCF and be sure to install the latest version ( **v1.0.0.3**) to leverage this new feature. > 🚨 **UPDATE 2022-03-10 : please use v1.0.0.4 or above of the control, a bug 🐛 was found for the filtering in v1.0.03** - [Better UX with a Lookup Dropdown PCF Control](/better-ux-with-a-lookup-dropdown-pcf-control/) - [https://github.com/drivardxrm/LookupDropdown.PCF/releases/latest](https://github.com/drivardxrm/LookupDropdown.PCF/releases/latest) - [Lookup Dropdown PCF \| PCF Gallery](https://pcf.gallery/lookup-dropdown-pcf/) ## **Use case** To illustrate the feature, let's pretend that we run a **SpaceFlight** scheduling service 🚀. As seen below, we have a data model that consists of **Space Agencies** and their corresponding fleet of **Space Ships**. {{< figure src="./image-14.png" alt="" caption="" >}} {{< figure src="./image-13.png" alt="" caption="" >}} Now in our **SpaceFlight** scheduling form, we want to exposes 2 lookups and we want to filter the values exposed in the SpaceShip lookup depending on the selected Agency. {{< figure src="./image-20.png" alt="" caption="" >}} ### **Step \#1 : Configure Record Filtering** At this point, I assume that you have already setup the Lookup Dropdown PCF control on the 2 lookup fields as described in my [initial post](/better-ux-with-a-lookup-dropdown-pcf-control/). The next steps are only required when you want to implement **dependent lookup filtering** on top of that. The platform **natively** exposesmechanism to provide additional filtering options on a lookup field. Therefore, the PCF control will make use this information at run-time to implement proper filtering. You will need to open your form in **classic mode** as the Modern form editor doesn't expose Record filtering yet. Now click on the Lookup field that you want to filter, in our case the SpaceShip field. {{< figure src="./image-11.png" alt="" caption="" >}} In the **Display** tab of the lookup field properties, go to the **Related Records Filtering** section. Enable the ' **Only show records where**' checkbox and select the appropriate filters, Space Agency in our case. {{< figure src="./image-10.png" alt="" caption="" >}} Using the normal lookup ( _without any PCF control_), this would render something like this on the form, showing that the filters are well configured. {{< figure src="./image-21.png" alt="" caption="" >}} ### **Step \#2 : Configure the PCF Control** There's new optional parameter defined in the LookupDropdown PCF manifest called ' **Dependent Lookup Field**' that needs to be configured. The parameter expects a reference to a **Lookup.Simple** field. Just go to the **Controls** tab of the field properties, select the **Dependent Lookup Field** and from the list select the **same** lookup attribute that is part of the Related Records Filtering that was set in step #1. ( _here the space agency field_) {{< figure src="./image-26.png" alt="" caption="" >}} {{< figure src="./image-28.png" alt="" caption="" >}} With a **Dependent Lookup Field** being configured, the control is able to resolve the **Id** (guid) of the dependent attribute at runtime. Most importantly, it also **ensures** that the instance of the PCF control gets **notified** 📣 whenever the dependent value gets **updated**. This makes certain that the filtered list gets updated as well. Thats all there is, the SpaceShip dropdown will now expose the fleet of the selected agency and the values will automatically be updated when needed, as seen below. {{< figure src="./lookupdropdown-dependant.gif" alt="" caption="" >}} ## Under the hood For developers, I think its interesting to show how the different pieces are used inside the code. _Please refer to the [code repo](https://github.com/drivardxrm/LookupDropdown.PCF) to get the latest implementation._ I gave a good explanation in my first post on the way the control generates the query needed to render the control properly. Heres a recap : 1. Get the **default view** id using the **getViewId()** method exposed by the lookupfield parameter 1. Get the default view **fetchxml** by retrieving the record from the **savedquery** table 1. **Modify** the fetch xml by adding the fields needed by the control (ex. entity image) 1. **Execute** the modified fetchxml to retrieve the values needed by the control instance Without dependent lookup filtering, the query the SpaceShip lookup in the example would look something like this ``` ``` Now, when **dependent lookup filtering** is enabled on the control, we need to add a **link-entity** node to the fetchxml and refetch the data everytime the **value**of the dependent changes. In green you see the dynamic values that we can get using info from the configuration steps explained earlier. ``` ``` The values needed to build the **link-entity** node can be obtained by extracting the **dependentAttributeName** and **dependentAttributeType** attributes of the bound lookupfield properties. _These values will be filled accordingly as a result of Step#1._ {{< figure src="./image-23.png" alt="" caption="" >}} > 👉For a deep-dive the properties exposed by a lookup field have a look at this great post by [Diana Birkelbach](https://twitter.com/DianaBirkelbach) > > [Lookup PCF – let’s dive deeper – Dianamics PCF Lady (wordpress.com)](https://dianabirkelbach.wordpress.com/2021/06/19/lookup-pcf-lets-dive-deeper/) As for the **ID** (guid) of the dependent lookup, it can be found by looking at the **dependentlookupfield** properties. _This value is defined as a result of Step#2._ {{< figure src="./image-27.png" alt="" caption="" >}} ### **Takeaway** I think that the Related Record filtering adds nice touch to the LookupDropdown PCF control. It certainly enables more use case to be ported and rendered by the control while providing a great user experience. > If you find any issues or have any comments/ideas for the controls please drop me a line in the [discussion section](https://github.com/drivardxrm/LookupDropdown.PCF/discussions) of the repo. Image by [jimmysobandith](https://pixabay.com/users/jimmysobandith-20477546/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6282698) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6282698)