Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Community App Samples
    • Responsive Design Template

    Responsive Design Template

    12-03-2019 06:59 AM - last edited 05-07-2020 08:11 AM

    KickingApps
    Skilled Sharer
    4027 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    KickingApps
    KickingApps Skilled Sharer
    Skilled Sharer
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Responsive Design Template

    ‎12-03-2019 06:59 AM

    In the following post, I explain the three attached companion apps/components.  I use the two components to design a fully responsive app, the Sample app is simply a reference tool.


    When responsive design was announced as a feature in PowerApps, I could hardly wait to dig in and start creating. When I did, however, I found the process quite challenging. Without a visual reference, the need to continually Save and Publish the app in order to view and test the layout was a pain. With that in mind, I created the the scrnSimulator (component). The idea is to visually see how things will look for a preselected screen layout. Additionally, while researching responsive design, I stumbled upon responsive, fluid grids and thought it would be a great companion to the screen simulator. Below I do my best to describe each.

    • Screen Simulator Component - Mimic the various screen sizes I am designing for - primarily used as a visual reference and guide for determining dynamic height values of controls and Y positioning. 

    I have found the most effective method for utilizing this template is to have the template open in one window and the actual app I am creating open in another. I use the template to create my layout. Once I am satisfied with the layout of controls, I:

    1)'code' the property values into my actual app (for the selected screen size)

    2) change the size of my template

    3) re-order the controls so they fit the new screen size

    4) update the code in my app, and repeat....

     

    Y Property

    To determine the Y property based on the layout, refer to lblY_Reference in the template 

    The result of this calculation is I what I use to set the Y properties of the controls.

     

    Height Property

    Similar to the Y Property reference, I have a height reference label to determine and calculate the dynamic height of each control. Set the value of the control in the app to the result of the height reference control in the template * App.Height. 

    ** When switching layouts, this can be finicky, particularly transitioning to a large layout. I have found the best way to reset the view is to navigate from the component to Screen 1 and back to component. When back in the component, select the double arrow icon (zoom) and it should reset the view.

     

    • Fluid Grid Component - The Fluid Grid Component is comprised of gutters and columns; the values of the gutters and columns are what I use to set the 'X' property of my controls. The width of the gutters and columns dynamically calculate as the screen size changes. The grid is meant as another design reference. I DO add this to the actual app I am creating, toggle the grid on when I need a visual reference, and remove it from the app once it is completed and moved into production (optional). 

    The 'X' property of each control is determined from the output of the collection results (calculated in the 'OnChange' of the slider control). Because the slider is on the screen, not in the component, the values will 'hold' if the component is removed.

     

    • Sample App - This is simply a reference for the fluid grid component. The app has 3 text inputs that default to 'C4', and '3*1'. If you toggle the grid on, you will see that, with the above values, the Button's X value will be at column 4 and width Button = 3 columns + 1 gutter. Change the values, and you will see the button change.  Additionally, minimize the screen and you will see the width of the columns/gutters re-calculating on the fly.
    • Finally, I have been experimenting with fluid/responsive text. I left the text boxes I am experimenting with in the app.

    ** Note - this is attached in reply below due to 3 attachment limit. 

     

    Not too long ago, the #PowerAddicts interviewed @Foyinb and she said "Just do the thing". While I can "make the thing", "explaining the thing" isn't so easy :). So, with that, if you have questions related to this template, please feel free to reach out via Twitter  - @tianaranjo (a.k.a. kickingapps) or tianaranjo@kickingapps.onmicrosoft.com


    screenSimulator.msapp
    cmptResponsiveGrid.msapp
    5 KB
    Labels:
    • Labels:
    • Formulas and Controls
    • Galleries and Forms
    • Mobile App Design and User Experience
    Message 1 of 24
    4,027 Views
    5 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
    • Next »
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎12-03-2019 09:14 AM

    Nice ! I'll have a look at that in the coming days...

    Meanwhile, there is an problem with your url that links to the blog article: there is a %20 (space) character in front of the url and the semicolons (:) are missing after the http.

    Message 2 of 24
    3,632 Views
    0 Kudos
    Reply
    KickingApps
    KickingApps Skilled Sharer
    Skilled Sharer
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎12-03-2019 11:32 AM

    Thank you; I have fixed that. If you have questions after digging in, please reach out and I will respond. 

    Message 3 of 24
    3,612 Views
    0 Kudos
    Reply
    Tahina
    Tahina
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎12-04-2019 07:37 AM

    Hello,

    Thanks for sharing it but by clicking link (article), I get an error message as : "You don't have a sufficient right to access to the content ..."

    Can you grant me access if possible please ?

    Thanks in advance

    Message 4 of 24
    3,511 Views
    0 Kudos
    Reply
    KickingApps
    KickingApps Skilled Sharer
    Skilled Sharer
    In response to Tahina
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎12-04-2019 07:52 AM

    Deleted

    Message 5 of 24
    3,489 Views
    0 Kudos
    Reply
    Anonymous
    Not applicable
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-04-2020 10:07 AM

    @KickingApps Thanks for the detailed post. You know a lot about responsive design 🙂 

     

    I had a question , we are building on a Canvas app. Our goal is to use responsive design to control the layout better. By default our canvas app is 1368x768. We access it via the desktop browser. 

     

    We have a series of tables and long forms that users fill out which make the screen height change all the way up to 10,000px tall. 

    PowerApps when not using the responsive design tends to inject a lot of vertical scroll bars inside tables as the height is fixed.

     

    I'm trying to understand how best to set a min height for the page and table. By example, the table default is 8 rows and 500px tall. If there are 50 entries and the height of the page should be 4000px how best do we build the table so that it grows in vertical height? 

     

    Here's a visual example of my design

    Annotation 2020-03-02 132040.png

    Message 6 of 24
    2,877 Views
    0 Kudos
    Reply
    KickingApps
    KickingApps Skilled Sharer
    Skilled Sharer
    In response to Anonymous
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-04-2020 10:54 PM

    What do you mean when you say table? Can you provide an example of your formula or a .msapp file?

    Would a Teams meeting be helpful?

    Message 7 of 24
    2,866 Views
    0 Kudos
    Reply
    Anonymous
    Not applicable
    In response to KickingApps
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-05-2020 09:25 AM

    @KickingApps, thanks for the reply. 

     

    So the photo in my post and below is an example of a data table I was designing. I haven't coded it in PowerApps yet. What I was trying to figure out is how to make a table smarter using responsive design. 

     

    By example, I can make a table in PowerApps on a Canvas now that is say 500px tall and would have 8 entries in it (like photo below). But if I have 80 entries, and the table needs to be 5000px tall, currently PowerApps just defaults to the same 500px tall table and inserts a scroll bar inside the table and I have to scroll inside it. My goal was to have the table height itself grow so that I can avoid scrolling inside the table. 

     

    From everything I have seen, responsive design solves the width issue well for a page, but I was trying to solve for how to grow the height of a page based on the amount of content I have. 

    Annotation 2020-03-02 132040.png

    Message 8 of 24
    2,848 Views
    0 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to Anonymous
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-05-2020 02:06 PM

    @Anonymous,

    Why not using a gallery in Power Apps which, by design, allows unlimited entries? You could set its size to fit the screen and you could then scroll through your entries vertically inside the gallery.

    Message 9 of 24
    2,838 Views
    0 Kudos
    Reply
    KickingApps
    KickingApps Skilled Sharer
    Skilled Sharer
    In response to Anonymous
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-06-2020 09:54 PM
    Spoiler
    @Anonymous - this isn't pretty, but wanted to get something out to ask if this is what you are hoping to achieve? In the beginning of the video and up through entry '6', I tried to demonstrate that I could not scroll down in the screen (due to the screen height settings). However, the screen height settings change to accommodate the gallery as the gallery grows. Let me know if this is in line with what you are thinking.

    Video Link

    Message 10 of 24
    2,811 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks