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

DE Main Home

Aktuelle News, Events, Know-How, MVPs, Unternehmen und vieles mehr!

HubSite 365 - Das Netzwerk über Microsoft 365 und Azure.

DE Main Events

DE Main Copilot

DE Main Dashboard

DE Main Role Pro Office 365

DE Main Role Citizen Developer

DE Main Role Data Analytics

DE Main Role Azure Datacenter

DE Main My365

DE Main Know-How

DE Main News

DE Main Search

DE Main Content

#More-News

Seamless Room Booking: Power Apps with Pro Templates!

Microsoft Fabric Sparks New Diagnostic Emitter for Enhanced Log and Metric Analysis

Storage Optimizer PRO is here

Vorstellung des Storage Optimizer für Microsoft 365

How Universities Can Save $92,000 On Microsoft Teams Provisioning

How To Streamline Your Teams Phone Provisioning with Approval Workflows

Longest Processing Time - A DAX Challenge Insight

Power Fx Tutorial 02: A Full Course on Programming as an App Developer!

Migration to and from the Cloud

Boost Your AI Career: Master Tech & Soft Skills with Microsofts Expert Guide

A Step-by-Step Guide to Customizing Microsoft Teams Backgrounds

Top Insights from Confidential Computing Summit 2024

#Top-News

Custom Time Frames: Enhance Your Power BI Visuals Today!

Excel use LAMBDA for Simplified, Dynamic Formulas!

Unlocking Insights: Tracing Your Power BI Reports

Revolutionize Your AI Projects with VS Code Today!

The Benefits Of Multi-Tenant Shared Calling

What is Teams Phone Mobile?

Boost SharePoint User Engagement with Engaging Design Tips

Optimize Projects with Microsoft Planner Premium 2024

Microsoft Fabric Community Conference 2025

Dynamics 365 Summit 2025

European Collaboration Summit 2025

European Cloud Summit 2025

European BizApps Summit 2025

EPPC 2025

Events Slider Top 01

Breaking News 01

Footer01

Media of the Month 01

Top Power Automate 2024 Updates You Need to Know

A Beginners Guide to SharePoint Agents!

Excels Game-Changer: DOUBLEXLOOKUP Unveiled!

How to use OneNote Templates: Complete Guide

Unlocking Copilot Success: Overcoming Common Pitfalls in Business Integration

Excel Analysis using OneDrive Copilot

Dive into Windows Server 2025s Pay-as-you-go Revolution!

Transform Your Power BI Reports with Semantic Link Labs

Rev Up: Experience Real-Time Racing Thrills with Microsofts Fabric Intelligence at Ignite 2024!

HomeAnnouncementSPContent01

#Shorts

Excel Magic: Quick SUM Without Formulas!

Unlock Data Power: Top 3 Dataverse Tools You Cant Ignore!

How DAX Fridays Most Senior Participant Aced the #25DaysChallenge!

SharePoint: Simplifying Check-In & Check-Out

Master Power Apps: Dynamic String Interpolation Techniques!

Unlock Creativity: Design Your Own Templates in Microsoft Whiteboard!

Unlock Excels Full Potential: Ditch Macros for These Cutting-Edge Tools!

Quick way to Auto Fit Columns in Excel!

Master Excel with One-Click Filters: Boost Your Productivity Instantly!

Unveiling the DAX Master: Employee with Top Order Value in #25DaysOfDAXFridays Challenge!