PowerApps - Tab Index for controls

1. Embedding a Canvas App in Teams:

   • You can customize your Teams experience by adding Power Apps canvas apps to your channels using the Power Apps tab. This allows you to integrate your app directly within Teams.
   • To add a canvas app as a tab in Teams:
     1. Sign in to Power Apps.
     2. In Microsoft Teams, select a team and a channel.
     3. Click the “+” button to add a tab.
     4. Choose Power Apps and select a sample app template (e.g., Product Showcase).
     5. Save the tab, and the app will be available for use within the channel.

2. Tab Index Property:

   • The Tab Index property allows you to control the order in which controls receive focus when users navigate using the “Tab” key.
   • By default, PowerApps follows a left-to-right, top-to-bottom flow. However, you can explicitly set the TabIndex property on controls to override this logic.
   • Here’s how you can set the Tab Index property:
     1. Open your app in edit mode.
     2. Select a control (e.g., text input, dropdown, date picker).
     3. In the properties pane, locate the TabIndex property.
     4. Assign a positive value (e.g., 1, 2, 3, …) to specify the desired order.
   • Note that the Tab Index property works for default controls within a data card or simple text entry controls. It may not work as expected for complex controls like dropdowns or date pickers.

3. Tab Order Based on X and Y Coordinates:

   • The default tab indexing in Power Apps is based on the X and Y coordinates of controls.
   • It starts with the smallest X and smallest Y, then moves to the next control with greater Y coordinate.
   • This means that controls higher up and to the left will receive focus first, followed by those lower down and to the right.

4. Known Issues:

   • Keep in mind that there are some limitations related to tab order and complex controls:
     • Date pickers and dropdowns may not fully respect the Tab Index property.
     • In view mode, tab index functionality might behave differently.
     • Consider testing your specific scenario to confirm behavior.

Remember to adjust the TabIndex property for your controls and test the tab order to achieve the desired behavior.