PowerApps Container Control – Complete tutorial

In this Power Apps tutorial, We will discuss what is container control in PowerApps and how to use PowerApps container control in your app. Also, We will cover these below topics:

• PowerApps container control Property
• PowerApps add container
• Power Apps Vertical and Horizontal Container control Property
• PowerApps container vs group
• Convert Groups into Containers
• Power Apps Nested Container
• Remove a Power Apps Container
• PowerApps container auto height
• PowerApps container wrap
• PowerApps container visible
• PowerApps container padding
• PowerApps scrollable container or PowerApps container scroll

PowerApps container control

• A container is a type of thing that can contain a set of controls. As the Container is a control that presents in the PowerApps, known as Power Apps Container Control.
• The Power Apps Container control can hold multiple controls (like Button, Label, Text input, Gallery, etc.). This control has its own properties.
• On the Power Apps screen, You can insert a blank container control and you can design it by adding controls to it.
• You can resize, move, hide the container control, and so on. You can create a hierarchy structure like you can start with a number of controls, select them and add using a tree view.

NOTE:

A Container can have a PowerApps Form but the container does not work within the forms.

PowerApps container control Property

Below represents some important properties of Power Apps Container control:

1. BorderStyle = It specifies whether the control’s border is Solid, Dashed, Dotted, or None.
2. BorderColor = It specifies the color of the control’s border.
3. BorderThickness = It specifies the thickness of the control’s border.
4. Fill = It provides the background color of a control.
5. Height = It defines the distance between the control’s top and bottom edges.
6. Width = It defines the distance between the control’s left and right edges.
7. Visible = It specifies whether the control displays or is hidden.
8. PaddingBottom = It specifies the control’s padding of the bottom side.
9. PaddingLeft = It specifies the control’s padding from the left side.
10. PaddingRight = It specifies the control’s padding from the right side.
11. PaddingTop = It specifies the control’s padding from the top side.
12. X = It defines the distance between the left edge of a control and the left edge of its parent container (screen, if no parent container).
13. Y = It defines the distance between the top edge of a control and the top edge of the parent container (screen, if no parent container).

Read PowerApps Dropdown Gallery

Power Apps add container

Next, comes how you can insert a Power Apps Container on the app or Power Apps screen?

There are total of three types of containers in Power Apps. Such as:

1. Container
2. Horizontal container
3. Vertical container

Container:

To add the PowerApps container control, Go to the Insert tab -> Input -> Select Container as shown below. Then the container control will appear on the screen where you can insert any control over there.

Horizontal and Vertical container:

• In the PowerApps Horizontal container, all the user-selected input controls will display with the horizontal layout.
• To add the horizontal container on your screen, click on the “+” icon from the left navigation of the screen -> Expand Layout -> Click on Horizontal container as shown below. All the properties will appear on the right side of the Properties pane.
• In the PowerApps Vertical container, all the user-selected input controls will display with the vertical layout.
• Similarly, to insert the vertical container, you need to do the same above process again but instead of the Horizontal container, you will choose the Vertical container. All the properties will appear on the right side of the Properties pane.

Read Power Apps Display SharePoint List Items

Difference between Horizontal and Vertical container:

• As I discussed, In the Horizontal container, controls are appearing with the Horizontal base, and in the Vertical container, the controls are appearing in a vertical manner. So let’s see the below screenshot so that you will get some idea.

• You can use the respective properties while using any of the PowerApps containers. Refer to the below figure.
• In this Horizontal container control, you can not move or resize the icon or control by dragging it. Instead of that, you can use some properties like Justify and Align.
• Also, there is a property called Gap that provides some spaces between the input controls or icons. You need to specify it by giving the numeric value.
• As I have provided the Fill color, that’s why the container is appearing with the specified color. The same thing you can do for the Vertical Container control.

This is how to add a container in Power Apps.

Read PowerApps Filter SharePoint List with Examples

Power Apps Vertical and Horizontal Container control Property

Below represents some of the important key properties of the Power Apps Vertical and Horizontal container control:

