Fluent UI Combo Box Control – Better than classic?

Introduction - Fluent UI controls

Fluent UI controls were introduced as part of Dataverse / Power Apps for Teams. There are significant differences between the Fluent UI and what we now call classic controls. Some properties have changed names, some properties have gone missing. I disliked them a lot initially as lesser properties meant fewer customization capabilities. That being said, they have a huge plus as they have the Teams color scheme by default even without setting any property. These controls are also the default controls in custom pages. Custom pages, in simple words, are canvas apps inside a model-driven app. In custom pages, the Fluent UI controls have the model-driven app color scheme by default. This allows for faster creation of apps as makers have to spend less time on setting up color properties for all the controls.

Adding Fluent UI controls

You can add them in both custom pages and Dataverse for Teams apps by clicking on the + icon in the left navigation within the studio.

Adding classic controls

In custom pages and in Dataverse for Teams, you can enable classic controls by going to Settings -> Upcoming features -> Experimental, as shown below:

Once you have enabled classic controls, it gets added as the last option when you click on the + option in the left navigation:

Fluent UI vs classic combo box

Let's get to the one on one comparison between the two combo boxes. cmbClassic_Users is a classic combo box and cmbFluentUI_Users is a Fluent UI one. Both are connected to the Users table. At first, you probably won't notice any difference between the two.

On closer look though, you will notice an arrow to the left of cmbFluentUI_Users. If you click on the arrow, it expands to show what seem like columns/data cards like in a form.

I was curious to see why they were there since picking a record from a combo box gives me the entire record. So I decided to remove all of them except First Name. To add or remove columns, select the combo box control, then on the right side properties pane, click on Edit next to Fields. Then just like a form, you can add or remove fields.

With cmbFluentUI_Users down to just the First Name field, I added four labels with their names and text properties set as shown below:

1. lblFluentUI_UserFirstName:

   "First name using Fluent UI combo box: " & cmbFluentUI_Users.Selected.'First Name'

2. lblFluentUI_UserLastName:

   "Last name using Fluent UI combo box: " & cmbFluentUI_Users.Selected.'Last Name'

3. lblClassic_UserFirstName:

   "First name using classic UI combo box: " & cmbClassic_Users.Selected.'First Name'

4. lblClassic_UserLastName:

   "Last name using classic UI combo box: " & cmbClassic_Users.Selected.'Last Name'

Now if you select a user in the two combo boxes, this is how the results look:

As you can see the Fluent UI combo box did not give any value for Last Name. Why? Because it wasn't added as a field! Now if I add the Last Name field to the Fluent UI combo box, the results look like this:

Voila! So to enable fetching a field/column value from the selected record in a Fluent UI combo box, you need to add that field/column to the control like how you would add it to a form.

Summary

To summarize, Fluent UI combo boxes have the following differences from classic combo boxes:

1. Selecting a record doesn't allow you to fetch values of every column.
2. If a column value is missing, you need to add it as a field to the combo box.
3. You can reorder the fields if needed. The first field is the one that gets displayed when selecting a record from the combo box.

I think this is an awesome feature as it will not bring unnecessary data into the app. I like to think about this feature as the "Explicit column selection for combo boxes"!

To learn more about

1. Fluent UI controls, click here.
2. Their differences compared to classic controls, click here.
3. Custom pages, click here.

Recent articles

1. Create checklists using galleries in Power Apps!
2. How to build Cows & Bulls - the numeric Wordle!
3. Master Dataverse relationships in canvas apps