12-03-2019 06:59 AM - last edited 02-12-2020 22:40 PM
My goal with this template app is to make responsive design a little easier. I have spent an extensive amount of time designing responsive apps and have found the process to be time consuming and tedious. Specifically, there are 3 challenges I face repeatedly and wished to simplify when I built this template.
The primary challenges include:
I addressed the above by integrating the following in the attached template:
(*Note - the template is simply used to create the layout for each respective screen size. Design is done in the app I am creating; not the template.)
2a. X property for each control
I created a Fluid Grid, comprised of gutters and columns. The width of the gutters and columns calculate as the screen size changes. The 'X' property of each control is determined from the output of the collection results (calculated in the 'OnChange' of the slider control).
2b. Y property
To determine the Y property based on the layout, I have a label, (shown in screen shot below), in the template with the text set to Round(lblDynamicY.Y/cmptLayoutView.Height, 2)
The result of this calculation is I what I use to set the Y properties of the controls.
Again, referring to the example above, the Y property for the image control would be:
Switch( lblLayout.Text, "lgVer", App.Height * .15, // This is the based on the result of the text label in the template "smlVer", App.Height * .10 )
3. 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.
If you have questions related to this template, please feel free to reach out via Twitter - @tianaranjo (a.k.a. kickingapps) or firstname.lastname@example.org
** This post has was not updated with v2 of the template app.
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.
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
@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
@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.
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.