1. BorderColor = It specifies the color of a control’s border.
2. Color = It specifies the color of the container control.
3. Fill = It defines the background color of the container control.
4. Direction = It defines in which direction the container layouts its child components either Horizontal or Vertical.
5. Justify = It defines how child elements are aligned with the primary axis. (it may be Start, End, Center, Space Between)
6. Align = Defines how child components are positioned in the container, in the off-axis (opposite from LayoutDirection) (maybe Start, Center, End, Stretch)
7. Gap = It provides the space between containers child components in pixels.
8. Horizontal Overflow = It specifies whether the container shows scrollbars or removes content when it is too large to fit. Scroll and Hide.
9. Vertical Overflow = It specifies whether the container shows scrollbars or removes content when it is too large to fit. Scroll and Hide.
10. Wrap = It defines whether the content wraps to a new row or column when it cannot fit.
11. Minimum width = It provides the minimum size of the component in the direction of the Fill portions (that is, the parent’s Direction).
12. PaddingBottom = It represents the distance between text in a control and the bottom edge of that control.
13. PaddingLeft = It represents the distance between text in a control and the left edge of that control.
14. PaddingRight = It represents the distance between text in a control and the right edge of that control.
15. PaddingTop = It represents the distance between text in a control and the top edge of that control.
16. Visible = It specifies whether a control appears or is hidden.
17. Width = It defines the distance between a control’s left and right edges.

PowerApps container vs group

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.

At first, to confuse with all these things, I would like to say is, PowerApps Container and a Group, are not the same thing. Both are purely different things whereas PowerApps Container is a Control and PowerApps Group is a concept in PowerApps.

• In the below screenshot, you can see there is a Group and a Container available on the PowerApps screen.
• When you are using the Group, it does not affect (set of controls) the layout of the screen. In the Container, it wraps all the set of controls present inside that container.

These are the difference between PowerApps container and group.

Convert Groups into Containers

• Suppose you have a PowerApps Group and you may want to convert this group to containers. To do this, select the Group (that you want to convert) -> Click Ellipses (…) -> click on the Add to container option as like the below screenshot.

• Now you can see the group has been converted to the Power Apps container control as in the below screenshot.

This is how to convert groups into containers in Power Apps.

Power Apps Nested Container

• You can create a nested or sub or child container inside a main or parent container. In the nested containers, all the same, relative positioning options are still available as shown below.
• In the same way only, you can create the sub-container inside the main container.

Remove a PowerApps Container

• You can also remove the PowerApps container (if not required in your requirement).
• Once you will remove the container, then all the controls inside the container are positioned on the page again.
• To remove the container, Select the ellipses (…) -> Click on the Remove container as shown below.

This is how to remove a container in PowerApps.

PowerApps container auto height

• There is no such property as Auto height in the PowerApps Controller. Instead of that, you can use the Height property (present within the Size property) to increase the container height on the app.
• Select the Container control and provide the Height property from the Properties pane as shown below.

This is how to set auto height in PowerApps container.

PowerApps container wrap

Do you want to know what is the Wrap in the PowerApps Container Control? Refer these below instructions to get details.

• So first of all you should know what does the mean Wrap? While working with the Vertical container control or Vertical gallery control, it can contain multiple rows of records in one column, also you can have more than one column.
• Similarly, while working with the Horizontal container control or Horizontal gallery control, it can contain multiple columns in one row or you can have more than one row.
• You can achieve the proper layout by using the Wrap or WrapCount of the container control. But for this container, there is only one property called Wrap.
• To wrap the PowerApps container, you just need to select the container control and enable the Wrap property from the properties pane.
• Refer to the below screenshot to see the difference between a normal container and a Wrap container in Power Apps.

Power Apps Horizontal Container Wrap

The Horizontal Container wrap difference you can see in the below screen wherein the wrapping container divides the line or row in a respective manner.

Power Apps Vertical Container Wrap

Similary in the Vertical container wrap, you can see in the below screen wherein the wrapping container divides the column in a respective manner.

PowerApps container visible

• Suppose you want to hide your Power Apps container control, then in that case you can use a property called Visible. Once you will disable this Visible property from the Properties pane, then the container will hide otherwise it will appear on the screen.
• Also, you can specify the boolean value as true (for appearing the control) or false (for disappearing the control) to the PowerApps Container control. By default, the Visible property will be enabled while adding the container control to the screen.

Example:

Lets take a simple scenario that in the container, how you can show/hide a component with a button input.

