I built a Power Apps Employee Satisfaction Survey a few days ago. In that app, while creating a dashboard, I was required to perform many actions, such as displaying the employee surveys in gallery control and applying multiple filters. I was required to use Power Apps Container Control to achieve a flexible layout and adjust all controls.
In this article, I will explain thoroughly how to use a Power Apps Container control, how to use it, and what are its types and properties.
Container Control in Power Apps
In Power Apps, the container control groups multiple controls and designs the responsive layouts. We can drag and provide customized height and width properties for the controls present within the container.
Even though Group also has the same functionality, like grouping all controls, there is still a big difference.
Group vs Container
| Group | Container |
|---|---|
| Group is mainly used when the user needs to add sample values for properties like width, height, x, y, etc., properties across multiple controls. | The group is not a control and won’t have any properties. Also, it won’t affect the app’s layout. |
| To create a group, select all the controls and press Ctrl + G. | Add container from +Insert tab under Layouts. |
| Group is mostly used when the user needs to add sample values for properties like width, height, x, y, etc., properties across multiple controls. | Containers also group multiple controls by adding within it. But while applying property values to the container, they won’t be added to its controls. |
| Group won’t design any layouts. | Container design layout in the app. |
| Properties | Description |
|---|---|
| Fill | The background color of the container. |
| BorderStyle | It has the following border styles for the container [Solid, Dashed, Dotted, or None] |
| Border thickness | Provide the size for the border thickness of the container. |
| Border Color | Choose a border color from the color picker. |
| Height | Provide height for the container. |
| Width | Provide width for the container. |
| Visible | Provide a false value to make it hide and true for visible. |
| X | It takes the distance between the control’s left edge and the parent control’s left edge. |
| Y | It takes the distance between the top edge of the control and the parent control’s top edge. |
| Drop shadow | Provide shadow to the container. It has the options below None, Light, Semilight, Regular, Semibold, Bold, and ExtraBold. |
Types of Power Apps Containers
Apart from the standard Power Apps container, the two remaining containers are below, which create a responsive layout in both vertical and horizontal directions.
- Horizontal Container = Which adds the child components side by side from left to right.
- Vertical Container = It adds the child components from top to bottom.
Let’s look at some of the main properties of both horizontal and vertical containers.
| Property | Description |
|---|---|
| Direction | The Direction property controls how items are arranged in a container. It has two values 1. Horizontal 2. Vertical Horizontal container places items side by side, while a Vertical container stacks items on top of each other. |
| Justify (Horizontal) | It sets the position of controls inside a container along the x-axis. It has the following values: Start, End, Center, and SpaceBetween. It works only if the Direction property is Horizontal. |
| Justify (Vertical) | It also sets the position of controls inside a container along the y-axis. It has the following values: Start, End, Center, and SpaceBetween. It works only if the Direction property is Vertical. |
| Gap | It provides the space between controls within the container |
| Horizontal Overflow | The Scroll option shows the extra controls that exceed the container’s width by allowing horizontal scrolling. The Hide option hides the controls that go beyond the container’s width. This property is applicable if you choose the Direction property Horizontal. |
| Vertical Overflow | The Scroll option shows the extra controls that exceed the container’s height by allowing vertical scrolling. The Hide option hides the controls that go beyond the container’s height. This property is applicable if you choose the Direction property Vertical. |
| Wrap | The Wrap option moves controls to the next line when the container is smaller than its contents. It is helpful for responsive apps that need to adapt to different device sizes. |
| DropShadow | Apply shadows to the container by choosing the values below. 1. Light 2. None 3. Semilight 4. Regular 5. Semibold 6. Bold 7. Extrabold |
How to Use Power Apps Containers
In this section, we’ll see how to use the Power Apps containers and some examples. First, we will start with a standard container.
1. Create one new app or take an existing app in Power Apps. Click on the +Insert tab -> Layout -> There, you can see the three containers.
- Horizontal container
- Vertical container
- Container
Choose the Container.
2. In this container, you can add whatever controls you want, but it is limited to the below controls.
You can drag and adjust the controls within the container, like in the image below.
You can also add a gallery control and form control within the container to create layouts in the application.
Let’s see how to use the horizontal & Vertical containers in Power Apps applications for business scenarios.
Power Apps Horizontal Container Example
Here, I was required to create a header in the Power Apps application that displays how many employee issue tickets are approved, rejected, and pending, along with a simple chart. I achieved this with the Power Apps horizontal container; see the example below.
Follow the steps below to achieve this!
1. Add the code below on the OnStart property of the App object in the application.
ClearCollect(
IssueRequests,
{IssueRequest: "Request #001", Status: "Approved", IssueCategory: "Network"},
{IssueRequest: "Request #002", Status: "Pending", IssueCategory: "Software"},
{IssueRequest: "Request #003", Status: "Rejected", IssueCategory: "Hardware"},
{IssueRequest: "Request #004", Status: "Approved", IssueCategory: "Security"},
{IssueRequest: "Request #005", Status: "Pending", IssueCategory: "Performance"},
{IssueRequest: "Request #001", Status: "Approved", IssueCategory: "Network"},
{IssueRequest: "Request #001", Status: "Approved", IssueCategory: "Network"},
{IssueRequest: "Request #003", Status: "Rejected", IssueCategory: "Hardware"},
{IssueRequest: "Request #003", Status: "Rejected", IssueCategory: "Hardware"},
{IssueRequest: "Request #003", Status: "Rejected", IssueCategory: "Hardware"},
{IssueRequest: "Request #005", Status: "Pending", IssueCategory: "Performance"}
);
ClearCollect(
PieChartData,
{Label: "Approved", Series: CountIf(IssueRequests, Status = "Approved")},
{Label: "Pending", Series: CountIf(IssueRequests, Status = "Pending")},
{Label: "Rejected", Series: CountIf(IssueRequests, Status = "Rejected")}
)
Here, I created a sample collection named IssueRequests, which has the following columns:
- IssueRequest
- Status
- IssueCategory
Then PieChartData is another collection that has the following columns:
- Label = Contains status values.
- Series = Count of each status value from the IssueRequests collection.
2. Add a Horizontal Container from the +Insert tab on the new screen. Then, within it, four standard containers will be added to display the number of approved, rejected, pending, and pie chart items.
3. Add one icon and text labels like the one below for each container.
- Container -Approved :
- Check icon
- Text label – Provide the code below on its Text property.
"Approved ["& CountIf(IssueRequests, Status = "Approved") &"]"CountIf() function will count the number of records with the status value “Approved” in the IssueRequests collection.
- Container -Rejected:
- Cancel icon
- Text label.
"Rejected ["& CountIf(IssueRequests, Status = "Rejected")&"]"Here, the CountIf() function also counts the number of records that have the status value “Rejected.”
- Container – Pending:
- Information icon
- Text label
"Pending ["& CountIf(IssueRequests, Status = "Pending")&"]"Here, the CountIf() function returns the count of “Pending” records from the collection.
- Container – Piechart
- Add a Piechart into this container.
Add the below collection name in its items property:
PieChartDataPieChartData is the name of the collection that we created above. It will automatically take the Approved, Rejected, and Pending status values as a label and the count as the series. Then, based on the series, colors are applied.
Power Apps Vertical Container Example
We can use vertical containers in Power Apps to add multiple controls in a stack. Also, the screen sizes need to be adjusted.
In the example below, you can see that in a single container, I have both edit form control to add a new request and a gallery to view the submitted details. You can also add a few more controls to it.
Note: In Horizontal and Vertical containers, you can’t drag the controls within it. It will automatically adjust the height width.
If you want to adjust the height and width custom apart from the container given. Follow the example below!
1. Controls within the Vertical container have additional properties named Align in container. It has two values:
- Custom
- Set by Container
If you choose Set by container or Custom, the Width property will be visible on top. Provide the width according to your requirements.
2. Under Align in container, four icons indicate the below positions:
- Start
- End
- Center
- Stretch
the control will be placed based on the selected value by choosing these values.
3. Under these icons, there is a Flexible height property. By choosing this, the container assigns heights for each control within height. If you’re not choosing this, the regular Height property will provide height for the control custom.
This way, we can use the Power Apps horizontal and Vertical containers to create the headers on the dashboard screen.
I hope you understand the types of Power Apps containers, their properties, and when to use them. I also explained the limitations of containers and the differences between the Group and the Container. Follow this article if you’re a Power Apps beginner and need to know the basic usage of the Power Apps containers.
Also, you may like:
- Power Apps toggle control
- Power Apps rating control
- Power Apps chatbot control
- Power Apps camera control
- Power Apps timer control
- Power Apps list box control
Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.
