Power Apps - Reusable components Tutorial

Unlock the power of reusable components in Power Apps! Discover how these custom elements save time, ensure design consistency, and simplify updates with every change reflecting across your application. From creating a dynamic menu to flawless integration, this video guides you through every essential step. Perfect for intermediate users eager to enhance their low-code skills!

04:16
0 views

Available in Microsoft365

00:00:05

integrate into multiple screens on Power App's applications.

00:00:09

They offer several advantages including considerable time savings,

00:00:13

consistent design,

00:00:14

simplified updates,

00:00:16

since any changes made to the component are

00:00:18

reflected in all instances where it is used.

00:00:22

As well as better code organization and

00:00:23

a more optimized structure for the application.

00:00:28

To illustrate this approach,

00:00:29

we will create a reusable menu.

00:00:32

Everything begins with the creation of a component.

00:00:36

In Power apps,

00:00:37

simply click on component in the left menu

00:00:40

and select new component.

00:00:43

Once added,

00:00:44

it can be renamed by double clicking on it and giving it a relevant name.

00:00:49

Defining the dimensions plays a crucial role in the adaptability of the component.

00:00:54

For the width,

00:00:55

a fixed value of 80 is set to ensure

00:00:57

a constant size and to avoid unexpected adjustments.

00:01:02

However,

00:01:02

the height is dynamic and defined by app height

00:01:06

rather than parent height

00:01:07

because when creating the component,

00:01:09

it does not yet have a specific parent.

00:01:12

Using app height ensures adaptation to the overall size of the application,

00:01:17

regardless of the elements that will host it later.

00:01:20

Once inserted into the application,

00:01:22

it is possible to modify its dimensions and use parent.

00:01:25

height if you want to adjust it based on the container that holds it.

00:01:30

The background can also be changed to better

00:01:32

fit the overall design of the application.

00:01:36

Adding a vertical container is essential to logically organize the menu elements.

00:01:41

The choice of a vertical container is explained by

00:01:43

the fact that menus are generally displayed in columns,

00:01:46

which makes navigation easier.

00:01:49

To ensure optimal positioning,

00:01:51

the X and Y values are set to zero,

00:01:53

which allows the components to be perfectly aligned from the start.

00:01:58

To ensure proper sizing,

00:01:59

the width and height are set according to the parent.

00:02:01

width and parent.

00:02:02

height properties,

00:02:03

ensuring that the menu occupies all the available space.

00:02:09

For a harmonious layout,

00:02:11

the vertical and horizontal alignment of the elements

00:02:13

is centered to achieve a uniform presentation.

00:02:17

Inserting icons is an essential step in building the menu.

00:02:21

In the insert tab,

00:02:22

simply search for the name of the desired icon and click on it to add it.

00:02:34

The alignment of the icons can be adjusted within the container,

00:02:38

and for better readability,

00:02:39

spacing is added between them.

00:02:43

To modify the appearance of the icons,

00:02:45

several options are available.

00:02:47

You can select them individually or as a group by holding the shift key,

00:02:51

which allows you,

00:02:52

for example,

00:02:53

to change the color of several icons at once.

00:02:57

Power Apps offers various customization possibilities,

00:03:01

such as modifying the size,

00:03:03

the border,

00:03:04

or even adding animation.

00:03:07

Once the component is ready,

00:03:08

it can be exported to be reused in other applications.

00:03:12

To do this,

00:03:13

simply click the export button.

00:03:16

Download the file.

00:03:18

And save it to the desired location.

00:03:21

It is important to note that exporting includes

00:03:24

all the components created in the application.

00:03:28

To import a component,

00:03:30

just use the import option.

00:03:33

Select the corresponding file

00:03:35

and confirm its integration.

00:03:38

The final step is to integrate the

00:03:40

created component into a Power App's application.

00:03:43

To do this,

00:03:44

return to the main screen.

00:03:46

Choose the parent container.

00:03:48

Then go to the insert tab,

00:03:50

select custom,

00:03:51

and finally choose the desired component.

00:03:54

Creating reusable components and power apps helps optimize

00:03:57

the structure of applications by ensuring better organization,

00:04:01

increased productivity,

00:04:03

and simplified maintenance.

00:04:05

By following these steps,

00:04:06

you will be able to design functional,

00:04:08

consistent,

00:04:09

and scalable interfaces

00:04:11

tailored to the specific needs of your projects.

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