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
