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: when you change one cell, dependent cells will update too.

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, when you 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. This is where modern controls pay off, because they come with themes. Rather than change every control's Fill by hand, you pick a theme and it sets the color palette, typography, borders, and shadows across every screen at once. Every modern control inherits it, so one change re-themes the entire app. Themes handle that baseline look. What a theme doesn't set is the shape of an individual control, so size, shape, and orientation stay per-control properties, and one control's Fill is your occasional accent break.

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, a theme sets palette, type, and borders for every screen 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.