Up next in 10
Join this session to learn how to leverage the Gallery control in Power Apps. A Gallery control can show multiple records from a data source, and each record can contain multiple types of data.
We will cover building galleries, connecting to forms, filtering galleries, styling galleries and much more with demos & best practices.
About Speaker:
My name is Reza Dorrani. I am a Microsoft Business Applications MVP and a Principal Consultant at Catapult Systems.
I am an international speaker, trainer, Houston Power Platform User Group Leader, Microsoft flow all-star awardee & Power Apps and Power Automate community dual super user.
My passion is to share my knowledge and learnings around Office 365, Power Apps, Power Automate, SharePoint, Teams. etc.
Conference Website: https://www.2020twenty.net/power-platform-virtual-conference/
C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com
#conference #powerplatform #powerapps #csharpcorner
Show More Show Less View Video Transcript
0:00
Okay, so, well, we are all virtual
0:06
This is pandemic time. I've come in with my pandemic hair, so don't judge me
0:11
Thank you for joining us. I hope that this last session, I keep it interesting
0:19
I promise I won't bore you guys with slides. In fact, I have very few slides
0:24
It's all going to be demos. I'll try and build things live. I'll try and keep this interesting, intriguing, and crisp
0:32
So let's get started with the session, working with Power Apps, galleries
0:38
Simon already gave my introduction. I don't think I can beat that, but just a few quick words
0:43
I'm a Microsoft BizApps MVP and a Microsoft certified trainer. I focus on everything around the Power Platform
0:50
and in the Microsoft 365 space. I do have a YouTube channel wherein I video blog about things
0:57
So if you've never checked it out, here's your chance. Go check it out
1:01
You can also connect with me on Twitter. That's my Twitter handle
1:07
The learning objectives for today's short session, gallery control, we will look at when
1:13
to use the gallery control, what does the gallery control provide to us in Power Apps, leading into some examples
1:20
of how you can style your galleries, leading into how we can even leverage the gallery
1:27
as an editable grid-like experience in Power Apps. Of course, all of this in the form of demos
1:35
Finally, I will close it up with a brief completion message on why you should be using galleries
1:44
What's the gallery control in Power Apps? A gallery control in Power Apps basically allows you
1:52
to show multiple records from a data source. And each of these records can have multiple types of data
2:01
that you can showcase in galleries. Gallery is more like a repeating table
2:06
For folks who are accustomed with InfoPath, they would have known about repeating tables
2:11
Galleries work on similar lines. And each data field that appears in a gallery control
2:18
you can configure that. you can style that based on your needs
2:25
The gallery, of course, acts like a repeating control. And that's the reason why all the items in the gallery
2:31
follow the same style that you've defined as part of the template item of the gallery
2:37
And the template of the gallery is nothing but the first item in your gallery
2:43
Here's a tip. When do I work with galleries? The moment you're dealing with multiple records
2:50
or a collection of data, anytime you're dealing with something in Power Apps that is more than one
2:56
just go to galleries. Don't think twice. I spoke about styling galleries
3:03
The out-of-the-box gallery styles that are available, they are good as starter resources
3:10
But ideally, in production scenarios, you would like to style your galleries accordingly
3:16
And here are some examples of how you could potentially style your galleries
3:22
You can build horizontal galleries. You can build vertical galleries. You can build galleries that look like cards
3:31
You can build galleries that work like grids or Excel like editable tables
3:38
You can style and design galleries the way you like it. At the same time, one of the most powerful capabilities
3:47
and something that I am using more and more in my projects
3:53
is the option of leveraging the gallery as an editable grid. Let's face it, everybody likes to work with their data
4:00
in an Excel-like, grid-like fashion where they can quickly modify multiple items
4:06
and push their changes out of the data source in one go. And that's where galleries come in extremely, extremely handy
4:12
where you can create that grid-like experience for your users and perform full CRUD operations, that is, create, read
4:22
update, and delete against your data, and all of this in a very Excel-like fashion in PowerApps
4:33
Now, let's look at all of this and what galleries are and how we can work with this all in the form of demos
4:41
And Simon, you will have to be my prompter here. Can you see my screen that shows Power Apps right now
4:50
Simon, you may be on mute. Okay. All right. So out here in make.powerapps.com, in the Maker Portal
5:01
let me go ahead and build a very simple app. I will call this my Work Progress App
5:08
It's an app that basically tracks the progress of my work. PowerApps requires you to work with data sources
5:16
Ideally, you want to store your data. For today's example, I have a very simple SharePoint list that I created right here
5:26
All I do in this list is I just track my work items
5:29
I have different column types here that I have defined categories, the progress of my work
5:35
These are choice columns, date columns, priority columns, and so on and so forth
5:40
Now, out here in my PowerApp, I would like to showcase that data to my user, basically the data
5:48
that's living in my data source. In my case, my data source is the SharePoint list
5:54
So if I head back to that SharePoint list, which is my work progress tracking SharePoint list
6:00
the first step for me in my PowerApp would be to connect to my data source
6:04
So I will go ahead and add a new connection in this case
6:08
connecting to SharePoint. I'm going to connect to SharePoint, enter the URL of my SharePoint site
6:16
click Connect, and my list is called Work Progress Tracker List. I'm going to select that and click Connect
6:24
All I've done right now is in my PowerApp, I've just connected to my data source
6:28
Now, as part of my PowerApp, I will go ahead and apply a theme
6:33
So let me pick this lavender theme. Let me add a simple header control for my app
6:39
nothing extravagant here. I believe Deepak showed you how to build a component for headers, so please do that
6:47
But for now, for this demo example on galleries, just going to add something called as
6:51
the work progress tracker app. I'm going to position this in the center
6:58
maybe give this a background color of purple, give this a text color of gray
7:04
let me increase the size. Okay, so my screen is very simple
7:09
I have a theme, I have a header in place. Now I want to showcase data from
7:14
my SharePoint list in a gallery. A SharePoint list will have multiple records and multiple records
7:21
meaning you have more than one. The moment you hear more than one
7:25
think about galleries. To work with galleries, if I go to insert and head over to the gallery control
7:31
there are six types of layouts that are provided to you as part of the gallery controls
7:38
Once you make a selection, you cannot swap over to the other type
7:43
you would have to delete that control and re-add the next control
7:49
In this case, I'll keep it very simple. I'll just pick the first option that I see here
7:53
which is a vertical gallery which will stack my data vertically. I'll connect to this and the moment I add
8:01
this gallery, IntelliSense guides me to adding or connecting this to any collection or data source that I have as part of my app I only have one which is my work progress tracking list So I will go ahead and connect to this list Just like that this gallery gets added as part of
8:19
my app and it is connected to my SharePoint list. Now, if you observe the styling on this gallery
8:28
on the right-hand side, there's a property called layout. Right now, it's using the style that has an image control
8:35
and it has a couple of label controls and an icon. If I head over to the tree view
8:41
and if I open the gallery control, I can see all those controls right here
8:45
Here's my image, here's my title, subtitle, these are labels, here's the next arrow
8:51
and here's the separator that basically separates every record that it is showcasing here in the gallery control
8:58
I can head over to the layout and I can actually change my layout
9:03
there are multiple layout types that are provided here that I can choose from
9:07
And let's say I change this layout type here to Title, Subtitle, and Body
9:12
And just like that, this gallery now has three label controls based upon the layout
9:18
that I had selected. Now, this gallery control, as I said, is a repeating control
9:27
So if you would like to change any behavior or maybe build your own layout style
9:33
you would have to modify the gallery. And to modify the gallery, I would modify the template item
9:39
which is nothing but the first item in the gallery. And to do that, if you look at my gallery right here
9:45
on the top left, there is a small little pencil icon that says, edit the gallery
9:50
If I select this, if you observe, it has gone ahead and highlighted the first item
9:55
in the gallery, the context. And what that means now is I'm in the context
10:00
of the template item and whatever modifications I make here will be reflected on all the other items of the gallery
10:08
So let's say in this case, the icon on the right hand side
10:13
I don't need it. So I'll just go and delete this. The moment I do that, if I preview this app
10:19
observe that all the items in the gallery have followed suit. If I go back to the template item and let's
10:25
say I select this title or this item that shows me the progress value of my data
10:32
If I would like to see the priority value in this case, I can go ahead and replace this with priority.value
10:41
Now if I preview the app, it's showing me the priority value for all the items in my gallery
10:48
So the first item, which is your template item is what you can modify
10:54
And you're not limited to the layout styles. This is Power Apps. You have the full power
10:58
So if I go ahead and insert another label, I can insert a label, place it right here
11:04
Maybe I would like to add a button. I can add the button right here
11:08
I can make any modification I want to the gallery because I have complete command over the template of the gallery
11:18
If we continue looking at the properties of the gallery, So if I select the gallery context and go to the properties, we have layout
11:25
That's basically what you will choose to start with. After that, there are some other important properties that I would like you to focus on
11:33
One of them is called the template or the wrap count. The wrap count right now is showing as one
11:41
It's a vertical gallery. and by one what I mean is or what Power Apps means is you have one record per row because this is a
11:50
vertical gallery. Now if I span the width of this gallery across the screen and let's say I span the
11:56
height as well. If I preview my app you see there's a lot of real estate available on my screen but
12:02
the template has gone ahead and just placed one record per row. If I would like to change that
12:09
all I have to do is change the wrap count. So maybe I want to wrap this to two items
12:14
And now if I head over back to my gallery and maybe reposition my partner
12:18
and get it into the available real estate for my template, which is now smaller
12:23
if I preview the app just by changing the wrap count, the number of items that are being represented per row
12:30
has changed to the wrap count. So you can change the wrap count
12:34
to define how many items will be presented in each row in case of a vertical gallery
12:40
In case of a horizontal gallery, they would be placed vertically once you change the wrap count
12:46
So you can change the wrap count. If I preview my app
12:50
I do see the scrolling experience right here. And you can even turn the scrolling experience off
12:56
There are properties available for that. So I can turn on or turn off the scroll bar
13:01
I can even go ahead and add a scrolling effect that acts like a navigation item
13:05
So you see on the bottom now, Instead of a scroll bar, I get this little navigation kind of an experience so I can change that style as well
13:15
Additionally, there's also something known as transition. So when the user hovers over a specific record in a gallery, you can define a special effect like pop or push
13:28
So let's say I pick pop and I preview my app. The moment I hover on a specific record, you will see that it kind of pops out
13:37
Again, this is a transition effect that is baked in natively to a gallery control that
13:42
you can leverage to enhance your user experience further. So these are some of the key properties of a gallery that you need to be aware of
13:53
You can change the layout, you can change the template, you can play with the template
13:57
change the wrap count, and create amazing experiences for your users. Now, of course, what I just built is not an amazing experience, but let me show you
14:06
an example of a sample app that I built that has five different gallery styles that you can choose
14:14
from and apply to any of your apps. So let me swap over to my second tenant here. The first step
14:21
what I will go through is I will show you the five different styles of galleries, and then we will
14:25
walk through how I built some of these gallery experiences. So here's my first gallery experience
14:32
I'm calling this my gallery lookbook. And right here I have a horizontal gallery
14:39
So basically a gallery in which my items are stacked horizontally from my data source
14:44
In this case, my data source is Excel. And right here in this gallery, I have that same navigation
14:52
experience that I leveraged. If you notice on the right hand side, if I select, it's going to navigate me across all the items in my gallery
15:00
I also have used a property to change the color of the gallery
15:04
So right now, if you notice, the dark mode is on for my screen. I can change this and turn this off
15:11
And now it's going to apply the theme or the brand of my app or my site right here to my gallery experience itself
15:19
I also have a button experience here wherein I added some timer-based logic in Power Apps
15:25
to show or hide certain sections in a gallery depending upon whether this button is clicked
15:33
or not. So if I select this, you will observe how it opens certain elements of my gallery depending
15:42
upon whether this button was selected or not. So a very simple experience of presenting data to users
15:52
for anyone who has conducted or gone through the app in a day experience for PowerApps
15:59
the data source here that I've leveraged is exactly that. And in app in a day, when you walk
16:04
through the experience, they show you the standard gallery experience of that vertical gallery
16:08
And this is another design or another style of exactly that same data source
16:14
And how did I build this experience Well here my screen As part of the screen I have have a very simple horizontal gallery and I added that by going to Insert Gallery and selecting the Horizontal Gallery experience
16:30
As part of this gallery, I added my own control. So I have an image control that's sitting right here
16:37
I have a label control that's sitting right at the top. That's the title of my item
16:42
Then I have a hidden container control. There's a hidden control that's sitting behind these controls
16:49
If you look at the position of this, it's behind my image and behind my label control
16:55
This has all those other properties that are basically hidden behind these controls
17:02
The next step was for me to show or hide the values of this container depending
17:08
upon whether this button is clicked or not. When I select this button
17:12
all I'm doing is setting a variable to true or false, basically changing the behavior of a variable right here
17:19
For the container control within this gallery experience, if I head over to the property for not visible
17:28
but if I head over to the property for y, basically the y-axis
17:32
which is my vertical axis of my screen. If you notice the y-axis is going to
17:38
change based on a value of a hidden timer control. I have a hidden timer control that kicks off
17:45
Only when this variable is set to true, as the time increases, the Y property starts changing
17:51
and those elements start dropping down. And that's the reason why when I select this button
17:57
it's that experience of this data showing up, but in reality, it's just the positioning of the elements
18:04
that I'm playing with. So you can create experiences which have timer controls
18:10
and some sort of visual appeal is what you could add to your galleries with very simple formulas
18:19
like I just demonstrated right here. This entire app that I'm demonstrating right now
18:24
is available for you to download for free and explore as well
18:28
If you go to the community forums, I have provided this right there
18:32
If you go to my YouTube channel, I have a video on this gallery lookbook experience
18:37
I haven't explained the details that I'm explaining right now. But as part of that video, there's
18:41
a link to download the sample app. So do go ahead and check it out
18:45
So that's the first experience. I'll move over to the second experience of my gallery lookbook
18:52
Here is an experience of my items formatted as data cards. In this case, I am leveraging
19:01
the Microsoft Dataverse as my data source. If you observe right here
19:07
how did I set up this gallery now? Now, as part of this lookbook number two
19:12
I have this gallery right here and this gallery is nothing but a vertical gallery
19:17
And in a vertical gallery, if I would like to set multiple records horizontally
19:23
what I have to do is change the wrap count as I explained earlier
19:26
As you can see right here, I've changed my wrap count to four
19:30
That's the reason why I see four records for every row in my gallery
19:36
The next thing what I did right here is as part of this gallery
19:40
I just went ahead and added my specific controls. I have my label control, I have my label controls, my shape control, I added all of this
19:50
And to create that card effect, I inserted a very simple shape. And to this shape, I applied a border
19:58
which is of color black and the border size is one. I can even change the border size to maybe two
20:05
change the style to dotted layout. If I preview this, you will see how my cards are now showing
20:10
up in that dotted fashion. So it's basically a rectangle control that's sitting at the back
20:15
that is creating that effect of a card whereas in reality it is nothing but a very simple
20:22
straightforward gallery experience. And for the status of my item, so based on the status value
20:30
of my data, I am showing the bar on the top that shows the color. So you see if it's not started
20:36
the color is blue. For items that are completed, the bar color on the top is green
20:42
How did I go about doing that? Well, once again, I use one of the shapes
20:47
which is the rectangle shape that you can add right here from the icons right here at the bottom
20:52
For the shape, there's a property called fill. For this property, all I did is I added
20:59
a very simple if condition that says, check the status of the item
21:03
If the task status is in progress, put the color orange. If it is deferred, put the color gray
21:09
If it is completed, put the color code for green. Else, the only option in my case is not started
21:15
so put the color blue. And just like that, I transformed a very simple gallery
21:21
experience into a complete card-like experience that I'm showcasing right here. So this is gallery lookbook option number two
21:31
Let me move over to style number three. Now, it's not just about styling
21:37
It also has to do with the fact that you can filter your data in your galleries
21:43
using some of the options that are provided right here. Now, in this case, I have a very simple gallery here
21:50
which is once again a vertical gallery, which has a wrap count of three
21:54
So it shows three items. Once again, it has that card-like experience
21:59
So needless to say, I would have used that same feature as before, wherein
22:04
And if you look at my gallery on the left-hand side right here
22:07
I have that rectangle shape that has that little grayish tinge background to it
22:12
And that's why it is showcasing that effect. I have my navigation
22:18
I even have the effect of pop. So when I hover on the record, it kind of pops up
22:24
Now, not just showcasing or styling galleries. You would also like to provide filtering options to your users
22:32
so they can filter the data that is being showcased in the gallery
22:37
So if you look at my gallery control right now, it's showcasing me all my records from my data source
22:42
which in this case is Microsoft Dataverse. But what if I would like to change this
22:47
I would like to change this experience and show me all the data that has the priority high
22:53
The moment I pick the priority high in my dropdown, if you observe my gallery filtered the data, right
23:00
If I go ahead and check the task status, so show me everything where the task status is
23:04
completed and the priority is high. The moment I pick completed, this will start applying
23:10
my filter against my data source. I'm running in a bad network connection right now
23:15
and I can see that the gallery is trying to load. There you go. It's gone ahead and filtered my data
23:20
which is against my data source in this case, and applied it to the gallery experience
23:26
Now, how did I go about adding these filters and connecting, more importantly, connecting these filters to my gallery
23:34
Now, the filters on the top that you see right here, are standard controls that I dropped as part of my PowerApp
23:41
This is a text box, this is a combo box control, this is a gallery again that I added for adding options for filtering
23:50
If you want to check how I build this out, I have a full video on this as well
23:54
and I have a few date controls that I added. Now the key here is how do I filter
23:59
my experience of my gallery based on the selections that the user makes in those filters on the top
24:06
The gallery has a property called items. So if I select my gallery control right here
24:12
which is my main gallery, if I head over to the items property
24:16
you will note that I have gone ahead and applied formulas here
24:21
If I just apply my data source, which is called tasks. It will show me all my data
24:27
But I would like to even go ahead and filter my data So for that I have gone ahead and used the filter function in Power Apps to filter my data based upon the selections
24:39
that the user makes in the filters associated with the gallery. So right here, I have my filters that I have defined
24:46
So for example, for the priority value in my gallery, if that matches the priority value
24:52
that the user selects in this combo box control right here, then you go ahead and filter the data
24:57
and show me that data. So all I've done right here is very simply added
25:02
multiple filters to apply different filters to the gallery experience. So if I preview my app, once again, start making selections
25:11
Let's say I would like to search for everything that has the word learn in it
25:16
As I type learn, it applies that filter to my data source
25:19
and gets me the data and presents it right here in my gallery experience
25:25
That's gallery lookbook option number three, which is applying data cards to your gallery with filters
25:32
Next one is around adding pagination to your gallery control. Now, PowerApps galleries do not come with the pagination experience by design
25:45
but you can create a pagination-like experience by adding formulas to your gallery control
25:51
So if you look at my gallery control right here, when I log in or when I'm viewing this screen
25:57
it's showing me the data in my gallery and the pagination size right now is five
26:01
If I change this to 10, it will show me 10 records. If I change this to 15, it's going to show me 15 records
26:07
Now in my data source, I believe I have like 14 records
26:11
So if I change this to five, I'm viewing only five records
26:15
If I would like to change this, I can then start paginating paginating through the different pages of my gallery
26:21
So at the bottom, it's showing me that I have three pages of data
26:25
If I click Next, it takes me to the next set. Then it takes me to the next set
26:29
So I'm basically scanning through the different records that are a part of my data set right here
26:37
To create this kind of an experience in galleries, what I did here, at least in this scenario here
26:44
is a little bit of a show-hide logic. I have a standard gallery control that is hidden
26:52
that is connected to my data source. Then I created my own gallery control that connects to that hidden gallery
26:58
Based on the items in that hidden gallery, I calculate and do some maths here
27:03
as you can see, to calculate how many items I need to show
27:06
what is the page size, how much data has been returned by the data source
27:11
And how do I add all this logic to create that pagination
27:14
like experience for my galleries? Yes, you have to do work. Pagination is not an inbuilt feature in galleries
27:23
But with the power of a little bit of maths, you can easily create these kind of experiences
27:29
for your power apps. Once again, if this is something that you are interested in
27:33
I have a full video on how to create pagination with galleries
27:37
So go ahead and check that out. The final option that I would like to demo today is an editable grid-like
27:47
experience in Power Apps, very similar to Excel. So right here I have a data
27:55
source, in this case it's SharePoint, and I am showing the data from a SharePoint
28:00
list right here in this experience. This is also a gallery control and as
28:06
As part of this gallery control, I have my controls that I have added which are currently
28:12
in view mode. So I can change the mode of my controls and I'll show you how
28:16
If I click Edit, the mode of my controls change to Edit Mode
28:20
So basically, here's a button to change the mode of those controls, view or edit. Okay
28:25
If I click Edit, this gallery is now editable. I can make modifications
28:30
And make modifications in a very Excel-like fashion. If I select this record, click tab
28:34
it will start having through the different records of my dataset. I can make changes on the fly
28:40
so sure, change the status to medium, change the status to medium, make this critical, make this low
28:45
change this to in progress, change the date of this item to the 29th
28:50
I can change things on the fly right here as part of this grid-like experience
28:56
As I make these changes, Power Apps is keeping a track of every record that I changed
29:01
I currently changed to four records. All those four records are being highlighted right here
29:06
as part of my gallery. And right here on the top, I have a Save button
29:11
The moment I click the Save button, what's going to happen is Power Apps is going to push out all these changes at once
29:17
in with one query to my data source in a performant manner
29:21
and update all those records in one row. Now, this is a very powerful experience
29:27
because nowadays, you don't want to have your users interacting with one record at a time
29:31
Typically, your experience would be to have mass editing of data, working in a very Excel-like fashion
29:37
Right here, I have the full experience. I can start making modifications to my records
29:43
I can even go and undo my changes. I can view the grid, edit the grid
29:48
I can go ahead and delete records as part of my grid
29:53
I can even go and add records on the fly as part of my grid experience right here
29:59
So all of this is possible thanks to the gallery experiences and power apps
30:05
And for this screen, I'll just quickly go through the experience right here. If you observe this in my gallery control right here
30:13
as I look at the items or the record of my gallery, for each of these controls, like a text box, the drop down
30:21
there's a property called display mode. And I'm changing the mode based on a variable
30:25
And as the user makes changes to any of these items or any of these controls, I have an on change function, which basically selects a button
30:35
So I'm clicking a button, which is a hidden button. And I do this for every record that is changed on the fly because I want to keep track of the changes
30:43
As these changes are coming in on click of that button, all I'm doing here is loading data into a collection
30:51
I'm maintaining those changes in the collection. Finally, when I have the changes recorded
30:57
I showcase this button right here called Save. When the user clicks the Save button
31:02
all I'm doing right here is just one single query that says
31:06
go ahead and patch my data source with my collection of changes
31:10
This goes ahead, pushes out my changes, applies my changes to my data source in one go in a bulk fashion
31:19
So these were five examples of how you can play with galleries to create records
31:25
edit records, delete, read. You can create grid-like experiences. You can create some experiences with visual effects
31:33
You can have card-like experiences where you can highlight statuses, change colors
31:38
You can create filters for your galleries where users can filter data that they are looking at right there live as part of the gallery experience
31:47
You can add pagination to your galleries, which is not an inbuilt feature for galleries
31:53
Finally, you can have the full Excel grid-like experience as part of the galleries
31:59
These were all my demos around working with galleries. Once again, when to work with galleries
32:06
when you have more than one records, just go to a gallery control, start using galleries
32:11
work with the template item, which is the first item in your gallery, and you can modify that and change that into
32:17
any experience of your choice. Back to my presentation, there's not much to cover
32:24
I promised I'll keep the session short and crisp. I hope I've done that
32:29
After the demo, all I had actually was to say, thank you for listening in to the session
#Online Image Galleries
#Event & Studio Photography