Container Controls - PowerApps
Tags: ux, lowcode, powerplatform, powerapps
Published: 2023-01-23 08:31:35

PowerApps provides pre-built reusable component library for the user to spin up a wire frame into a Web app quickly. The coverage of the UI element is impressive as it has range from buttons to input text. 

With more UI elements on a screen any change to the layout would mean you would have to rearrange the components individually. It becomes painful when the screen form factor doesn't account the elements. 

Why responsive UI is need ?
The experience of running a PowerApp across Desktop, Mobile and Tablet should be seamless as App can respond to different devices or screen sizes.
What responsive design enables is 

- Hide/Show controls
- Move the positions of controls
- Resize controls
- Prioritize controls
- Replacement of controls
- Minimum size required



**Rusty Controls**:
The painful way to keep the UI elements aligned and responsive in a very crude manner is to refer the Label X,Y properties in reference to another element in the screen. 

the below example I have to set the location of Label 2 X - parameter as a Label reference in the same UI screen.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pa4b5z9x0gq3s02krro.png)


![Image description](https://media.giphy.com/media/bCdVtyBc0V8Qkrje5q/giphy.gif)

**Better Hack combined control**:
When multiple controls are selected you can create group control either by right click Group option or Ctrl+G keyboard. Groups leave the controls inside a group use positioning relative to the screen, which means you need not do X,Y positioning reference for all the elements in a UI screen. Much more easier.


![Image description](https://media.giphy.com/media/vwyGNb9S0RWfkpQqdh/giphy.gif)

The enhanced Group control has its own Color, Border, and Visible properties which are independent of the child controls.  However since setting the enhanced Group to Visible No will hide all child control, it behaves the same as the classic group Visible property.

**Containers**:
Containers make it easier to UI of the App very responsive. **Group when applied to a set of controls don’t affect the layout of the screen. Meaning, they don’t add any element to the DOM (Document Object Model) where as containers does,**

- Vertical Container: stacks controls up-and-down
![Image description] (https://media.giphy.com/media/NgN5FxYSfIerY771bG/giphy.gif)

- Horizontal Container: positions controls side-by-side from left-to-right
![Image description] (https://media.giphy.com/media/QqEtaSi5k1MmDdGdB6/giphy.gif)

- Container: allows controls to be positioned on top of one another.
![Image description] 
(https://media.giphy.com/media/BfAm8auo8mnhVjdTLU/giphy.gif)

PowerApps container control Properties

| BorderColor     |  The   color of a control’s border.                                                          |
|-----------------|----------------------------------------------------------------------------------------------|
| BorderStyle     |  this property is to specify   whether a control’s border is Solid, Dashed, Dotted, or None. |
| BorderThickness |  specify the thickness of a   control’s border.                                              |
| Fill            |  The background color of a control.                                                          |
| Height          |  is the distance between the top   and bottom edges of a control.                            |
| Width           |  The distance between the left and   right edges of a control.                               |
| Visible         |  this property is to specify   whether a control appears or is hidden.                       |
| X               |  The distance between a control’s   left edge and the left edge of its parent container.     |
| Y               |  The distance between a control’s   top edge and the top edge of the parent container).   |

Also there are properties for the Horizontal and Vertical controls


| Direction                           |  It defines the orientation of the   container’s child components ” the items inside the container” either   Horizontal or Vertical.                                                                                                         |
|-------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Justify                             |  It defines how child elements are aligned   with the primary axis and it will help you to set the position of controls   inside your container along the primary axis ( Start, End, Center, Space   Between)                                |
| Align                               |  Defines how child components are positioned   in the container, in the off axis (opposite from LayoutDirection). Start,   Center, End, Stretch                                                                                              |
| Gap                                 |  It provides the space “distance ”   between containers controls in pixels.                                                                                                                                                                  |
| Horizontal    and Vertical Overflow |  It controls whether the container displays   scrollbars or removes content when it becomes too large to fit. So the two   properties will define what happens when the contents of the container exceed   the size of the container itself. |
| Wrap                                |  It defines whether the content wraps to a   new row or column when it cannot fit “when the container is smaller than its   contents”.                                                                                                       |

Controls can be added into a container by cutting and pasting them into a container. In group, you can’t add a new control directly.


**Documentation**:
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-container