Power Apps - Master containers Tutorial

Unlock the power of responsive design in your applications with "master containers"! Discover how to effectively group and manage controls for optimal usability across all devices. Learn about simple and dynamic containers, their configurations, and how to ensure a seamless user experience. Dive in now and elevate your low-code skills in Power Platform!

05:48
0 views

Available in Microsoft365

00:00:04

containers are essential elements that enable you

00:00:06

to create dynamic and responsive applications.

00:00:09

A container is used to group several controls together

00:00:12

and manage their layout automatically

00:00:15

depending on the size of the screen or the application window.

00:00:18

A responsive application is one that adapts to different screen sizes,

00:00:22

such as those of a computer,

00:00:24

tablet or phone,

00:00:26

while maintaining optimal usability and readability.

00:00:32

A container helps structure the organization of controls and power apps,

00:00:36

which can include buttons,

00:00:37

images,

00:00:38

or galleries.

00:00:40

Containers can even be nested,

00:00:43

allowing you to group other containers inside one

00:00:45

another for increased flexibility in user interface organization.

00:00:50

Thanks to containers,

00:00:51

it is possible to arrange these elements in a logical and dynamic manner,

00:00:55

which greatly simplifies their handling and integration within an application.

00:01:02

There are several types of containers and power apps.

00:01:05

The first is the simple container,

00:01:07

which is mainly used to group controls

00:01:09

together without enforcing a specific layout.

00:01:12

In addition,

00:01:13

there are dynamic containers,

00:01:15

which can be either horizontal or vertical.

00:01:18

These dynamic containers automatically manage the

00:01:20

arrangement of their child elements,

00:01:22

making the application more adaptable to various screen sizes.

00:01:26

They are frequently used to efficiently structure responsive applications.

00:01:31

Dynamic containers and power apps offer two possible orientations,

00:01:36

vertical and horizontal.

00:01:38

A vertical container stacks elements one below the other,

00:01:41

whereas a horizontal container arranges them side by side.

00:01:45

Choosing the appropriate orientation is crucial

00:01:48

for structuring the display of elements

00:01:50

and ensuring that the application adapts well to different screen resolutions.

00:01:55

To better understand the differences,

00:01:57

consider an example with 3 types of containers,

00:02:00

each containing text labels.

00:02:02

The simple container allows elements to be grouped without layout constraints,

00:02:07

and these elements can be moved manually.

00:02:10

In contrast,

00:02:11

elements inside a horizontal or vertical container

00:02:14

cannot be moved individually.

00:02:17

Modifications for these types of containers must

00:02:19

be made through the property panel,

00:02:21

which provides various settings such as direction.

00:02:25

Alignment

00:02:26

And justification.

00:02:29

Elements inside these containers automatically adjust

00:02:32

to the size of the container

00:02:34

according to the parameters defined.

00:02:37

When the available space within a container is insufficient to

00:02:40

display all elements in a single row or column,

00:02:43

especially for vertical containers,

00:02:45

you have two options.

00:02:47

You can enable scroll bars which allow the user to

00:02:50

scroll through the content without changing the initial layout.

00:02:55

Alternatively,

00:02:56

you can enable wrapping,

00:02:57

which automatically moves elements onto multiple lines,

00:03:00

providing a more compact and harmonious layout.

00:03:03

This approach helps ensure a smooth and adaptable interface,

00:03:07

no matter the space constraints.

00:03:10

You also have the ability to adjust the size,

00:03:12

position,

00:03:13

and appearance of the container,

00:03:15

such as modifying its color,

00:03:17

adding borders,

00:03:18

or inserting padding between the elements and the container itself.

00:03:24

Each element within a container can be adjusted individually after selection.

00:03:29

If the container's alignment is not set to stretch,

00:03:32

you can manually modify the height and width of each item.

00:03:36

Otherwise,

00:03:36

these dimensions adapt automatically to the container size.

00:03:42

Setting minimum height and width values ensures that elements do

00:03:45

not become too small as the available space decreases.

00:03:50

For instance,

00:03:51

imagine creating a horizontal container that serves

00:03:53

as the main structure for your layout.

00:03:56

Inside this container,

00:03:57

you add two text areas to display interactive content.

00:04:01

To ensure proper vertical alignment,

00:04:03

you select the stretch option

00:04:05

so that each text area occupies the

00:04:07

entire vertical space available within the container.

00:04:11

As a result,

00:04:12

both text areas will fill the vertical space of the container.

00:04:16

To better visualize the effects of flexible sizing,

00:04:19

you add 20 pixels of padding all around,

00:04:21

which ensures sufficient space around the

00:04:23

elements and improves readability and aesthetics

00:04:26

by preventing the elements from being too close to the edges.

00:04:30

Next,

00:04:30

you set a minimum height for the first label,

00:04:33

ensuring it remains easily readable

00:04:35

and does not become too small if the container is reduced.

00:04:40

Thus,

00:04:40

when you decrease the height of the container,

00:04:42

the label will not shrink below the defined minimum.

00:04:46

You then enable flexible width for the first label and define a minimum width,

00:04:51

allowing it to adapt to changes in the container's width,

00:04:53

while ensuring it does not become too narrow to read.

00:04:57

When you resize the container,

00:04:59

the label automatically adjusts its width and

00:05:01

height to follow the container's dimensions,

00:05:04

but it will not shrink below the minimum values you have set.

00:05:07

As the container size decreases,

00:05:09

the label will shrink accordingly until it reaches its minimum height and width,

00:05:14

at which point it will stop shrinking further.

00:05:17

This approach ensures readability and consistent presentation at all times.

00:05:22

This tutorial has introduced the essential basics for

00:05:26

understanding and using containers and power apps.

00:05:28

While the explanations have been mainly theoretical,

00:05:31

they lay the foundation for building a

00:05:33

clear and optimized structure for your applications.

00:05:37

In the following tutorials,

00:05:39

these concepts will be put into practice with concrete examples to

00:05:42

better illustrate how to use them in real world scenarios.

Mandarine AI: WHAT YOU SHOULD KNOW

RELATED COURSES This tutorial is part of the following courses

0 Views

Video Training Microsoft PowerApps : Design dynamic and engaging user experiences

Enhance your mastery of power apps with this intermediate module. Learn how to structure responsive interfaces, improve data visualization, ...

ALL COURSES