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.
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.
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.
** 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
@KickingApps, you are too kind, thanks for going out of your way to do that for me! 🙂
Effectively, yes, that is what I was trying to achieve. Few questions:
1) Based on how you built it, is each row part of a table? Curious what you each component is that you are adding?
2) Any reason why this wouldn't work with a table? Only ask cause not sure how you built the page.
3) I assume the scroll bar is the app scroll bar, or possibly the browser scroll bar? Not the interior scroll bar on the table like how PowerApps defaults too.
4) As part of #3 above, I notice the "app height" doesn't change in the demo, so it made me think the height of the application itself wasn't increasing as new rows were added past the min height of the page.
Take a look at the attached. For some reason, the 'App Height' label is not showing the dynamic value of the app height as it changes. However, it is changing, 'growing', as the table grows.
I was able to add 200 rows to the gallery and still did not have a scroll bar appear within the gallery (table). Only within the browser.
I haven't yet tried applying responsive techniques to see how this could all work together. I'll work on that piece next and send you an update.
In the meantime, I hope you find the attached helpful.
Also, re: 'App Height', if you change to Screen.Height, you will see the values reflected.
Not out of my way at all. I love this stuff and this just provided me something new to learn. The trick now is how to make anything 'outside' of the gallery stick as the screen grows and becomes scrollable. Please let me know if this helps, if you improve it or come up with a better solution. And I enjoy learning more about the design process from your posts.
Keep sharing.
I ran the build you gave me, maybe I am doing something wrong. I am in preview mode, the columns add but I can't seem to scroll down the page. I shortened the page height in the video so you didn't have to see as many columns get added. Having issues in your build at 2160 height as well.
Could it be that in Preview mode it doesn't scroll and I have to publish first?
Here's a video: https://1drv.ms/v/s!AuEV00Xq5rHXh5k4YQ2VNevb-cT6Mw?e=KPO27u
Thanks!
Did you publish? If not, Publish and run it in the Player. Not the Editor/Studio.
If you'd like to connect via Teams and screen share, I have time later today.
@KickingApps works now when published.
Curious, on this design you made. If my table by default is 10 rows. Then on page load, there are 100 records coming from the DB, would this design you created enable the table height to grow based on the fetched data set?
Beyond just a table, I am also trying to use this for other elements such as containers with content in them. So that based on the height of the content, the container itself would grow vs injecting scroll bars everywhere. One example could be a block of text that is retrieved from the DB that is 10 characters long vs 1000; think Lorem Ipsum blocks of content. Another example could be a modal. Basically all the same ideas, just growing blocks based on the content inside it.
Thanks again for all your help! I owe ya 🙂
@Anonymous I think the overall answer to your latest questions is yes; you could do some trickery to apply similar technique regardless of what you use. I thought this would be great for desktop ‘app’ with the header/menu ‘pinned’ to the top as the page scrolls. However, so far, I have not found a way to make that possible. (But I’m stubborn and will put a little more effort into it :)).
Re: you owing me; not at all. I have rec’d the generous help of so many along this journey. It’s the least I can do.
I would, however, appreciate any feedback you might offer if you are using the responsive grid from this original post. Especially given your design expertise. If I can improve it, I would love to. And if you can point me to the best place to learn proper design best practices, please share.
Good luck and let me know if I can help further.
@KickingAppsas I start to implement it, I will def reach back out to show you stuff.
On the design front, I would be happy to help. In its simplest form, I try to follow the standard 8pt grid. I am sure you have read many of these articles below, but thought it would be worth sharing for others.
As a positive vent, 🙂 it would be great if MSFT would invest more in the UI to have a grid that is easier for designers or every day business folks to understand how to do layouts. Example would be like Figma or Sketch do it. This would massively help development and lead to better apps that are visually more appealing.
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
https://material.io/design/layout/responsive-layout-grid.html
https://designsystem.quickbooks.com/foundations/grids/
https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4#.8d1socyrq