Principal Program Manager at Microsoft Power CAT Team | Power Platform Content Creator

Reza Dorrani

Citizen Developer MyRole

Hot News Focus

Power Apps Selection

Power Apps

[URL] Worldwide Content Releastionship

<div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;0&#125;,&quot;controlType&quot;&#58;3,&quot;id&quot;&#58;&quot;65ac1443-c194-470d-8600-34a87c42bde4&quot;,&quot;webPartId&quot;&#58;&quot;d1d91016-032f-456d-98a4-721247c305e8&quot;,&quot;rteInstanceId&quot;&#58;&quot;63e34cde-0529-4dd3-a529-6c6b8ebbab17&quot;,&quot;addedFromPersistedData&quot;&#58;true,&quot;reservedHeight&quot;&#58;723,&quot;reservedWidth&quot;&#58;1178&#125;"><div data-sp-webpart="" data-sp-webpartdataversion="1.11" data-sp-webpartdata="&#123;&quot;id&quot;&#58;&quot;d1d91016-032f-456d-98a4-721247c305e8&quot;,&quot;instanceId&quot;&#58;&quot;65ac1443-c194-470d-8600-34a87c42bde4&quot;,&quot;title&quot;&#58;&quot;Image&quot;,&quot;description&quot;&#58;&quot;Add an image, picture or photo to your page including text overlays and ability to crop and resize images.&quot;,&quot;audiences&quot;&#58;[],&quot;serverProcessedContent&quot;&#58;&#123;&quot;htmlStrings&quot;&#58;&#123;&#125;,&quot;searchablePlainTexts&quot;&#58;&#123;&#125;,&quot;imageSources&quot;&#58;&#123;&quot;imageSource&quot;&#58;&quot;/sites/M365-CDN/SiteAssets/SitePages/Content-20240/1471666608-Responsive.jpg&quot;&#125;,&quot;links&quot;&#58;&#123;&#125;,&quot;customMetadata&quot;&#58;&#123;&quot;imageSource&quot;&#58;&#123;&quot;siteId&quot;&#58;&quot;40ef054e-5ec7-4552-ac92-09bbd4faa5e1&quot;,&quot;webId&quot;&#58;&quot;35f81bac-1b1d-4f8c-a038-0302a1a6ae55&quot;,&quot;listId&quot;&#58;&quot;870ffa3e-eb32-4905-82ab-9e57adb99968&quot;,&quot;uniqueId&quot;&#58;&quot;5a6678ef-6b27-478a-87a8-6b2ca9ac29ed&quot;,&quot;width&quot;&#58;2048,&quot;height&quot;&#58;1212&#125;&#125;&#125;,&quot;dataVersion&quot;&#58;&quot;1.11&quot;,&quot;properties&quot;&#58;&#123;&quot;id&quot;&#58;&quot;50ddaa85-7c22-4d8e-bde0-0384025279f7&quot;,&quot;linkUrl&quot;&#58;&quot;&quot;,&quot;isInlineImage&quot;&#58;true,&quot;siteId&quot;&#58;&quot;40ef054e-5ec7-4552-ac92-09bbd4faa5e1&quot;,&quot;webId&quot;&#58;&quot;35f81bac-1b1d-4f8c-a038-0302a1a6ae55&quot;,&quot;listId&quot;&#58;&quot;870ffa3e-eb32-4905-82ab-9e57adb99968&quot;,&quot;uniqueId&quot;&#58;&quot;5a6678ef-6b27-478a-87a8-6b2ca9ac29ed&quot;,&quot;imgHeight&quot;&#58;1212,&quot;imgWidth&quot;&#58;2048,&quot;imageSourceType&quot;&#58;2,&quot;alignment&quot;&#58;&quot;Center&quot;,&quot;fileName&quot;&#58;&quot;Responsive.jpg&quot;,&quot;fixAspectRatio&quot;&#58;false,&quot;overlayText&quot;&#58;&quot;&quot;,&quot;altText&quot;&#58;&quot;&quot;&#125;,&quot;containsDynamicDataSource&quot;&#58;false&#125;"><div data-sp-componentid="d1d91016-032f-456d-98a4-721247c305e8"></div><div data-sp-htmlproperties=""><img data-sp-prop-name="imageSource" src="/sites/M365-CDN/SiteAssets/SitePages/Content-20240/1471666608-Responsive.jpg" data-sp-cust-siteId="40ef054e-5ec7-4552-ac92-09bbd4faa5e1" data-sp-cust-webId="35f81bac-1b1d-4f8c-a038-0302a1a6ae55" data-sp-cust-listId="870ffa3e-eb32-4905-82ab-9e57adb99968" data-sp-cust-uniqueId="5a6678ef-6b27-478a-87a8-6b2ca9ac29ed" data-sp-cust-width="2048" data-sp-cust-height="1212" /></div></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;4,&quot;id&quot;&#58;&quot;63e34cde-0529-4dd3-a529-6c6b8ebbab17&quot;,&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;1&#125;,&quot;addedFromPersistedData&quot;&#58;true&#125;"><div data-sp-rte=""><p>Power Apps Tutorial - Responsive Screen with Gallery &amp; Filters - Beginner to Advanced is a comprehensive tutorial that covers all the basics of creating a Power App, from creating a new project to working with filters and galleries. It includes step-by-step instructions to help you create a fully functional, responsive app quickly and easily.</p><p>Welcome to this step-by-step Power Apps tutorial for beginners to advanced users. I will cover various topics related to building Canvas Power Apps - How to build a responsive screen in Power Apps, how to connect to a data source, how to build a responsive Gallery control and apply multiple filters to gallery data.</p><p>Firstly, I will show you how to create responsive canvas Power Apps and how to work with responsive design screen templates. I will also demonstrate how to use horizontal and vertical containers, which are essential tools in creating responsive layouts.</p><p>I will guide you through creating a responsive gallery control and filter panel and show you how to apply multiple filters to a Power Apps gallery. The filter panel (container) will allow users to make selections to search or filter gallery data. Additionally, the applied filters container will highlight the applied filters and users can remove specific filters or reset the filters if desired.</p><p>You will learn how to design PowerApps gallery to showcase it as a Table with responsive headers &amp; how to search and filter power apps gallery data.</p><p>I will leverage Microsoft Dataverse as a data source. However, the techniques I will demonstrate can be applied to any data source, and I will also show you an example with SharePoint as a data source.</p><div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteClear cke_widget_wrapper_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte" data-cke-display-name="div" data-cke-widget-id="1" role="region" aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane."><div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteClear webPartInRteInlineImage cke_widget_element" data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteClear%22%3A1%2C%22webPartInRteAlignCenter%22%3A1%2C%22webPartInRte%22%3A1%7D%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage" data-instance-id="65ac1443-c194-470d-8600-34a87c42bde4" title=""></div></div><p><b>Table of Contents&#58;</b></p><p><br></p><ul><li>00&#58;00 - Introduction to Power Apps Responsive Design Tutorial with Gallery &amp;</li><li>Filter Containers</li><li>00&#58;49 - Build a Responsive Power App</li><li>01&#58;31 - How to build a Responsive Screen Header</li><li>03&#58;40 - Build Responsive Gallery + Filters using containers</li><li>05&#58;03 - New drop shadow effect for Power Apps containers</li><li>06&#58;37 - Connect Power App to a Dataverse Table</li><li>07&#58;13 - Create Responsive Gallery &amp; showcase like a Data Table</li><li>10&#58;05 - Add Responsive Column Headers for Power Apps Gallery</li><li>12&#58;31 - Show and Hide Power Apps responsive container controls</li><li>13&#58;40 - Enable responsiveness for a Power App by disabling scale to fit</li><li>13&#58;59 - Add Filters container for Power Apps</li><li>14&#58;48 - Reset Filters Button</li><li>15&#58;03 - Search function in Power Apps Gallery</li><li>15&#58;38 - Highlight Column Header when Filter is applied</li><li>16&#58;19 - Multiple Filters in Power Apps Gallery</li><li>19&#58;54 - Show applied filters in Power Apps</li><li>23&#58;09 - Responsive Power Apps Gallery with Filter Panel examples</li><li>24&#58;12 - Subscribe to Reza Dorrani Channel</li></ul><p><b>Basic Setup for Power Apps tutorial on responsive screens!</b></p><p><br></p><ol><li>Create a New App&#58; Open Power Apps, and create a new blank canvas app.</li><li>Choose a Screen Size&#58; From the Home tab, click on the “Screen size + orientation” button in the top-right corner of the screen. Choose a screen size from the drop-down list.</li><li>Enable Responsive Mode&#58; Once you’ve chosen a screen size, click on the “Responsive mode” button in the same area as the screen size button. This will enable responsive mode and allow you to design your app to be compatible with different screen sizes.</li><li>Create Layouts&#58; In responsive mode, you can create multiple layouts for your app. Click on the “Add layout” button to create a new layout. You can then design each layout to be optimized for different screen sizes.</li><li>Configure Controls&#58; As you design your app, you’ll need to configure the controls to be responsive. To do this, click on a control and go to the “Layout” tab. Here, you can set properties such as the control’s width, height, and position relative to the screen.</li><li>Preview Your App&#58; Once you’ve created your layouts and configured your controls, you can preview your app in responsive mode. Click on the “Preview” button in the top-right corner of the screen, and choose “Phone layout” or “Tablet layout” to see how your app looks on different screen sizes.</li><li>Test Your App&#58; Finally, test your app on different devices to ensure that it’s truly responsive. You may need to make adjustments to your layouts and control configurations to make sure that your app works well on all screen sizes.</li></ol><p>I hope that helps you get started with building a responsive screen in Power Apps! Let me know if you have any other questions.</p><ul><li><a data-cke-saved-href="https&#58;//365stack.in/index.php/2021/07/04/how-to-build-responsive-gallery-using-powerapps-canvas-app/" href="https&#58;//365stack.in/index.php/2021/07/04/how-to-build-responsive-gallery-using-powerapps-canvas-app/">How To Build Responsive Gallery using PowerApps</a></li></ul><p>Jul 4, 2021 — Lets create responsive card view using gallery control in power apps.- To activate responsiveness turn off the app's Scale to fit setting,&#160;...</p><ul><li><a data-cke-saved-href="https&#58;//learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout" href="https&#58;//learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout">Create responsive layouts in canvas apps - Power Apps</a></li></ul><p>Dec 15, 2022 — To show these properties, open an app in Power Apps Studio, and then select a screen. The default formulas for these properties appear on the&#160;...</p><ul><li><a data-cke-saved-href="https&#58;//learn.microsoft.com/en-us/power-apps/maker/canvas-apps/build-responsive-apps" href="https&#58;//learn.microsoft.com/en-us/power-apps/maker/canvas-apps/build-responsive-apps">Building responsive canvas apps - Power Apps</a></li></ul><p>Dec 15, 2022 — Learn about how to build responsive canvas apps. ... Stretch or resize with the screen size changes. ... Go to Power Apps.</p><ul><li><a data-cke-saved-href="https&#58;//powerusers.microsoft.com/t5/Building-Power-Apps/Responsive-Layouts-help-what-is-it-I-m-doing-wrong-or-did-an/td-p/1434327" href="https&#58;//powerusers.microsoft.com/t5/Building-Power-Apps/Responsive-Layouts-help-what-is-it-I-m-doing-wrong-or-did-an/td-p/1434327">Solved&#58; Responsive Layouts help! what is it I'm doing wron...</a></li></ul><p>Jan 26, 2022 — I add the collection to the items of the gallery and edit the gallery to include the required labels/icon etc from the collection. and this is&#160;...</p></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;0,&quot;pageSettingsSlice&quot;&#58;&#123;&quot;isDefaultDescription&quot;&#58;true,&quot;isDefaultThumbnail&quot;&#58;true,&quot;globalRichTextStylingVersion&quot;&#58;0,&quot;rtePageSettings&quot;&#58;&#123;&quot;contentVersion&quot;&#58;4&#125;,&quot;isEmailReady&quot;&#58;false&#125;&#125;"></div></div>

PowerApps Responsive Screen with Gallery & Filters

EN Main News

News Center with all the relevant news and information about Microsoft 365 and Azure.