• On the Power Apps screen, there is a Horizontal Container control. This container has one gallery control (records are retrieved from the SharePoint list data source) and a Button control named “Click Me!“.
• Now what I would like to do is, When I will click on the button, then only the gallery will display otherwise it will be in hidden mode. Refer to the below screenshot.

• To do so, follow these below instructions. First of all, Set a variable on Screen’s OnVisible property as:

OnVisible = Set(varContainer,false)

Where,

varContainer = Variable name that I have specified

• Next, Select the Button control and apply this below formula on its OnSelect property as:

OnSelect = Set(varContainer, true)

• At last, Select the galery control and set its Visible property to the specific variable.

Visible = varContainer

• Now save and publish the app. Reopen the app again. Once you will click on the button (Click Me!), then the gallery control will appear as shown below.

NOTE:

Do you want to show or hide a PowerApps container with a “Cover Right” or “Cover Left” effect?
Unfortunately, there is no in-built way to show or hide controls with a transition effect. Alternatively one thing you could try is to animate the position of your container with a timer control when you want to show or hide it.

PowerApps container padding

• Do you know what does the mean Padding? In Power Apps, Each and every input control is having a Padding property.
• The Padding property specifies the distance between the text on an import, export button and the edges of that button. You can apply this padding property to Add picture, Export, and Import controls.
• As we discussed in the Power Apps Container control properties, there is a total of four types of padding. Such as:

1. PaddingBottom = It specifies the distance between text in a control and the bottom edge of that control. Also, you can apply this property to Button, Check box, Column chart, Date Picker, Dropdown, HTML text, Image, Label, Line chart, List Box, PDF viewer, Radio, and Text input controls.
2. PaddingLeft = It specifies the distance between text in a control and the left edge of that control. Also, you can apply this property to Button, Check box, Column chart, Date Picker, Dropdown, HTML text, Image, Label, Line chart, List Box, PDF viewer, Radio, and Text input controls.
3. PaddingRight = It specifies the distance between text in a control and the right edge of that control. Also, you can apply this property to Button, Check box, Column chart, Date Picker, Dropdown, HTML text, Image, Label, Line chart, List Box, PDF viewer, Radio, and Text input controls.
4. PaddingTop = It specifies the distance between text in a control and the top edge of that control. Also, you can apply this property to Button, Check box, Column chart, Date Picker, Dropdown, HTML text, Image, Label, Line chart, List Box, PDF viewer, Radio, and Text input controls.

PowerApps scrollable container or PowerApps container scroll

To scroll the PowerApps Horizontal and Vertical container Container control, there are two types of properties:

1. Horizontal Overflow
2. Vertical Overflow

• There are two sub-properties in the Horizontal Overflow and as well in the Vertical Overflow. Such as:
  Scroll and Hide
• When a user will select this overflow property to Scroll, then the container will display a scrollbar (when the content is too large to fit).
• When a user will select the overflow property to Hide, then the content will remove (when the content is too large to fit).
• Refer to the below screenshot to understand it better.

• Here, I have taken two Power Apps containers as Horizontal Container control and Vertical Container control. As I have selected both the container to Scroll overflow, that’s why the input controls are appearing as like the below screenshot.

• Also, you can use the Power Apps Scrollable screen to scroll the Container control (not only the container, but you can also use any input control).

Also, you may like these below Power Apps tutorials as:

• Power Apps Audio and Video Control [Detailed tutorial]
• Power Apps Choices Function with Examples
• Power Apps Loading Spinner
• Power Apps Len Function
• Show hide fields based on dropdown selection PowerApps (2 Examples)
• How to Create Tabbed Forms in PowerApps for SharePoint List
• PowerApps CountIf Function with Examples
• PowerApps repeating table
• PowerApps Count Function with Examples
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps AddColumns Function with Examples
• PowerApps Patch Function with examples
• PowerApps ForAll Function with examples

In this Power Apps tutorial, We discussed what is container control in PowerApps and how to use the PowerApps container control in your app. Also, we covered these below topics:

• PowerApps container control Property
• PowerApps add container
• Power Apps Vertical and Horizontal Container control Property
• PowerApps container vs group
• Convert Groups into Containers
• Power Apps Nested Container
• Remove a Power Apps Container
• PowerApps container auto height
• PowerApps container wrap
• PowerApps container visible
• PowerApps container padding
• PowerApps scrollable container or PowerApps container scroll