Build a Responsive Canvas App with Horizontal and Vertical Containers in Power Apps
12.5 هزار بار بازدید -
4 سال پیش
-
During this entire session, we
During this entire session, we will be talking about how you can build your first power apps canvas app with responsive design using horizontal and vertical containers in Power Apps. Microsoft recently introduces Responsive Containers for Canvas app to build Responsive UI in Power Apps.
First, we will talk about Responsive Containers in Power Apps. We have horizontal and Vertical Containers available in the canvas app. We will enable the preview feature to start building with a responsive UI. Then we will talk about the properties available for horizontal and vertical containers in detail. Once we do that, we will create a structure for the responsive screen using horizontal and vertical containers. We will nest one container to another. Then we will build our responsive power apps. At last, we will test the responsiveness and talk about the page templates available in the OOTB manner in Power Apps. Stay tuned throughout the session!
Download Code from GitHub:
https://github.com/Dhruvinshah16/Powe...
Chapters:
00:00 Introduction
00:23 Containers in Power Apps Canvas App
00:40 Agenda for the session
01:55 Create Canvas App
02:07 Enable Preview feature for Responsive Canvas app and Container
02:53 Turn off Scale to Fit
03:51 Containers in Power apps
04:04 How to add Containers in Canvas App?
04:24 Horizontal Container in Power apps
04:48 When to use Horizontal Container?
05:28 What is Container?
05:42 Add Vertical Container
06:29 Properties for Horizontal Container
06:40 Direction for Horizontal Container
06:59 Justify Property
07:49 Align Property
08:30 Gap Property
09:03 Horizontal Overflow
10:13 Properties for Vertical Container
10:30 Justify Vertical for Vertical Container
11:00 Gap for Vertical Container
11:24 Vertical Overflow
11:38 Wrap for Vertical Container
12:01 Individual Properties of Controls within a container
12:45 Align in Container for control from Horizontal Container
13:23 Flexible Width for Horizontal Container
14:14 Fill Portion for Horizontal Container
16:00 Minimum Width for Responsive App
17:05 Individual Property for Vertical Container
17:10 Align in Container for Vertical Container
17:24 Flexible Height for Vertical Container
17:44 Fill Portion for Vertical Container
18:14 Minimum Height for Vertical Container
18:50 How to create page template using responsive container?
19:01 Example of Responsive Canvas App
19:55 Design Responsive Canvas
20:20 When to use Horizontal container and when to use vertical container?
23:55 Create Responsive Template using Container in Power Apps
30:26 Add Controls in Containers for Responsive Design
31:29 Make Responsive Gallery
36:19 Add Form Control for Responsive Power Apps
38:06 Add Header Control
39:58 Add Footer Control
42:47 Testing responsiveness
44:00 OOTB Screen Containers
45:38 Download Code
45:57 Subscribe
#PowerApps #PowerPlatform #CanvasApp #ResponsivePowerApps #PowerAppsWithDhruvin #DhruvinShah #Microsoft
First, we will talk about Responsive Containers in Power Apps. We have horizontal and Vertical Containers available in the canvas app. We will enable the preview feature to start building with a responsive UI. Then we will talk about the properties available for horizontal and vertical containers in detail. Once we do that, we will create a structure for the responsive screen using horizontal and vertical containers. We will nest one container to another. Then we will build our responsive power apps. At last, we will test the responsiveness and talk about the page templates available in the OOTB manner in Power Apps. Stay tuned throughout the session!
Download Code from GitHub:
https://github.com/Dhruvinshah16/Powe...
Chapters:
00:00 Introduction
00:23 Containers in Power Apps Canvas App
00:40 Agenda for the session
01:55 Create Canvas App
02:07 Enable Preview feature for Responsive Canvas app and Container
02:53 Turn off Scale to Fit
03:51 Containers in Power apps
04:04 How to add Containers in Canvas App?
04:24 Horizontal Container in Power apps
04:48 When to use Horizontal Container?
05:28 What is Container?
05:42 Add Vertical Container
06:29 Properties for Horizontal Container
06:40 Direction for Horizontal Container
06:59 Justify Property
07:49 Align Property
08:30 Gap Property
09:03 Horizontal Overflow
10:13 Properties for Vertical Container
10:30 Justify Vertical for Vertical Container
11:00 Gap for Vertical Container
11:24 Vertical Overflow
11:38 Wrap for Vertical Container
12:01 Individual Properties of Controls within a container
12:45 Align in Container for control from Horizontal Container
13:23 Flexible Width for Horizontal Container
14:14 Fill Portion for Horizontal Container
16:00 Minimum Width for Responsive App
17:05 Individual Property for Vertical Container
17:10 Align in Container for Vertical Container
17:24 Flexible Height for Vertical Container
17:44 Fill Portion for Vertical Container
18:14 Minimum Height for Vertical Container
18:50 How to create page template using responsive container?
19:01 Example of Responsive Canvas App
19:55 Design Responsive Canvas
20:20 When to use Horizontal container and when to use vertical container?
23:55 Create Responsive Template using Container in Power Apps
30:26 Add Controls in Containers for Responsive Design
31:29 Make Responsive Gallery
36:19 Add Form Control for Responsive Power Apps
38:06 Add Header Control
39:58 Add Footer Control
42:47 Testing responsiveness
44:00 OOTB Screen Containers
45:38 Download Code
45:57 Subscribe
#PowerApps #PowerPlatform #CanvasApp #ResponsivePowerApps #PowerAppsWithDhruvin #DhruvinShah #Microsoft
4 سال پیش
در تاریخ 1399/08/30 منتشر شده
است.
12,592
بـار بازدید شده