Bala MadhusoodhananPowerApps 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.
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.
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
Horizontal Container: positions controls side-by-side from left-to-right
Container: allows controls to be positioned on top of one another.
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
