Platform Banner

Power Apps - Prepare your dynamic galleries Tutorial

Unlock the full potential of your Power Apps with our tutorial on 'Prepare Your Dynamic Galleries.' Learn how to seamlessly link forms with gallery data, navigate between screens, and manage submissions with ease. With a focus on low-code techniques, this video is perfect for intermediate users looking to enhance their skills. Don't miss out on transforming your information management process!

03:27
147 views

Available in Microsoft365

00:00:07

to simplify information management.

00:00:10

To start,

00:00:11

select the button within your gallery and configure its

00:00:14

on select property to capture the selected item.

00:00:18

In this step,

00:00:19

you will create a variable intended to store

00:00:21

the data associated with the clicked item.

00:00:23

We will cover the use of variables in greater

00:00:25

detail in an advanced section of the tutorial.

00:00:29

The formula used is as follows.

00:00:31

This formula assigns the selected items data

00:00:35

represented by this item to the variable wire task,

00:00:38

thereby allowing that data to be transferred to another screen.

00:00:42

Additionally,

00:00:43

it is necessary to navigate to the screen containing the

00:00:45

form as soon as the user clicks the button.

00:00:49

To do this,

00:00:49

combine two formulas using the semicolon operator

00:00:52

and add the following formula.

00:00:55

This command allows you to navigate to screen 3 with a fade transition effect,

00:01:00

creating a smooth and pleasant navigation experience for the user.

00:01:04

Next,

00:01:05

configure your form by setting its item property

00:01:08

to the variable var task.

00:01:10

This assignment enables the form to auto-populate

00:01:13

with the data of the selected gallery item.

00:01:17

Add two additional buttons,

00:01:19

one label cancel and the other save,

00:01:21

to handle the cancellation and submission of edits respectively.

00:01:25

Although layout optimization using multiple containers is recommended,

00:01:30

as explained in a dedicated tutorial,

00:01:33

We will simply insert these buttons here to save time.

00:01:37

Making sure to update the button text to clearly indicate their functions.

00:01:42

For the save button set its own select property with the following formula.

00:01:46

This formula submits the form name Form 3,

00:01:50

and sends the entered data to the appropriate data source.

00:01:53

Additionally,

00:01:54

in the on success property of the form,

00:01:57

that is,

00:01:58

the action triggered upon successful submission,

00:02:01

You must insert the following formula.

00:02:04

This command performs 3 combined actions.

00:02:07

It clears the variable VAR task to prevent data collision,

00:02:11

executes the back function to return to the previous screen,

00:02:15

and displays a success notification indicating

00:02:18

that the tasks were saved correctly.

00:02:21

The cancel button should be configured with the

00:02:23

following formula in its on select property.

00:02:26

This resets the form using reset form,

00:02:30

clears the variable var task once again,

00:02:33

and navigates back to the previous screen,

00:02:35

canceling any edits in progress.

00:02:38

Once these configurations are in place,

00:02:41

test the app to confirm that the

00:02:42

gallery button correctly captures the selected item.

00:02:46

And that the form accurately reflects the data passed through the variable.

00:02:50

Also confirmed that the submission and cancellation actions work as expected,

00:02:55

ensuring that both navigation and notifications are error free.

00:03:00

This tutorial has demonstrated how to link a form to

00:03:03

gallery by configuring a button to create a variable,

00:03:07

navigating between screens and handling

00:03:09

the submission or cancellation of changes

00:03:12

using simple and effective formulas.

00:03:15

In the final part of this tutorial,

00:03:17

we will explore how to add a new entry directly within the form

00:03:20

to further extend the capabilities of your Power App's application.

Mandarine AI: WHAT YOU SHOULD KNOW

RELATED COURSES This tutorial is part of the following courses

237 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