If you were thinking that Power Apps Canvas Apps and Dataverse for Teams Canvas Apps are just the same – but with a different license and container – well whilst it is mostly true, there is a very big difference:
Dataverse for Teams uses a completely different set of Out of the Box controls. They are based on the Fluent UI library.
This post will hopefully save someone the time that I’ve spent investigating why a very common UI design pattern doesn’t work in Dataverse for Teams.

The Toggle Pattern

A common pattern in Canvas Apps is to bind a variable to the Default property of a Toggle Button, and then use the OnChange event to fire some code when it is changed. This is a very common solution to the problem that components cannot raise events at the time of writing.
Imagine a scenario where you have a Component that renders a button, that when selected it should raise an event on the hosting screen.
The common pattern is to toggle an output property from a custom component, and then bind the output to a variable – that is in turn bound to a toggle button. When the variable is toggled, it then raises the OnChecked event on the toggle button so you can perform the logic you need. This does seem like a hack – but it is the only mechanism I know of to respond to events from inside components.

I hope that at some point we will see custom events being able to be defined inside components – but for now, the workaround remains.
So, the app looks something like this:

Fluent UI Controls not only look different – they behave differently!

The problem is that inside Dataverse for Teams, the standard controls have been replaced with the new Fluent UI based controls, and with that, there is a subtle difference.

The default property has been replaced by a new set of properties that are control specific (e.g. Checked, Value, Text, etc). With this change, the change events are only fired with the user initiates the event – and not when the app changes the value.

So in Dataverse for Teams, the App looks very similar, but with the Checked property rather than Default:

This results in the OnChecked event not being fired and as such, the pattern no longer works.

If you look carefully, you’ll see, in Dataverse for Teams, the label counter only increments when the toggle button is checked but not when the button is clicked. This is because the OnChecked event is not triggered by the varToggle variable being changed by the component.

Work Around

Update 2021-02-10: There is a workaround to this – you can enable ‘classic’ controls – this then gives you the choice between using the Fluent UI OR the classic Toggle control. By using the classic control you then get the OnChecked event being raised!

For more great content, check out the Resource Centre

About the Author:

Scott has been a Microsoft Business Applications MVP since 2013, specializing in Dynamics 365 and the Power Platform. He is a passionate software architect, technologist, blogger, and speaker as well as the author of multiple tools including the Ribbon Workbench. His software career spans more than 20 years where he has moved from assembly language device driver programming, industrial control software and then into enterprise business applications.

Scott currently lives in the beautiful British Columbia, Canada, with his wife and 3 children. Find him on Twitter as @ScottDurow, LinkedIn at linkedin.com/in/scottdurow/ , and read his blog at scottdurow.develop1.net   

Reference:

Durrow, S. (2021). Dataverse for Teams vs Canvas Apps – Part 1 – Checked vs Default Control Properties. Available at: https://www.develop1.net/public/post/2021/02/07/dataverse-for-teams-vs-canvas-apps-part-1-checked-vs-default-control-properties [Accessed: 1st March 2021].

Find more great Power Platform content here.