Multiple level Filter Lookup PCF

[Dynamics31]

Hello experts,

I am new to PCF and I have one requirement, if you can help me into the right direction.

As per the below video from Andrew, I was able to bind my lookups to show as an option sets.

https://www.youtube.com/watch?v=sF68YEO5ITY

GitHub code of Andrew - https://github.com/AndrewButenko/LookupToOptionset

Actually, we have filters on those lookups, like we have 5 lookups.

Region

Country

Province/State

City

Zip code

These filters are out of the box lookup filters. Like on selection of Region, Country will be populated. 

On selection of Country, Province/State will be populated and so on..

Now, with regards to showing those lookups as an option set based on this solution from Andrew, of course these filters are not working. And all the lookup values are showing in option sets.

I want to achieve these multiple level of filtered lookups functionality within this code of Andrew. 

I am not able to understand that how in single pcf control we can achieve this as every control will be shown as pcf control. 

I understand, if there's first lookup control is standard lookup, let's say Region, then in pcf we can get that control from context and do the filter code in typescript in pcf.

But here we have all controls as lookup.

Can anyone please guide how to do that?

[DianaBirkelbach]

Hi @Dynamics31 , 

I think you would need to change the PCF to work with two lookup properties:

 - lookup proprty (the one is already declared in the manifest in Andrew's example)

 - dependingOnLookup (this one is not required for the first control (Region), but needs to be set for the other controls). For instance when the PCF is bound to Country control, you would bind the dependingOnLookup to the Region column.

Each time the dependingOnLookup will change, the updateView will be triggered, and you can get there the current value. There is the place where you can filter the records. 

Hope this helps!

[Dynamics31]

Thanks Diana.

can you please help with wireline code? From that I can go forward and can try to achieve it.

[DianaBirkelbach]

Hi @Dynamics31 , 

I would suggest to extend the manifest with the second parameter. Something like this:

 <property name="lookup" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="Lookup.Simple" usage="bound" required="true" />

 <property name="dependingOnLookup" display-name-key="DependingOn" description-key="Property_DependingOn" of-type="Lookup.Simple" usage="bound" required="false" />

After you make this change, make a "npm run build", and try to log to the console (inside updateView") the value of the dependingOnLookup. Then register it to a column. I think this will help you understand how it works.

@a33ik Hi Andrew, maybe this could be an idea for your next "You asked, I built" 🙂

Hope this helps!

[a33ik]

I believe there is no need to build PCF control:

https://www.ariclevin.com/development/post/multiselect-lookup-pcf-overview/

https://www.ariclevin.com/development/post/multiselect-lookup-pcf-overview-update-nn/

[Anonymous]

@a33ik we are using the pcf on 1 to N relationship( appointment and contact) and we are told to use the PCF only to achieve this .

I can share the whole requirement but I think if your code can be replaced from option set to Multiple lookup contact( not multiselect contact in text format as done by mark cumming) then it will help us further to write some JS code on it.

Actually, once we achieve this lookup property , we can write javascript on other field 'account' on the same appoinment form to filter or select only that contact( in multi select pcf) which are associated with account.