Power Apps Modern Toggle Control – How to Use

The Power Apps Modern Toggle is a control type that can be on or off by moving its handle.

In this article, I will explain the Power Apps Modern Toggle Control, its key properties, and how to add it to the Power Apps Canvas app.

Also, we will see how to use a Modern Toggle Control in Power Apps with various scenarios like:

  • How to get the modern toggle selected value in Power Apps
  • Set value based on Power Apps modern toggle
  • Filter Power Apps Data table by modern toggle

Moreover, we will learn how to enable the Power Apps Modern Controls in the Canvas app.

Power Apps Modern Toggle Control

Modern Toggle control in Power Apps normally behaves as a switch. It allows the user to turn on or turn off the toggle switch by using its handle.

Refer to the image below that how a modern toggle looks like:

Power Apps Modern Toggle Control

This is the overview of a Modern toggle in Power Apps.

Power Apps Modern Toggle Properties

Refer to the table below to know all the key properties of a Modern Power Apps Toggle control:

PropertyDescription
LabelDisplays the text of the modern toggle.
CheckedIt specifies setting the toggle checked state as either On or Off. By default, it will be On. If you will disable it, then the modern toggle will be false.
On:
PowerApps Modern Toggle Control
Off:
PowerApps Modern Toggle
Display modeIt defines whether the control allows user input (Edit), Displays data (View), or is disabled (Disabled).
VisibleSpecifies whether to display or hide the Modern Toggle control.
OnCheckWhen the modern toggle value changes to true, it specifies how the app responds.
OnUncheckIt specifies how the app responds when the user changes the control value to false.
OnSelectIt specifies how the app responds when the user selects the control.
Label PositionDefines the position of the label around the modern toggle. There are 3 types of label positions:
Before:
Modern Power Apps Toggle Properties
After:
Power Apps Modern Toggle Properties
Above:
PowerApps Modern Toggle Properties
Position– Distance between the control’s left side and the screen’s left edge.
Y – Distance between the top of the control and the top edge of the screen.
SizeWidth – The distance between the control’s left and right sides.
Height – Distance between the control’s top and bottom.

These are the properties of a Modern Toggle in Power Apps.

See also  Power Apps Modern Slider Control - How to Use

Add Power Apps Modern Toggle Control

Here, we’ll see how to add a Modern Toggle Control in the Power Apps Canvas app.

First, we need to enable the “Modern controls and themes” option on the Power Apps Canvas app Settings page. Refer to the instructions below:

  1. Sign in to Power Apps with your valid Microsoft credentials.
  2. Create a New Blank Canvas app (Apps -> + New App -> Canvas).
  3. Provide a unique name for the app (Power Apps Modern Toggle), choose the Format as Tablet, and Click on Create.
  4. On the Power Apps Screen, Click on ellipses () from the top -> Settings.
Add Power Apps Modern Toggle Control

5. From the Settings pane, Go to General -> Scroll down and Enable the Modern controls and themes as shown below. Click on Close.

Modern PowerApps Toggle Control

6. Expand the + Insert tab (from the top) -> Modern -> Select Toggle under Preview section.

Add Modern Power Apps Toggle

Once the modern toggle has been added to the app, it will display as shown above. The default name of the toggle will be Toggle1. You can change the modern toggle name as per your need.

This is how to add a Modern Toggle control in the Power Apps Canvas app.

How to Use Power Apps Modern Toggle Control

Now we will see how to use a modern toggle control in Power Apps with various examples.

Get Modern Toggle Value in Power Apps

Let’s get the modern toggle value using a Power Apps text label control.

There is a Modern Power Apps toggle and a Label control. When the user switches on the toggle, the selected toggle value (true) will display in the label. If the user switches off the toggle, the label will display as false.

Get Modern Toggle Value in Power Apps

1. To do so, add the modern toggle and set its Label property as:

Label = "Toggle Switch"

Provide the toggle label name as you want.

