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.

powerapps containers

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.

containers in powerapps

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.

powerapps horizontal container

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.

powerapps vertical container

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.

container powerapps

Power Apps Container Properties

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

See also  How to Sort Power Apps Gallery By Month [With Examples]

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.

Power Apps Container Control

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.

PowerApps Container Control

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.

How to use PowerApps Container Control

4. Fill

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

powerapps fill portions

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

container in power apps

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’.

Horizontal OverFlow Property

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.

Vertical OverFlow Property

9. Wrap

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

Power Apps Container Control

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.

power app scrollable container

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

See also  Power Apps RSS Feed

Scenario:

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

Column NameData Type
Product NameIts is a default single line of text
PriceCurrency
ManufacturerChoice
ImageImage
powerapp container

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.

power apps scrollable container

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.

scrollable container powerapps

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
container power apps

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

powerapps vertical container two columns

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.

powerapps container wrap

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.

powerapps container auto height

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.

containers in powerapps

To do so, follow the below steps.

See also  Power Apps Modern Spinner Control - How to Use

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"]
scrollable container powerapps

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

OnSelect = Navigate(ProjectDetailsScreen)
powerapps container

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.

container powerapps

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:

>