One of the newer controls available in Power Apps is the toggle control. It replaces the deprecated Flip Switch control. In today’s blog, I’ll walk you through how to configure this control in a model-driven app in Power Apps.
First Step: Add a Yes/No Column to a Table
From a solution file in your Sandbox environment, add the table – in this example, we are using the Contact table. Add a new column (or use an existing Yes/No column).
Once finished, make sure you click Save Table at the bottom.
If you haven’t already, add the Form to your solution file.
Second Step: Add the Column to a Form
I love the Power Apps form design interface. It makes it extremely simple to add new fields and drag them to exactly where you want it to appear.
This is the easy part! Find the column you added to the Contact table in the Table Columns list on the left-hand side.
Time Saver Tip! Use the handy search icon at the top (highlighted below) to avoid scrolling!
Now, simply click on the Likes Chocolate? column and drag it onto the form canvas.
Third Step: Apply the Toggle Control to the Yes/No Column on the Form
Now that you have created a Yes/No column (field) and placed it on your form canvas, it’s time to apply the toggle control!
Click on the column on the Contact form. When it’s surrounded by a purple box, you will see a panel open on the right-hand side of PowerApps. This is where we will apply the control.
Click on the Components section, highlighted in the screenshot above.
Then click + Components, which will show you ALL available UI controls that can be applied to this field.
The UI controls shown here will vary by the column (field) type. Play around with different field types to see all controls that can be applied!
Important note: some UI controls can only be applied on the Classic Solution Designer. The list you currently see in Power Apps using these steps is NOT a complete list.
After selecting Toggle, PowerApps will ask you to set the scope of this control. By default, it will pre-check boxes for all options: Web, Mobile and Tablet. You can uncheck any if you prefer to do so, then click Done at the bottom.
Voila! Toggle Control Added!
After you save and publish your changes to the Form and the Solution file, you’re ready to rock and roll with your brand new toggle control! Way to go!
If you’re more of a visual learner, here’s how a video on how to apply the toggle control!