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

194 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