Container in Power Apps [With Examples]

PowerApps Container control allows you to group other controls together. It helps you organize your app’s interface and functionality by containing multiple controls within a single container.

In this tutorial, I will explain what PowerApps containers are and the key properties of the container in PowerApps.

Also, we will cover the topics below:

• How to use containers in PowerApps
• PowerApps scrollable container
• PowerApps move items in container

Power Apps Container Control

A container is an important control in PowerApps that allows for the grouping of controls. It can hold various controls, such as buttons, labels, text inputs, galleries, etc.

To design the PowerApps screen, you can insert a blank container control and customize it by adding controls.

Containers in PowerApps can be resized, moved, or hidden, among other actions. Additionally, you can create a hierarchy by selecting multiple controls and adding them using a tree view.

The Power Apps container control provides a convenient way to organize, manage, and enhance your Power Apps applications’ user interface and functionality.

Different Types of Power Apps Containers

Next, we will discuss the different types of containers in Power Apps. There are only three types of containers available: Horizontal container, Vertical container, and Container.

1. PowerApps horizontal container

Power App’s horizontal container control distributes available space to its child components based on the specified settings and determines their alignment.

2. PowerApps vertical container

Power App’s vertical container control is responsible for distributing available space amongst its child components based on predetermined settings and defining the alignment of those components.

3. PowerApps container

This general Power Apps container allows a group of controls together, and it is very flexible to resize and set position anywhere on PowerApps the screen.

Power Apps Container Properties

Next, we will discuss the PowerApps container properties. Such as:

1. Direction

This property defines the positioning of child components within a container perpendicular to the “LayoutDirection.” The available options include Start, Center, End, and Stretch.

2. Justify

This property defines the alignment of child elements with the primary axis. The four possible values for this attribute are Start, End, Center, and Space Between.

3. Align

This property defines the positioning of child components within a container perpendicular to the “LayoutDirection.” The available options include Start, Center, End, and Stretch.

4. Fill

We can use this fill property to provide the background color for the Power Apps container control.

5. Height

This property defines the distance between the control’s top and bottom edges.

6. Width

This property defines the distance between the control’s left and right edges

7. Horizontal OverFlow

This property determines whether to enable scrollbars in a container or hide the content that overflows beyond the container’s dimensions. The available options are ‘Scroll’ and ‘Hide’.

8. Vertical OverFlow

This property determines whether the container displays scrollbars or hides content that exceeds its dimensions. The options available are to enable scrolling or hide the excess content.

9. Wrap

This feature determines if the content should wrap to a new row or column when there’s insufficient space to fit it.

PowerApps Scrollable Container

In PowerApps, the container control has two properties to enable scrolling: [Horizontal Overflow and Vertical Overflow]. Each property has two sub-properties: [Scroll and Hide].

Selecting the Scroll option will display a scrollbar when the content exceeds the container’s dimensions. On the other hand, selecting the Hide option will remove any content that exceeds the container’s dimensions.

Now, I will explain about the PowerApps scrollable container with a simple scenario:

Scenario:

I have a SharePoint Online list named “Product Details” and this list contains the below fields.

Column Name	Data Type
Product Name	Its is a default single line of text
Price	Currency
Manufacturer	Choice
Image	Image

In Power Apps, there is a container control and gallery control. Now, I would like to display gallery records on Horizontal and Vertical Overflow to scroll the gallery.

Refer to the below image.

To achieve it, follow the below steps. Such as:

1. On the Power Apps Screen -> Insert a Horizontal container and set its “Horizontal Overflow” And “Vertical Overflow” to “Scroll,” as shown below.

2. Then, insert a Horizontal gallery inside the container control and set its Items property as:

Items = ''Product Details'' 

Where,

• ‘Product Details’= SharePoint Online List

3. Similarly, add a Vertical gallery control inside the container and change the Direction property to “Vertical,” as shown below.

4. Once your app is ready, Save, Publish, and Preview it. The container control displays gallery records on both Horizontal and Vertical Overflow to scroll the gallery, as in the screenshot below.

This is how we can use the PowerApps scrollable container.

How to Use PowerApps Container Control

Now, I will show how to use PowerApps container control with a simple example.

Example:

In Power Apps, there is a container control. Inside this, I have added a Dropdown control and a Button control.

Whenever the user selects any value from the dropdown control and selects the button control, it will navigate to the other screen.

Have a look at the below screenshot for the output.

To do so, follow the below steps.

1. On the Power Apps Screen -> Insert the Container control, and inside this, add Dropdown control and set its Items property to the code below.

Items = ["English","Mandarin","Spanish","French","Russian"]

2. Next, insert a Button control and set its Onselct property to the code below.

OnSelect = Navigate(ProjectDetailsScreen)

3. Save, Publish, and Preview the app. When the user selects any value from the dropdown control and selects the button control, it will navigate to the other screen [ProductDetailsScreen], as shown below.

PowerApps move items in container

There is no way to move items or components around in a PowerApps container. The Horizontal and Vertical containers are assembled one after one. But you can change the properties of the containers, like where they will placed.

I hope you find this article useful for you; here, we learned in detail information about the Power Apps container control, its key properties, and how to use the PowerApps container.

Also, we covered how to work with Power Apps’ scrollable container and how Power Apps move items in the container.

Some more articles you may like:

• Power Apps Disable Button
• Create Hyperlink Button in Power Apps
• Power Apps Modern Spinner Control