{"id":1232,"date":"2021-07-04T17:13:49","date_gmt":"2021-07-04T17:13:49","guid":{"rendered":"https:\/\/365stack.in\/?p=1232"},"modified":"2021-11-29T12:32:07","modified_gmt":"2021-11-29T12:32:07","slug":"how-to-build-responsive-gallery-using-powerapps-canvas-app","status":"publish","type":"post","link":"https:\/\/365stack.in\/index.php\/2021\/07\/04\/how-to-build-responsive-gallery-using-powerapps-canvas-app\/","title":{"rendered":"How To Build Responsive Gallery using PowerApps | Canvas App"},"content":{"rendered":"\n<p>To activate responsiveness turn off the app&#8217;s Scale to fit setting, which is on by default and turn off Lock aspect ratio because you&#8217;re no longer designing for a specific screen shape.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"403\" data-attachment-id=\"1236\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/07\/04\/how-to-build-responsive-gallery-using-powerapps-canvas-app\/scale-to-fit-off\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/scale-to-fit-off.png?fit=644%2C406&amp;ssl=1?v=1625419220\" data-orig-size=\"644,406\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"scale-to-fit-off\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/scale-to-fit-off.png?fit=300%2C189&amp;ssl=1?v=1625419220\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/scale-to-fit-off.png?fit=640%2C403&amp;ssl=1?v=1625419220\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/scale-to-fit-off.png?resize=640%2C403&#038;ssl=1\" alt=\"\" class=\"wp-image-1236\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/scale-to-fit-off.png?w=644&amp;ssl=1 644w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/scale-to-fit-off.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>For Dynamic Layout<\/strong>:<\/p>\n\n\n\n<p>To create a responsive design, you locate and size each control by using formulas instead of static values.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Width<\/strong><\/td><td><code>Parent.Width<\/code><\/td><\/tr><tr><td><strong>Height<\/strong><\/td><td><code>Parent.Height<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"screen-sizes-and-breakpoints\">Understand Screen sizes and breakpoints<\/h3>\n\n\n\n<p>You can adjust your screen based on the size of the device.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Screen Size<\/th><th>Return Value<\/th><\/tr><\/thead><tbody><tr><td>ScreenSize.Small<\/td><td>1<\/td><\/tr><tr><td>ScreenSize.Medium<\/td><td>2<\/td><\/tr><tr><td>ScreenSize.Large<\/td><td>3<\/td><\/tr><tr><td>ScreenSize.ExtraLarge<\/td><td>4<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Parent.Size property will return your current screen size.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Switch(\n    Parent.Size,\n    ScreenSize.Small,\n    1,ScreenSize.Medium,2,\n    ScreenSize.Large,3,\n    4\n)<\/code><\/pre>\n\n\n\n<p>Check our below video for more detailed walkthrough.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"epyt-video-wrapper\"><div  id=\"_ytid_81261\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\" data-facadesrc=\"https:\/\/www.youtube.com\/embed\/jrT67bix5Vc?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;modestbranding=1&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;\" class=\"__youtube_prefs__ epyt-facade epyt-is-override  no-lazyload\" data-epautoplay=\"1\" ><img decoding=\"async\" data-spai-excluded=\"true\" class=\"epyt-facade-poster skip-lazy\" loading=\"lazy\"  alt=\"YouTube player\"  src=\"https:\/\/i0.wp.com\/i.ytimg.com\/vi\/jrT67bix5Vc\/maxresdefault.jpg?w=640&#038;ssl=1\"  data-recalc-dims=\"1\" \/><button class=\"epyt-facade-play\" aria-label=\"Play\"><svg data-no-lazy=\"1\" height=\"100%\" version=\"1.1\" viewBox=\"0 0 68 48\" width=\"100%\"><path class=\"ytp-large-play-button-bg\" d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path><path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path><\/svg><\/button><\/div><\/div>\n<\/div><\/figure>\n\n\n\n<p>Happy Building&#8230;!!! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lets create responsive card view using gallery control in power apps.<\/p>\n","protected":false},"author":3,"featured_media":1233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[6,5],"tags":[17,27,9],"class_list":["post-1232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-powerapps","tag-canvas-apps","tag-gallery","tag-powerapps"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/Responsivegallery.png?fit=1037%2C766&ssl=1?v=1625418734","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1139,"url":"https:\/\/365stack.in\/index.php\/2021\/06\/09\/how-to-perform-both-filter-and-search-in-gallery-using-power-apps\/","url_meta":{"origin":1232,"position":0},"title":"How To Perform Both Filter And Search In Gallery Using PowerApps","author":"Kanagaraj Neelamegan","date":"June 9, 2021","format":"video","excerpt":"Perform Search and Filter together in Gallery control. https:\/\/youtu.be\/TSj35fiDjqQ","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/06\/FilterSearch.png?fit=1200%2C541&ssl=1%3Fv%3D1623349368&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1148,"url":"https:\/\/365stack.in\/index.php\/2021\/06\/09\/how-to-use-gallery-control-in-powerapps\/","url_meta":{"origin":1232,"position":1},"title":"How To Use Gallery Control In PowerApps","author":"Kanagaraj Neelamegan","date":"June 9, 2021","format":false,"excerpt":"Post will guide how to create card view using Gallery control.","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/06\/GalleryControlTumbnail.png?fit=900%2C628&ssl=1%3Fv%3D1623349368&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1527,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/21\/how-to-create-custom-attachment-control-in-powerapps\/","url_meta":{"origin":1232,"position":2},"title":"How to create custom attachment control in PowerApps","author":"Hemanthkumar Rajan","date":"November 21, 2021","format":false,"excerpt":"Attaching a file along with the form is a common requirement, By default PowerApps does not provide any attachment control. But if the SharePoint list is added as a datasource automatically the attachment control will be generated along with the controls. But if multiple attachment control has to be shown\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-143.png?fit=1200%2C467&ssl=1%3Fv%3D1637483532&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1456,"url":"https:\/\/365stack.in\/index.php\/2021\/09\/17\/powerapps-print-form-to-pdf\/","url_meta":{"origin":1232,"position":3},"title":"How to Print Scrollable Screen to PDF in PowerApps","author":"Hemanthkumar Rajan","date":"September 17, 2021","format":false,"excerpt":"One of the common requirements in any application is to print the data either to save the form as PDF or print the form. PowerApps provides Print() function to print the screen in a printable format, but the limitation is the screen height cannot be greater than 2164px. If a\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2020\/10\/background1.jpg?fit=1200%2C675&ssl=1%3Fv%3D1623349406&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2278,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/28\/how-to-send-json-data-to-canvas-apps\/","url_meta":{"origin":1232,"position":4},"title":"How to send JSON data to Canvas Apps","author":"Premkumar Perumal","date":"December 28, 2021","format":false,"excerpt":"We're going to explain how to send a JSON response from Power Automate to Canvas app and how to convert the response into Collection format in Canvas app. To illustrate, we have explained a small app as example. As First step, create a new Instant flow that can be triggered\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=836%2C391&ssl=1%3Fv%3D1640667678&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1011,"url":"https:\/\/365stack.in\/index.php\/2021\/06\/05\/creating-new-form-in-canvas-app\/","url_meta":{"origin":1232,"position":5},"title":"How to create New Form in Canvas App | PowerApps","author":"Kanagaraj Neelamegan","date":"June 5, 2021","format":false,"excerpt":"How to create simple form using canvas app.","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/06\/NewForm.png?fit=1200%2C551&ssl=1%3Fv%3D1623349393&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/1232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/comments?post=1232"}],"version-history":[{"count":2,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/1232\/revisions"}],"predecessor-version":[{"id":1237,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/1232\/revisions\/1237"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media\/1233"}],"wp:attachment":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media?parent=1232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/categories?post=1232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/tags?post=1232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}