How to create Responsive Gallery in Power Apps Canvas App?

Welcome to one more episode for Responsive Power Apps Design. During this session, we will learn how we can create a Responsive Gallery in PowerApps Canvas App. Nowadays, we need to design a gallery in such a manner that if End-user opens the app from Desktop, Mobile or Tablet devices, it should look nice and cleaner. So, In Power Apps now responsive containers are generally available! So, we can build our Responsive Gallery with the help of Containers. In this session, we will talk about step by step procedure to create a responsive gallery for the powerapps canvas app.
So, let's get started!
Power Apps provide a facility to create containers within our canvas app to build responsive Power Apps design. We have two types of containers available. Horizontal Container and Vertical Container. We can build responsive Grids in Power Apps with the help of containers. These containers are Generally available now! This is complete Power Apps beginner session to build a responsive gallery step by step for Power Apps Canvas App.
During this video, we will learn the following concepts!
1. Responsive Galeries in PowerApps
2. Responsive Canvas App Gallery with Containers
3. How to create Responsive Gallery in Canvas App?
4. Responsive Grid Design in Power Apps Canvas App with Containers
5. Containers in Power Apps Canvas App
6. How can I create a Responsive Gallery in Power Apps Canvas App?
Chapters:
00:00 Start
01:16 Introduction
01:26 End Outcome - Responsive Power Apps Gallery
02:10 Data Structure
02:36 Turn off Scale to Fit
02:55 Create Responsive Power Apps Screen
03:48 Step 1 - Add Two Horizontal Container
04:25 Step 2 - Turn off Flexible Height
04:44 Add Gallery Control
05:00 Add Container in Gallery
05:23 Set Width for Gallery Control
05:57 Add Two Horizontal Container insider Gallery's Container
06:40 Maintain Flexible Width
07:27 Add Labels for Gallery
07:50 Provide Gallery Datasource
08:00 Set Different Fields
08:56 Turn Flexible width on for Gallery Control
09:11 Add Edit Button
09:25 Set Template Height for Gallery
09:48 Add Gallery Header
10:07 Add Horizontal Container in Gallery
10:25 Set Width for Containers
10:40 Add Labels in Gallery
10:51 Turn Flexible Width On
11:15 Create Collection for Gallery Header
11:32 Provider Datasource and Value to Header
12:23 Set Background Color and Font for Gallery Header
12:38 Set Height of Container
12:48 Set Template Height for Gallery
13:00 Set Height for Root Container
13:48 Turn on Wrap Property
14:24 Set Min Width for all Labels
15:50 Maintain Height for Container
17:32 Set Height for Gallery Template Height
18:07 Provide the same code for Root Container
18:22 Set Template Fill for Gallery Selected Item
19:05 Apply Visible Condition for Header
19:17 Test App
19:48 Set Alignment for Button
20:13 Add Header
20:58 Add Footer
22:04 Subscribe!!
References:
Power Apps Repsonsive Containers:
• Build a Responsive Can...
***
Follow me on Instagram:
/ powerplatformguy
Looking for Consultancy? Connect Here!
powerplatformtrainings.com/co...
Follow me on all social Media Handles:
linktr.ee/dhruvin.shah
****
#PowerApps #PowerPlatform #ResponsiveCanvasApp #CanvasApp #PowerAddicts #PowerAppsBeginner #PowerAppsWithDhruvin #DhruvinShah #DigitalDhruvin

[@sp0ng007]

I didn't get the part of header clearcolect thing ! could plz explain

[@tdevika1271]

Hi Sir, this is very helpful. Can you tell me the logic to exclude sat and sundar from total leaves

[@anuragbawankar685]

Sir please make a video on how to connect power apps to SQLserver database and hoow to write back to Server from power apps

[@iamdhruvinshah]

Consider your feedback!
Thanks!

[@RajeevKumar-hp7cv]

Thanks, Dhruvin, that video really help me to create a responsive gallery. I am stuck on a delegation warning. could you please help me?
Getting the following Error-(The right side of the "In" operator should be a column name from the correct data source. the data source might not be able to process the formula and might not return correct results or behave correctly if the data set is incomplete.)
Applying the below formula on my Galley as you instructed on video.
Filter(
'CPS-Gate-Pass',
Substitute(
DropdownGatePassType.SelectedText.Value,
"All Gate Pass",
""
) in 'Gate Pass Type'.Value,
Substitute(
DropdownStatus.SelectedText.Value,
"All Status",
""
) in Status.Value,
Or(
TextInputSearch.Text in Title,
TextInputSearch.Text in ID,
TextInputSearch.Text in 'Created By'.DisplayName
)
)
Thank you in advance!

[@nehabatra9]

How did u create the collection? Do u have any dedicated session about that?

[@korvivinod6604]

Hii dhruvin can you please make video on save image in Power apps and displaying them back to share point

[@xclone2k]

Great video Dhruvin, how could I achieve a responsive gallery but that is also scrollable, i have a table that has a good amount of columns that i would like to display them using a horizontal scrollbar, then when it's mobile mode it goes away. Thank you in advance!

[@iamdhruvinshah]

OK..You need to play around containers and wrap property! You can achieve that!

[@saurabhsaxena9970]

Looking for side navigation bar responsive video

[@sambojunagaraju3399]

What is a Container function Sir ,

[@ashwiniprashantwairagade2432]

Hi when i am connecting the above container to Header datasource then i am not able to see the items in textbox. can anybody help me please.

[@poonamgore115]

Same issue for me. please help

[@shwetapawar89]

8:47