(Part 5) How to build a Canvas Power App – Design the layout of this canvas app

door | 20-09-22 | Learning Lessons | 0 Reacties

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:

  1. Button
  2. Icon
  3. Label
  4. 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 6 – Deep linking –>

<– Part 4 – Add, Edit and Submit a form
<– Introduction – Index

Ramon Maanders

Ramon Maanders

Power Platform Consultant @ ModiShare

Always looking for opportunities to automate, simplify and optimize processes and IT through the Microsoft Power Platform. Ramon writes blogs on a recurring basis about insights and the possibilities about the Microsoft Power Platform.

(Dutch) Altijd op zoek is naar mogelijkheden om processen en IT te automatiseren, te versimpelen en te optimaliseren door middel van het Microsoft Power Platform. Ramon schijft op terugkerende basis blogs over inzichten en de mogelijkheden omtrent het Microsoft Power Platform.

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Microsoft 365 nieuws en updates maandelijks in je inbox?

Met onze Monthly Recap mail ontvang je elke maand onze updates in jouw mailbox.

Per maand

Microsoft 365 nieuws en updates maandelijks in je inbox?

Met onze Monthly Recap mail ontvang je elke maand onze updates in jouw mailbox.