Toggle Control for Power Apps

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.

Toggle Control on Contact form
Toggle control!

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).

Add Yes/No Column to a table
Add a new Yes/No field to your solution file in PowerApps.

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!

Add Yes/No column to a form
Search for the column you added in step 1.

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.

Add Component: Toggle control
Click on the column name, then use the panel on the right-hand side to apply the UI 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.

Add component: Toggle
Here, select the Toggle component.

After selecting Toggle, PowerApps will ask you to set the scope of this control. By default, it will pre-check boxes for all optoins: Web, Mobile and Tablet. You can uncheck any if you prefer to do so, then click Done at the bottom.

Set toggle control component scope
Set the scope of the Toggle control.

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!

Toggle control on a contact form
Cathan likes chocolate!

If you need any help configuring this control or others, please feel free to reach out to me at heidi@reenhanced.com or on Twitter @CRMHeidi.

The post Toggle Control for Power Apps appeared first on CRM Heidi.

Comment List
Anonymous
Related
Recommended