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
206 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

E-learning Intermédiaire

Vu 305 fois

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, create reusable components, and automate interactions with dynamic forms. This course will enable you to develop more complex applications while maintaining excellent usability.

ALL COURSES