Design Tricks In PowerApps

Designing a good UI is very important for any app. In this blog, I will explain how we can do pixel perfect designing in less amount of time using PowerApps.

If you've used Power Apps, you know how designing a page in PowerApps is a tedious job. We have to set X and Y position manually in each component/control. Though we can drag and drop these controls/components, we still need to set it manually to make it pixel perfect.

 

Here let's learn how we can calculate the X and Y positions of any control once so that we do not have to set it manually for each and every control.

 

For example, I will create a table in Tablet mode of an App.

 

To create a table, we will need to have data source that will be used to get data from and data will be displayed in a table. I am using a SharePoint List.

 

If you do not know how to connect to data source you can visit this site

 

Step 1 - Add Blank Vertical Gallery

 

 

Step 2 

 

Select a Data Source. From Properties and Add a label to Gallery. As soon as you add a label to the Gallery, it will automatically map one of the fields from our data table to the label.

 

I have manually added borders so that we can distinguish labels.

 

It looks like this.

 

 

I renamed each label so that we can use these names in our formula. There is too much space between two labels P1 and P2. To reduce that, I will need to reduce Template Size to 50, Template Padding to 0 from properties pane of Gallery1.

 

Step 3 - Calculating X position of labels

 

To label ProductId, set its X and Y as 0. Hence it is the 1st control of the Gallery or the 1st control inside the Gallery.

 

Now using ProductId name, I set X of ProductName label. In the X property of ProductName in formula bar, I set below formula:

• ProductID.X+ProductID.Width

 

In the formula bar for X property of CustomerName

• ProductName.X+ProductName.Width

Same way, we can set for ItemCount to calculate X and Y.

 

Now I set Height of the label according to the Template Size of the Gallery using below formula.

• Gallery1.TemplateHeight

After all these formulas, my table looks like this.

 

 

Anything missing in this table??? Yes, you are correct. The header is missing.

 

Step 4 - So let’s create a Header.

 

To add a Header, we will need 4 labels outside the gallery. I rename it ProductId_Header to make it more readable.

 

Now, first I will set Its height as the TemplateHeight of the Gallery using the same formula we have used to set item labels’ height.

 

I want to set Background of these header labels to gray RGBA(166, 166, 166, 1) and font color to white RGBA(255, 255, 255, 1).

 

We should not set these colors manually for each label or each control as many times our clients may ask us to change the design. We would do it dynamically.

 

Create 2 variables in OnVisible event of the screen.

 

 

If you do not know more about Variables in PowerApps don’t worry this site has all the explanations.

 

Now go to formula bar of each header label, select Fill Property and set HeaderBG variable; select Color property and set HeaderFont variable.

 

Then set X the same way we have X position for Item Labels, width same as item label width respective to the header and text of the label.

 

Now comes the last part the Y position. Logically we set header above our item label and our item label is inside our Gallery hence we will use X of the Gallery.

 

But we don’t want to overlap item labels and header labels. That means, we need to make sure to consider the height of the header label. So formula will be,

• Gallery1.X - ProductId_Header.Height

Finally, our table looks like this.

 

 

Summary

 

We can use dynamic styling of controls that can save us up to 80% time. Whenever we want to change anything in design, we just need to change the value of the variables.

 

Hope you found this blog useful.

 

Please comment your feedback in the comments section below.