As a Power Platform developer, when I present the first demo of my application, I often receive the following response: “This app isn’t pretty enough. Can’t you make it prettier?” The comment contains a grain of truth—there is real importance in creating a good user interface. In this blog post, we’ll explore how to manipulate the layout of our previous blogs so that they look more appealing to users and clients, so that their only response can be: “Wow, I didn’t know a Power App could look this good!”
Let’s start with a simple button. Open a new screen, add a container and adjust the width and height to respectively 200 x 100. For a working button, that you’ve seen in the overview of this blog series, we add an icon, a button, an HtmlText label, and a label.
Let’s begin with the HTML code we will use for this App. We can create a ‘div’ container, and inside that div, we can create a shadowbox. The HTML code I use for this App is the following:
And this is the visual result of the code:
You can change the size of a ‘div’ by using the width and height properties in the HtmlText property. If you want to place a shadow, adjust the properties in the Shadowbox. In this example, the properties are defined as follows:
Left to right: 7px
Up to down: 4.5px
Spread: 7.5px
Blur: 2.5px
A tip: Want to experiment with shadowboxes and other CSS stuff in Power Apps? Google for CSS generators, like: https://html-css-js.com/css/generator/box-shadow/.
That will result in a shadow box for that container. Next, you need to set the button’s properties so it gives you that hover effect. Begin with the fill property. This should be transparent, RGBA(0,0,0,0) will do. Delete the text in the button and adjust its border radius to 5.
To set the positioning properties it has a little more to it. For the X and Y properties, you’ll need to add 6.5 to the margin value you used on the div in the HTML text controller. So in this example that means the value 9 (2.5 + 6.5 = 9). The width and height of the button are the same as the div minus 2 so: 150 – 2 = 148 and 50 – 2 = 48.
So in summary:
Fill: RGBA(0,0,0,0)
HoverFill: ColorFade(RGBA(225, 225, 225, 0.25), -20%)
Border Radius: 5
Width: 148
Height: 48
X: 9
Y: 9
You can use whatever color you want, I prefer greyscales but feel free to change the Hex Color Codes. Now you can place an icon and a label in there and make sure the order of the controllers in the container is:
- Button
- Icon
- Label
- HtmlText
If you followed this blog, this should be your result:
At last, you can set the size of the HTML text controller and the container to Width 180 and Height 80. If you move the container to the place it belongs. The location of the controllers in the container stays the same.
Set the Width and Height to the same value as your HTML as box shadow. In this blog that is 150 x 50. To set the X and Y properties there is something that has more to it.
But wait, you might have noticed that I have round buttons with shadow boxes. How does that work??? Well if you adjust the right radius to 90 degrees of the button and the shadowbox they become round.
Now you know a little about designing the layout of your Power App so finally your colleagues and clients can stop complaining about this 🙂
In the next blog, we’re going to focus on the OnStart and StartScreen property and deep linking from a SharePoint list.
<– Part 4 – Add, Edit and Submit a form
<– Introduction – Index
0 reacties