Design Guidance – Linking controls for easy design edits

Let’s imagine you just finished building an app—an app that helps keep track of projects and the documents associated with that project. Your new app looks super sleek, with a white background and light gray text. You’re excited to share your brand-new, fully styled app with a coworker and you wait eagerly for their reactions as they click through. However, you notice that one coworker looks puzzled: “Where’s the content? I don’t see any text, it’s just blank.” You anxiously take a peek to check what’s happened, only to discover that you can see the text. “Everything is there, you don’t see it?” Your coworker quickly realizes what’s going on, “I’m colorblind—I bet the colors don’t have enough contrast, so it looks blank to me.”

You weren’t originally designing with colorblindness in mind, but now your app isn’t useable to everyone. You’ll need to go back and change the colors of every control that uses that light gray text color so there’s enough contrast. This kind of editing can be time consuming, especially if your app has a lot of screens. The good news is, it doesn’t have to be as challenging as it seems. There are some great tricks to PowerApps that can make editing extremely simple (and fun to play around with). So, let’s get to it …

Linking fonts

Good grooming in your PowerApp files makes everything easier to understand and edit when you are ready to make design changes. It’s extraordinarily helpful to rename controls as soon as they’re added to your file, this will make it easier to identify what you have selected. In the example below, the Label control was renamed to HeaderLabel and assigned a font of Segoe UI.

To assign other controls to use the same font, you must give all Label controls that you wish to use the same font a Font property of HeaderLabel.Font. What’s happening in this syntax is that the Label control named TitleOfProject is using the same Font property as the HeaderLabel control. Now, any time you change the font of the original control (HeaderLabel), the controls using HeaderLabel.Font will update at the exact same time. This allows you to save time because you no longer have to go in and individually change all label controls to the new font that you wish to use.

Font change in action

Linking text colors

These same principals can be applied to adjust the text color of controls, this is particular handy for when your app need to be revised to account for accessibility (like in the scenario described earlier). If the text colors you originally picked were too light and unseen by people with colorblindness, you will need to go back and adjust to accessible colors. We suggest you always check the background color and the text color by using a contrast analyzer tool.

Hooking up Label controls to use the same color will make editing colors an easy process. Note in the image below the selected Label control was renamed to TitleOfProject and was given a color property of RGBA(51, 51, 51, 1).

The same principles described earlier to adjust font, can be used to adjust text color. In the image below, all of the controls selected were colored to be exactly the same as the Label control: TitleOfProject. This was done by setting the Color property of all of the controls selected to TitleOfProject.Color. What’s happening in this syntax is that the Color property of all of the selected controls is set to the same color as TitleOfProject. This means any time you change the original control color, the control’s following this will update to be exactly the same.

Text color change in action

Linking colors

Linking controls is helpful in many ways, not only can you easily update fonts, and font colors, but you can also update the colors of other elements used within your app. In the image below, the selected Rectangle control was renamed to HeaderRectangle, and the Fill property of that control was set to a blue color, RGBA(20, 556, 214, 1).

To hook up other elements to use the same color, ­simply use the Fill property of the original control, in this example it is HeaderRectangle.Fill. You can even set the Fill of other controls to be a shade of the original control. Note in the image below, another Rectangle control was renamed to ResultsBox and that control’s fill property is set to ColorFade((HeaderRectangle.Fill), 80%). What’s happening in this syntax is that the fill of this Rectangle is set to use the same fill as the HeaderRectangle, and with ColorFade function you have the ability to set the that control’s color to be lighter or darker than the original color (in this example we chose to use a lighter shade of the original color).

This is extremely helpful for when you want to rebrand apps to use custom brand colors.

This can be applied in different places using different percentages, note in the image below the color fade is set to 90% of the original color.

Color change in action

Linking spacing and alignment

Linking controls can also be used to align controls to one another. You can do this by setting multiple controls to use the same X property as another control. This way any time you move the original control, all controls set to TitleOfProject.X will move to be in the same location. This gives you the freedom to move around controls without the hassle of individually selecting controls and moving them around or eyeballing the placement.

Alignment change in action

Using consistent spacing will make your app look good, but it also serves a functional purpose. When controls are spaced in an even manor, that makes your app easier to read. In the example below note that the Y property is set to a function, this function is taking the placement of the control ProjectManagerHeader.Y and adding the height of that control ProjectManagerHeader.Height, and then adding two pixels.

Note in the gif seen below, you can adjust this function to be anything that you wish. If you think the spacing we used was too tight, you now have the power to go into the file and give it more space.

The important thing to remember is to use the same spacing consistently. If you chose to add 10 instead of 2, be sure to update the spacing everywhere so it looks the same.

Click the link to download the msapp file highlighted within the post which has controls already linked. We encourage you to download and play around with the styling of the app, try different fonts, use your own brand colors, you can even swap out the company logo for your own logo. Make it your own!

For more information on how to design accessible apps

https://msdn.microsoft.com/en-us/library/aa291546(v=vs.71).aspx – Basic Principles of Accessible Design

https://msdn.microsoft.com/en-us/library/aa291864(v=vs.71).aspx – Designing Accessible Applications