We all want to to create our apps in a responsive manner, but how do you check that your Power App that you developed is actually responsive? For this post I’ve created a simple Power Apps that will show some of the issues.
To implement a responsive design for your Powerapp there are a few things important. The general idea of responsive designs is to make features/functionality of your app available without depending on the size of the device used. Nowadays we cannot control which phone, tablet or desktop screen people are using to access your app and you want to optimize the space available as much as you can.
When using responsive designs you could use a resize strategy. This resize strategy is shown in my first example.
In the app below I’m using a blue bar at the top of the app with a set height (while it fits). An orange bar at the right of the app has a set width. My app also has a smiley face in the centre of the app. To conclude my app I’m presenting the size of my app in two labels (displaying 1367 and 768) at a set location.
As I now resize my PowerApp/browser window, my smiley face remains in the centre and the blue and orange bars remain at the top and the right.
Ok, this is quite good, but you could probably use the resizing options in PowerApps to do similar kind of things with the Scale to fit setting. Although the scale to fit setting doesn’t give you as much control. e.g. in my earlier example scale to fit would have changed the height of the blue bar and the width of the orange bar.
There is another option which is quite nicely shown by one of the images about responsive webdesign on wikipedia.
When you design websites different sizes and shapes of devices can affect how you show different elements on a screen. In PowerApps we don’t have control over the size of the app. So when we need to make things fit and the resizing option as described above doesn’t work then we will need to find an alternative to give the user what they need.
An alternative to resizing is replacing. This example is shown in the video below. The orange block on the right is replaced with a green block when the app width goes below a specified size.
Ok, you probably wouldn’t replace an orange box with a green box, but you could of course replace a menu which presents options next to each other with a menu that shows the options underneath each other when the available size is too limiting.