Tab Index for Canvas Apps Controls in Dataverse for Teams
In this post, I will show you how to setup up tab index for controls in Microsoft Dataverse for teams.
We will first take a look at how the it works by default and then how it can be configured using Containers and Accept Focus property of the control on the canvas app.
Let's Get Started!
The scenario that we are trying to build here is for an app which is built using the "New" controls on a canvas App in Dataverse for Teams. The new controls does not have a Tab Index property, which makes it difficult to setup the tabs for input fields when setting up accessibility.
Note: You can enable "Classic Controls" on your Canvas Apps using Settings but then the app design properties will be different than the Fluent UI controls. This post can be used to add the indexes to existing app rather than changing all the new controls to classic controls (which is going to be a lot of effort.)
The Accepts focus property on the new controls allows us to enable them for usage in the tabs for a better user experience and better accessibility. The default tab indexing is on the basis of X and Y coordinates (Thanks to Microsoft for shedding light on this. More information here). It starts with the smallest X and smallest Y and then with each tab, it moves to the next control with greater Y coordinate as shown in the video below.
To make the configuration of the tabs column-wise where it first completes the fields in one column and then proceed to other column, you can split the controls into different containers.
Steps to follow:
1. Enable "Accepts focus" Property on the controls that you want to include in tab indexes.
2. Add the container control on the screen and add all the controls from you screen to inside the container.
Note: Add separate containers for each column as it follows the order from Y coordinate.
3. After the containers are added your screen will look something like below:
After setting up the configuration, the tab order and functionality experience is as shown in the video below:
However, if the use case requirement is that the tab order needs to first complete all the controls on the row and then move to the next row, the "Accepts Focus" property, handles that by default. In case of specific use cases, you can use containers and play with the control X and Y coordinates to achieve the desired tab order.
In this article we saw how to setup tax index on the new controls when building canvas apps using Dataverse for Teams. This particular scenario can be used if you have a long form to collect many fields from the users and apply a tab index on Fluent UI controls. Again, as mentioned above in the post, the "Classic Controls" can be enabled from the app settings and tab indexes in particular can be defined on those controls.
I hope you found this interesting and it helped you. Thank you for reading!