Power Apps - Add a form to your app Tutorial

Unlock the full potential of your Power App with our tutorial, "Add a Form to Your App"! Discover essential steps for transitioning from simple data views to dynamic forms that allow data editing and addition. We dive into creating a seamless user experience using buttons, containers, and edit forms. Perfect for intermediate users looking to level up their low-code skills! Don't miss out!

02:43
174 views

Available in Microsoft365

00:00:06

steps to move from simple data viewing

00:00:08

to editing and adding items.

00:00:10

To interact effectively with your data,

00:00:13

the use of forms is essential.

00:00:16

During the initial customization of the gallery,

00:00:19

the control used was not clickable,

00:00:21

which limited interactions with the display data.

00:00:25

To resolve this,

00:00:26

start by selecting the sub gallery that displays the data

00:00:30

and switch to edit mode.

00:00:32

Then insert a button and place it at the top of the hierarchy.

00:00:37

Set its width and height according to the template's default values.

00:00:44

And set its X and Y positions to 0.

00:00:49

Remove the button's text.

00:00:53

Apply a fully transparent fill color.

00:00:56

And also adjust the hover and press colors using semi-transparency

00:01:01

so that the data remains visible during interaction.

00:01:08

To enable data editing,

00:01:10

add a new screen to your application.

00:01:13

And insert a main container whose height and width match the template values.

00:01:19

With X and Y properties set to zero.

00:01:24

Next,

00:01:24

insert an edit form and immediately select the data source,

00:01:28

such as the task list,

00:01:30

which will be automatically recognized

00:01:32

and its fields will be displayed upon insertion.

00:01:35

In the layout tab,

00:01:36

you can choose the orientation of the form for a harmonious display.

00:01:41

The fields tab allows you to add an additional field such as project ID

00:01:45

and rearrange the order of the fields by simply dragging and dropping.

00:01:51

Meanwhile,

00:01:51

the properties panel allows you to set the number of columns,

00:01:55

we'll set it to 2 columns here,

00:01:57

as well as adjust size and color options to meet your stylistic needs.

00:02:02

When specific adjustments are needed,

00:02:04

each field can be manually modified.

00:02:07

For example,

00:02:07

to ensure that the title field occupies only one column,

00:02:11

selected and adjust its width so it completely fills a single column,

00:02:16

which will automatically move the start date field to a new row.

00:02:20

You can apply similar modifications to the

00:02:23

other fields to achieve the desired layout.

00:02:26

At this stage,

00:02:26

the form is not yet functional,

00:02:28

as it is not connected to a gallery for full interaction with your data.

00:02:33

In the next tutorial,

00:02:34

we will see how to connect this form to a gallery

00:02:37

to enable hands-on interaction with the data present in your application.

Mandarine AI: WHAT YOU SHOULD KNOW

RELATED COURSES This tutorial is part of the following courses

E-learning Intermédiaire

Vu 307 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