Unleash the Power of Containers in Power Apps
Updated: Oct 7
One of the most exciting features of Power Apps is the ability to use containers.
In this blog post, we will explore the world of containers in Power Apps and discover how they can enhance your application-building experience.
The container can hold a set of controls and has its own properties.
You can start with inserting a blank container. And then, customize it by adding controls to it, resizing it, moving it, hiding it, and making other changes.
Understanding Containers
Containers in Power Apps are essentially layout controls that help you group, organize, and manage other controls within your app. They are like virtual boxes that can hold various UI elements, making it easier to design and manage your app's user interface. Containers can be especially useful when dealing with complex screens or forms.
The difference between Container and groups
While working with the PowerApps Container control, maybe some question in your mind will come that whether the Container control and a Group are the same things in the Power Apps, if yes, then why we are using the Container control? Follow these below instructions to clarify all your problems.
Initially, to clear up any potential confusion, it's important to note that PowerApps Containers and Groups are distinct entities.
As you begin to utilize the PowerApps container control, it's natural to assume it's merely a rebranded version of grouping. However, it's essential to recognize that a container is a distinct and wholly separate concept from a group.
They serve different purposes; PowerApps Container is a control, while PowerApps Group is a concept within PowerApps.
The Group is a concept in Power Apps it used to group a set of controls without affecting the layout of the screen.
To group some controls, you have to select the controls that you want to put them in a group
When multiple controls are selected, the existing Ctrl+G keyboard adds the enhanced Group control and moves the controls selected as children.
Ctrl+G will then ungroup the child controls.
Groups leave the controls inside a group use positioning relative to the screen.
The group and ungroup commands are also available from the Home > Group menu. and then type Ctrl+G
The Container is a control that used to hold some controls inside it
The Power Apps container control affect the layout of the screen it will wrap all the controls present inside that container.
The positions of the controls inside the containers are relative to the container rather than the screen.
You can also release a container. when the container control is removed, the controls inside the container are positioned on the page again.
Container Limitations
Containers don’t work within forms, but you can add forms inside the container.
The following controls are not supported within a container:
Data table
PDF viewer
Web barcode scanner
Container Controls Types
There are three types of containers that you can use inside your app.
1- Container
2- Vertical Container
3- Horizontal Container
Container
To add the PowerApps container control : Insert tab > Input > Select Container.
This container allows controls to be positioned on top of one another.
Vertical Container & Horizontal Container Properties.
These properties are set at the container level (as opposed to being set on individual controls within the container)
Direction Property
Direction determines the orientation of items inside a container. A vertical container is set to vertical default whereas a horizontal container is set to horizontal. This would appear to be obvious but it should be noted that a container can change its direction at any time.
Vertical Container
A vertical container can be used to quickly create a contact card with labels stacked on top of each other. Using Vertical container, input controls will display with the vertical layout.
Horizontal Container
Horizontal container is helpful when putting together a grouped row of buttons.
Horizontal container, controls are appearing with the Horizontal base side by side beginning from left to right.
To add the horizontal container on your screen, click on the “+” icon from the left navigation of the screen and then expand Layout -> Click on Horizontal container or Vertical container as shown below.
Container Justify Property
Justify property defines how the elements inside the container are aligned with the primary axis and it will help you to set the position of controls inside your container along the primary axis.
For the vertical container it will be justify (vertical )
For the horizontal container it will be justify (horizontal)
There are four options to justify a container’s contents: left, center, right and space between. Space between positions controls with an equal space between them
These top navigation menu examples rely on the justify property to display icons on the desired side. They are made with an alternating set of icons and labels.
Align Property
Align sets the position of controls inside a container along the secondary axis. For a horizontal container the secondary axis is up-and-down. There are four options to justify a container’s contents: start, center, end and stretch. Stretch makes the control fill the entire height of the container.
This title bar uses End for its align property to position its label and icons along the bottom of the container. Leaving space at the top is desirable for iPhones which have a camera notch there.
Gap Property
Gap determines the distance between controls. When the gap is equal to 0 controls have no space between them. As the value of gap increases controls become farther apart.
The orange row of grouped buttons have a gap of 0 whereas the blue row of separated buttons have a gap of 20.
Overflow Property
Overflow defines what happens when the contents of the container exceed the size of the container. There are two options: Hide and Scroll. Hide does not show any content beyond the limits of the container.
Scroll allows the user to browse past the limits of the container using a scrollbar.
Large galleries of data with many columns sometimes extend beyond the screen. A container with the scroll property lets the user navigate to the data they need.
Wrap Property
Wrap positions controls on the next line when the container is smaller than its contents. It is useful when used with responsive apps that must be displayed on devices with various size.
With the wrap property forms can be made to show two columns on wider devices and one column on narrower devices.
Vertical & Horizontal Container Child Properties
These properties are set on individual controls inside a container rather than the container itself.
Flexible Width/Flexible Height Property
Flexible Width/Height sets the position of controls inside a container along the primary axis. Again, this property.
This company portal app has a sidebar with a minimum width of 220 pixels whereas the body of the app has a flexible width. As the browser gets smaller the body shrinks but the sidebar does not.
Minimum Width/Minimum Height Property
Minimum width/Minimum Height defines the smallest possible size of a flexible container. The property is only available for flexible controls.
This Reader App design uses a horizontal container with 3 flexible labels. The middle label has a minimum width of 450 pixels and the left-and-right labels have a minimum width of 0.
Fill Portions Property
Fill Portions define what fraction of the screen a control takes up. Once again, the property is only available for flexible controls.
Once again, the body of the reader app has 3 labels: a middle label with fill portion of 2 and left-and-right labels each with a fill portion of 1. The middle is twice as big as the label on either side.
Container control Properties
BorderColor – The color of a control's border.
BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.
BorderThickness – The thickness of a control's border.
Fill – The background color of a control.
Height – The distance between a control's top and bottom edges.
Width – The distance between a control's left and right edges.
Visible – Whether a control appears or is hidden.
X – The distance between the left edge of a control and the left edge of its parent container (screen, if no parent container).
Y – The distance between the top edge of a control and the top edge of the parent container (screen, if no parent container).
Note: A Container can have a PowerApps Form but the container does not work within the forms.
Conlusion:
In this post, we have explored the functionality of the PowerApps container contr and delve into various properties that can be applied to the container, and we have also discovered how to design responsive layouts using this powerful control.
FAQs
Why do we use container in power apps?
We use Container to create PowerApps responsive layouts. Containers make it easier to design an app’s layout. When you placed a control within a container, it is automatically positioned.
What are the limitations of Power Apps Container?
The following controls are not supported within a container
Data table
PDF viewer
Web barcode scanner
Containers don’t work within forms , but you can add forms inside the container.
Can we change the direction of existing container?
A container can change its direction at any time, so a horizontal container can become a vertical container and vice versa.
How are containers different from groups in Power Apps?
The Container is a control that used to hold some controls inside it. Container control affect the layout of the screen it will wrap all the controls present inside that container.
The group is used to group a set of controls without affecting the layout of the screen. Groups leave the controls inside a group use positioning relative to the screen.
What are some advantages of using containers in Power Apps?
Containers help with organization, consistency, responsiveness, simplification of complex screens, and reusability of UI elements. They make it easier to manage and design your app's user interface.
How do I apply properties to controls within a container?
You can apply properties to controls within a container by selecting the container and then modifying the properties in the property pane. Changes made to the container's properties can affect all controls within it.