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

Optimize Power Query M with Advanced SWITCH Function

Explore Power Platform CLIx & Universal Search: Mike Factorial

Fabric Pipelines for Dataverse Part 2: Build the Source SQL Query

Microsoft Develops New AI Language Model

Step-by-Step Guide to Clone Power Platform Solutions

macOS Platform SSO Enters Public Preview Phase

NIS2 – mandatory disaster recovery

New: External Login Options in Microsoft Entra ID Preview

Top New Windows Browser 2024: A Comprehensive Review

New SharePoint Brand Center Launch: Boost Your Brand Now!

Boost Layout and Consistency in Power Apps with Containers

Ultimate Guide to Power Platform Solutions Architect

#Top-News

New SharePoint Version History & Copilot Chat in Outlook Ep 331

Don't click on these buttons in Excel

Microsoft Lists: Ultimate Guide for Easy Organization

Top SharePoint Page Design Tips for 2024 - Optimize Now!

OneDrive Copilot: Streamline File Management Effortlessly

Custom SharePoint Page Templates: A Beginners Guide

Maximize Efficiency: Power Platform & Azure APIM Integration

Maximize Efficiency: Power Platform Integrates Open AI

DynamicsCon LIVE

European Collaboration Summit 2024

European Cloud Summit 2024

Power Platform Developer Summit 2024

DynamicsMinds 2024

TechCon365 and PWRCON - A Microsoft 365 and Power Platform Conference

Commsverse 2024

Events Slider Top 01

Breaking News 01

Footer01

Media of the Month 01

Master Microsoft 365 Security with CIS Control Tips

New Microsoft Forms Feature: Custom Pre-Filled URLs

Microsoft OneDrive 2024 Guide: Master Cloud Storage

Boost Power Apps: Learn Power Fx with Copilot Guide

Efficient Volunteer Management: Power Apps Pen Sign-In

Microsoft Forms March 2024 Announcements!

Expert Guide to Power Apps: Multiple Table Management

PASSKEYS - What they are, why we want them and how to use them!

Effortless Quiz Grading with Microsoft Forms & Power Automate

HomeAnnouncementSPContent01

#Shorts

Maximize Insights: Native Overlapping Dumbbell Chart in Power BI

5 Reasons SharePoint Is Your Best Intranet Option

Microsoft Motion Review: Is It the Ultimate Planner Tool?

Streamline Approvals: Automate Workflows with Power Automate API

Boost Web Speed: Inside Edges Built-In Test Feature

Easy PowerPoint Guide: How to Align Objects Perfectly

Maximize Productivity with Microsoft Copilot & Office 365

Maximize Efficiency: The Power of Auto Scheduling!

Default Cloud Flows in Solutions: PowerApps Guide

Adding Loop Components to Microsoft Whiteboard Guide

Milwaukee Data & Security Summit 2024: May 9

Boost Productivity: How to Share Docs in Word with Copilot

Boost Productivity: Master Citizen Developer Automation

Boost Productivity: Master Time Management & Task Tracking

New Power Automate Feature Revolutionizes Automation!

[URL] EU Content Relationship

[URL] German Content Relationship

[URL] Luxemburg Content Relationship

WebSite Community - Web DE

/crm-pages/powerapps-responsive-screen-with-gallery-filters.htm

Everyone

[URL] Swiss Content Relationship

IT Manager

Administrator

Developer

Project Manager

Community

Teams App

365HubSite App

Pro Office 365

Citizen Developer

Data Analytics

Azure  DataCenter

Microsoft

Packt

Nubelus UG (haftungsbeschränkt)

NetForce 365

ICT Solutions AG

Rencore

Query

TargetApplicationUrlOverwrite

Object in Silder

Object on Page

Request Feature

GraphQL EndPoint

BaseURL

WebSite Community - Web.

WebSite Community - RootSite

Schweiz Community (DE-CH)

Schweiz Community (EN-CH)

WebSite Community - Web EN