Dynamic Dropdown for Power Platform

Today I release the first version of Dynamic Dropdown component. A field component that can display a dropdown list based on a fetchXML or OData query and the query can use value of multiple fields from your form.

Back story

Once in a while we come across a requirement that values a user can select for a field in a form depends on other fields in the form. One such scenarios is called cascading dropdown lists where each dropdown field limits the values of the next dropdown. Imagine you have a shipping form that users need to select a country from the list of countries. Then they need to select a state from another list and then a city and so on. You want the dropdown list for the state to display only the states of given country, then the cities list should be limited to cities of that state. Another scenario might be that you have a table that acts as the matrix of all the possible values, a bit like the following and you want several dropdown lists in a form to automatically filter their list based on one another.

Range	Bandwidth	Frequency	Level
10km	100Mbps	1Ghz	1
10km	100Mbps	2Ghz	1
30km	50Mbps	1Ghz	2

I am pretty sure you have or will come across many more scenarios. In all these scenarios you will have to write custom code that runs in the browser only to filter the values of dropdown lists and the more dependent fields your have on the list the more complex your logic will become. In addition to that you need to figure out if you will need Choices or Single line of text or Lookups and make sure your code still works when the business logic changes.

The aim of the Dynamic Dropdown component is to bring the amount of code your will write to zero, so you can focus only on the business side of the problem.

How to use

Let’s use our Dynamic Dropdown to solve the issue of the first scenario from above. Imagine we have three simple table: Shelf, Row, and Package that are related to each other with many-to-one relationships.

Let’s change the main form of the Package table to have the following three fields:

1. Shelf – a standard Lookup field that allows us to select a Shelf.
2. Row – we will use Dynamic Dropdown component that changes based on the selected value in Shelf.
3. Name – a standard text field.

When we add these fields to the main form of the Package table, the first two fields, by default will use the standard Lookup component. We are going to change the second one (Row) to use our Dynamic Dropdown component.

1. Download the latest release version of the Dynamic Dropdown from PCF Gallery of the release page in GitHub.
2. Import the solution in your environment.

3. Open the main form of the Package table and switch to Classic editor.
4. Double-click on the Row field to open the properties window.
5. Switch to the Control tab (the last tab) and click on Add Control to add the Dynamic Dropdown, then select it for all form factors, Web, Phone, and Tablet.
6. Provide the equivalent of the properties from the screenshot below.

Property	Value
Value	It will be bound automatically to the Row field.
Entity Type	The logical name of Row table
Query	?$filter=_<shelf>_value eq ‘${1}’&$select=<name>,<rowid>
List’s Text Field	<name>
List’s Value Field	<rowid>
Query Value 1	Bind it to the Shelf field.

You will need to replace:

• <shelf> with the shelf field in Row table
• <name> with the name field in Row table
• <rowid> with the rowid field in Row table

At the end the properties will look like the following screenshot. Look how the name of the fields are prefixed in my case with “cr22a”.

You can now, save and publish the form. The form would look like the following. When you select a Shelf from the list, look how Dynamic Dropdown is displaying a filtered list of rows for the Row field.

You can take this example further. Dynamic Dropdown component can make use of up to five other fields (currently) to filter the list. You can even create custom formatted text based as many fields as you need to be displayed in the list. The component can be used for both Lookup fields and Single line of text. Let me show you a more advanced example. In the following example, only the first field is a standard Lookup. The Rate Card Matrix field is using a custom formatting to display list items and Dynamic fields depend on multiple fields in the form.

The properties of the component are well documented. Make sure you read the properties carefully.