Enhanced Group control in canvas apps enables more control over layout and nesting
With the latest release, we have added a new experimental feature for enhanced Group control in canvas apps. This control changes grouping from being a Studio only grouping concept to a real grouping control in the player. It enables us to enhance the grouping capabilities which weren't possible in Studio only.
In the PowerApps Ideas forum, we had requests to improve the current Group behavior including improved adding or removing items from an existing group, nested groups, and setting properties at the group level. Additionally we needed to enable more control over keyboard interaction to match the visual structure of the page. A new experimental Group control was added which is used when grouping is done. Any existing Group controls in the app will continue to behave as a classic group.
Since this feature is a change to an existing concept, we are starting it as an experimental feature which requires opt-in for each app to use it. Based on feedback we will next move it to a preview feature which defaults to on for new apps. Using the enhanced Group control requires the "Improved app rendering" preview feature to be enabled.
Enabling enhanced groups
To opt-in to the new behavior, first open the App settings > Advanced settings.
Then under the Experimental features section, toggle the "Try the enhanced Group control" switch. Now when new groups are added, it is the enhanced group instead of the classic group.
Grouping multiple controls
When multiple controls are selected, the existing Ctrl+G keyboard will add the enhanced Group control and move the selected controls as children. A subsequent Ctrl+G will ungroup the child controls. The group and ungroup commands can also be found under the Home > Group menu. To convert an existing classic Group into an enhanced Group control, use the Ungroup and Group commands. The ungroup will remove the classic Group and if the enhanced Group is enabled, the group will a new enhanced Group.
Then the controls are grouped with Ctrl+G or the menu commands.
Adding group controls and moving children
An empty group can be added from the Insert. Additionally, controls can be moved into or moved out from the group using cut and paste.
The new enhanced Group control provides an actual control in the player. This enables keyboard actions to first go through children of the group before moving to the controls after the group. When a classic Group was used, the grouping had no impact on the keyboarding in the app since there was no group control in the player. One usage of this is when there are parallel sets of control on the left and right. The keyboard behavior can be made to match the visual structure of the screen. We will be using this to update our sample apps to have the right keyboard order.
Group control properties
The enhanced Group control has properties which can be set or used in the expressions. The class Group properties were really an aggregate of the individual controls in the group. If you changed the value of a classic Group property, it was set on each of the children controls. Instead with the enhanced Group, it has its own X, Y, Height, and Width properties. One usage of this is to move group by just changing the group X and Y values. All of the child control positions are relative to the parent. Then all of the child controls move with the parent.
The enhanced Group control has its own Color, Border, and Visible properties which are independent of the child controls. However since setting the enhanced Group to Visible No will hide all child control, it behaves the same as the classic group Visible property.
Nesting groups
We also enabled the enhanced Group control to be nested within another Group. This behavior can be used for more complex layout and keyboard interactions.
Try it out
Enable the enhanced group feature in PowerApps Studio and start converting your classic groups. Then let us know how it is working. If you have suggested improvements, please add them to PowerApps Ideas.