Your first controls

1. Your first controls

You've got controls on a screen, but right now they don't do anything. This video covers how to make controls respond to user input and how to style an app so it feels polished.

2. Controls are building blocks

Before we start wiring things together, a quick word on what controls actually are. Controls are the building blocks of every canvas app. Each one does one thing: a Label displays text, a Text Input accepts typing, a Button triggers an action. You dropped a few onto the canvas in the exercises. To change what a control does, you select it and edit its properties in the formula bar at the top of the editor. That formula bar is where all the logic lives.

3. Reading from a text input

The first control to understand is the Text Input. It holds whatever the user types, and its current value lives in a property called TextInput1.Text. You can reference that property anywhere in the formula bar. Set a Label's Text property to "Welcome, " & TextInput1.Text and the Label updates the moment the user types. That's Power Fx working like a spreadsheet: change one cell, dependent cells update.

4. Variables with Set()

Set stores a value. Set(isSignedIn, true) creates a variable named isSignedIn and gives it the value true. You write that formula on a Button's OnSelect property in the formula bar, so pressing the button saves that value. Think of it as a sticky note the app can check later. You'll use the same Set pattern again in Chapter 3.

5. Conditional display with If()

Since isSignedIn is already a true-or-false value, you can use it directly. Set a Label's Visible property to isSignedIn and that Label only shows when isSignedIn is true. Combined with Set on a button, press the button, the variable updates, and the Label appears. If you need a choice between two values, If handles that, but for Visible the boolean alone is cleaner.

6. Themes beat one-by-one styling

Now styling. You could change every control's Fill color by hand, but Power Apps has themes for this. App.Theme sets the color palette for the whole app at once, and every modern control inherits it. Pick a theme that matches your brand, the entire app re-themes. Themes handle the baseline; touching one control's Fill is the occasional accent break when you need a single element to stand out.

7. Overriding one accent

What if you want one thing to stand out? Say the Sign-in button should be the library's teal, even though the rest of the app uses the default. Select the Button, find its Fill property in the formula bar, and set it directly, for example, Color.Teal or an RGBA value matching the brand. That override beats the theme for that one control. Use this sparingly, because too many one-off overrides defeats the point of themes.

8. Summary

Here's a quick summary of the key parts of a simple canvas app. A Text Input feeds other controls through the formula bar, so labels update as the user types. Set stores a value when something happens, and If uses that value to show or hide a control. All of this is configured in the formula bar at the top of the editor. On the styling side, themes set the look for the whole app in one step, and overriding one control's Fill gives you an accent break when you need it.

9. Let's practice!

Time to wire your sign-in screen up properly.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.