Power Apps - Structure your layout Tutorial

Unlock the secrets to a perfectly structured Power App layout in our tutorial 'Structure Your Layout'. Discover how to use containers for a dynamic design that adapts effortlessly to any screen size. Learn essential tips for creating a user-friendly interface with efficient organization of elements. Dive in and enhance your low-code skills today!

04:13
0 views

Available in Microsoft365

00:00:01

we will learn how to structure an application using containers

00:00:04

to ensure a dynamic and adaptable layout.

00:00:07

To begin,

00:00:08

it is essential to create a main container.

00:00:12

The main container allows a Power App's application to adapt

00:00:15

to different screens because it acts as a flexible structure

00:00:19

that automatically adjusts the size and arrangement of the elements it contains.

00:00:23

By setting its dimensions according to its parent element,

00:00:26

which is the screen,

00:00:28

it ensures that the app always occupies all the available space

00:00:32

without the need for manual adjustment.

00:00:35

Let's take the example of an application divided into three distinct sections,

00:00:40

the menu,

00:00:41

the header,

00:00:42

and the data.

00:00:43

If we use a vertical container,

00:00:46

the header and data will be correctly organized,

00:00:49

but the menu bar will be cut off.

00:00:51

Therefore,

00:00:51

the vertical container will not be suitable for our needs.

00:00:55

On the other hand,

00:00:56

a horizontal container allows these elements to be

00:00:59

integrated in a smooth and consistent way.

00:01:03

Once this container is inserted,

00:01:05

we will use the properties panel to define certain essential parameters.

00:01:10

First,

00:01:10

it is recommended to set the X and Y coordinates to 0,

00:01:14

so that it aligns perfectly with the top left corner of the main screen.

00:01:19

Next,

00:01:19

the width and height should match the dimensions of the main screen.

00:01:22

To do this,

00:01:23

simply use the parent dot width function for the width

00:01:26

and parent height for the height in the formula bar.

00:01:31

This method ensures that the main container automatically adapts to

00:01:34

the screen's dimensions without the need for manual adjustment.

00:01:38

Once the main container is configured,

00:01:40

it is necessary to add the sub-containers that will structure the application.

00:01:45

Two containers are essential.

00:01:48

One dedicated to the menu bar

00:01:49

and another containing the header and data.

00:01:53

Before inserting them,

00:01:54

make sure that the main container is selected,

00:01:57

as these elements must be placed inside it.

00:02:00

The choice of orientation for the subcontainers depends on

00:02:03

the arrangement of the elements within the application.

00:02:06

Since the menu is structured vertically,

00:02:08

it is preferable to use a vertical container for it.

00:02:13

Likewise,

00:02:13

as the header and data are organized in columns,

00:02:16

a vertical container is also ideal for this part.

00:02:21

By default,

00:02:22

these two containers have equal sizes,

00:02:24

but you can customize their dimensions to better match the desired layout.

00:02:30

For the menu,

00:02:31

the flexible width should be disabled,

00:02:33

so you can set a fixed size,

00:02:34

for example,

00:02:35

80 pixels.

00:02:37

As for the 2nd container,

00:02:39

it will automatically take up the remaining available space,

00:02:42

ensuring a harmonious display.

00:02:46

Within the container,

00:02:47

grouping the header and the data,

00:02:49

2 new containers must be added to ensure a balanced distribution of the elements.

00:02:54

One container will be used for the header.

00:02:59

And another for displaying the data.

00:03:03

If you make a mistake in the orientation of the containers,

00:03:06

it can be corrected at any time,

00:03:08

as Power Apps allows you to modify this property

00:03:11

even after insertion.

00:03:14

Once the containers are created,

00:03:16

the height of the header can be adjusted by disabling its flexible height

00:03:20

and assigning it a fixed value suitable for displaying

00:03:23

essential information.

00:03:25

For better readability and a more spacious layout,

00:03:28

it is advisable to add spacing between the different sections of the application.

00:03:32

These gaps help distinguish the elements and improve the

00:03:35

visibility of the information displayed on the screen.

00:03:38

By setting the spacing value in the container properties,

00:03:41

you can achieve a smoother visual separation

00:03:44

between the different sections of the application,

00:03:46

thus optimizing the user experience.

00:03:49

By following these different steps and

00:03:50

applying the principles related to containers.

00:03:53

You can design a Power App's application that is

00:03:56

perfectly structured and adaptable to any type of screen.

00:03:59

Containers provide flexible organization and ensure a

00:04:02

harmonious arrangement of the application's elements.

00:04:06

Thanks to this approach,

00:04:07

your application will be ergonomic and optimized

00:04:09

to provide a smooth experience for users.

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