How to create Responsive Gallery in Power Apps Canvas App?
25.5 هزار بار بازدید -
3 سال پیش
-
Welcome to one more episode
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 Canvas App with Ho...
***
Follow me on Instagram:
Instagram: powerplatformguy
Looking for Consultancy? Connect Here!
https://powerplatformtrainings.com/co...
Follow me on all social Media Handles:
https://linktr.ee/dhruvin.shah
****
#PowerApps #PowerPlatform #ResponsiveCanvasApp #CanvasApp #PowerAddicts #PowerAppsBeginner #PowerAppsWithDhruvin #DhruvinShah #DigitalDhruvin
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 Canvas App with Ho...
***
Follow me on Instagram:
Instagram: powerplatformguy
Looking for Consultancy? Connect Here!
https://powerplatformtrainings.com/co...
Follow me on all social Media Handles:
https://linktr.ee/dhruvin.shah
****
#PowerApps #PowerPlatform #ResponsiveCanvasApp #CanvasApp #PowerAddicts #PowerAppsBeginner #PowerAppsWithDhruvin #DhruvinShah #DigitalDhruvin
3 سال پیش
در تاریخ 1400/04/11 منتشر شده
است.
25,551
بـار بازدید شده