How to Use Power Apps Modern Toggle Control

2. Insert a Label and set its Text property as:

Text = Toggle1.Checked

Where,

See also  PowerApps AddColumns Function with Examples

Toggle1 = Modern toggle name

Get Power Apps Modern Toggle Value

3. Save, Publish, and Preview the app. Make the toggle switch to On; the true value will display on the label.

This way, we can get the selected modern value in Power Apps.

Set Value Based on Power Apps Modern Toggle

Next, we will set a value based on the modern toggle control in Power Apps.

In Power Apps, there is a Modern toggle [Switch] and two labels [GRAPES & ORANGE]. When a user makes the switch on, the Orange label will appear boldly in orange.

When the user turns the toggle switch off, the Grapes label will appear bold and lime green, as shown in the gif below.

Set Value Based on Power Apps Modern Toggle

To work around this, follow the steps below:

1. Insert a Modern toggle and set its Label property as:

Label = "Switch"
Set Value Based on PowerApps Modern Toggle

2. Add a Label and set its Text property to “GRAPES.” Also, write the code below on its Color and FontWeight property:

Color = If(tglSwitch.Checked=false,Color.LimeGreen,Color.Black)
FontWeight = If(tglSwitch.Checked=false,FontWeight.Bold,FontWeight.Normal)

Where,

tglSwitch = Modern toggle control name

Power Apps Modern Toggle Set Value

3. Add another Label and set its Text property to “ORANGE“. Also, write the code below on its Color and FontWeight property:

Color = If(tglSwitch.Checked=true,Color.Orange,Color.Black)
FontWeight = If(tglSwitch.Checked=true,FontWeight.Bold,FontWeight.Normal)
Power Apps Set Value Based on Modern Toggle

4. Save, Publish, and Preview the app. Once you toggle on and toggle off, the label color and font will be set accordingly.

This way, we can set the label value based on the modern toggle in Power Apps.

How to Filter Power Apps Data Table by Modern Toggle

Suppose you want to filter the Power Apps Data table records based on a Modern toggle, then follow the steps below:

See also  How to remove Power Apps form from SharePoint list?

There is a Modern toggle and a Data table control. When a user toggles on the switch [Half Day], the data table will filter and display all the half-day leave records.

Filter Power Apps Data Table by Modern Toggle

1. I have a SharePoint list named Employee Leave Request with all columns below:

ColumnData type
LeaveSingle line of text
ReasonSingle line of text
Half DayYes no
Types of leavesChoice [Casual Leave, Sick leave]
Approval StatusChoice [Approved, Rejected, Pending]
Filter Power Apps Data table by toggle

2. In Power Apps, add a Modern toggle and set its Label as:

Label = "Half Day"
How to Filter Power Apps Data Table by Modern Toggle

3. Insert a Data table below the toggle, and apply the code below on its Items property as:

Items = Filter(
    'Employee Leave Request',
    'Half Day' = tglHalfDay.Checked
)

OR

Items = If(                                                  //This code will give all the SP list items when you toggle off
    tglHalfDay.Checked,
    Filter(
        'Employee Leave Request',
        'Half Day' = tglHalfDay.Checked    
    ),
    'Employee Leave Request'
)          

Where,

  • tglHalfDay = Modern toggle name
  • ‘Half Day’ = SharePoint Yes no column
  • ‘Employee Leave Request’ = SharePoint List Name
Filter PowerApps Data Table by Modern Toggle

4. Save, Publish, and Preview the app. Once you toggle on the switch, the data table will filter and display all the half-day leave records.

This way, we can filter the Data table by Power Apps Modern Toggle.

Some more Power Apps Modern Controls you may also like:

Conclusion

I hope that this post has given you a thorough understanding of the Modern Toggle control, including its properties and various examples like:

  • Get the modern toggle selected value in Power Apps
  • How to set value based on Power Apps modern toggle
  • Power Apps Filter Data table by modern toggle
>