3 min read

Container control in canvas apps enables more control over layout and nesting

The enhanced group control has been renamed to the container control to enable it to live alongside authoring groups. 

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.

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.

Try enhanced group control

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.

Below has multiple controls selected.

Multiple controls selected

Then the controls are grouped with Ctrl+G or the menu commands.

Multiple controls grouped
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.

Insert group menu

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.

Group properties

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.

Nested groups
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.