How to use Power Apps Check Box Control

Do you understand the Power Apps check box control and where to find it when working with Power Apps? If not, this tutorial will assist you in getting rid of them. We will also cover the following topics below:

  • Power Apps check box control
  • Power Apps check box control properties
  • Power Apps check box control example
  • Power Apps check box multiple values
  • PowerApps checkbox reset on visible
  • Power Apps checkbox checked value
  • PowerApps link checkbox to SharePoint list
  • PowerApps yes/no checkbox
  • powerapps checkbox set the background color
  • Power Apps checkbox oncheck
  • powerapps checkbox default
  • powerapps checkbox default checked
  • PowerApps checkbox reset
  • powerapps Patch checkbox SharePoint list
  • Power Apps checkbox set value

Before working with Power Apps check box control, we need to prepare a canvas app on the Power Apps. On that canvas app, we will add and build check box control as per the requirement.

To prepare a canvas app on the Power Apps environment, the following steps are:

  • Sign in to the Power Apps with your Microsoft tenant address.
  • Navigate to Create > Blank canvas app > Create.
  • Give a name to the blank canvas app.
  • Choose a format (Tablet or Mobile).
  • Create.
Prepare a blank canvas app on Power Apps
Prepare a blank canvas app on Power Apps

It will open with a blank or default screen where we will insert the check box control and perform all the above topics based on different scenarios.

Power Apps check box control

In Power Apps, there is a control that allows the user to set its value to true or false by selecting or deselecting it. This well-known control, which has been used in GUIs for decades, allows the user to specify a Boolean value (true or false).

When a user selects the check box, the value is true; when the check box is cleared, the value is false.

To find the check box control, the following steps are:

  • On the Power Apps screen, navigate to Insert > Input.
  • Select Check box control. It will appear with a sample check box control.
Power Apps check box control
Power Apps check box control

Power Apps check box control properties

Before we begin working with the Power Apps check box control, we must first understand the properties of the check box control. These are:

  • Default: A control’s initial value before it is changed by the user.
  • Text: Text displayed on a control or entered by the user into a control
  • Value: An input control’s value.
  • BorderColor: The border color of the control.
  • BorderStyle: Whether the border of the control is Solid, Dashed, Dotted, or None.
  • BorderThickness: The border thickness of a check box control.
  • CheckboxBackgroundFill: In a checkbox control, the background color of the box covers the checkmark.
  • CheckboxBorderColor: In a checkbox control, the color of the border that covers the checkmark.
  • CheckboxSize: The width and height of a checkbox control box that encloses the checkmark.
  • CheckmarkFill: The checkmark color in a checkbox control.
  • Color: The text color in a check box control.
  • DisplayMode: Whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
  • Fill: A control’s background color.
  • OnCheck: It defines how an app should behave when the value of a checkbox or toggle changes to true.
  • OnSelect: It defines when a user taps or clicks a control, and actions are taken.
  • OnUncheck: It defines how an app should behave when the value of a checkbox or toggle changes to false.
  • Reset: It specifies whether the control’s value is reset to its default.
  • Size: The font size of text displayed on a control.
  • Visible: Whether the control is visible or hidden.

Power Apps check box control example

Here we will see how to work with check box control in the Power Apps environment with an example.

We will create a check box control that will be associated with a text label based on the specific requirement. That is, when the user checks the check box control, the text label becomes visible; otherwise, it is disabled.

To work with this scenario, the following steps are:

  • Add a check box control to the Power Apps screen.
  • On the Text property, give a text to the check box control. i.e., “Accepts T&C”. It will reflect on the Power Apps check box control.
Text = "Accepts T&C"
Power Apps check box control example
Power Apps check box control example
  • Next, add a Label control to the Power Apps screen and insert some specific texts as per your requirement on the Text property.
  • Insert the below expression on the Visible property of the label control to make it visible and disable it as per the Power Apps check box control.
Text =  If('Chkbx_T&C'.Value = true, true)

Where Chkbx_T&C is the name of the Power Apps check box control.

Working with Power Apps check box control
Working with Power Apps check box control

Let’s preview this app. We can see when the check box is checked, the text label will display; otherwise, it will disable the text like the below:

Working with PowerApps check box control
Working with PowerApps check box control

This is how to work with the PowerApps check box control.

Read How To Set Default Value in Power Apps List Box Control

Power Apps check box multiple values

Here we will see how to work with Power Apps check box control that allows multiple values or multiple selections.

See also  How to create a sharing link for a file or folder using Power Automate?

In the above example, we have seen how to work with a single Power Apps checkbox control, but in this section, we will see how to use multiple checkboxes with multiple values within the Power Apps. The following steps are:

Suppose, we have prepared a SharePoint list named Projects having some columns such as:

Column Types
TitleDefault
Project HandlerPeople
HoursNumber
SkillsChoices
Column types of the SharePoint list
Power Apps check box multiple values
Power Apps check box multiple values

Now, we will build an app where we will use the above choices within the Power Apps check box controls.

  • Connect the above SharePoint list(i.e., Projects) to the Power Apps.
  • On the Power Apps screen, add an edit form and connect this edit form to the SharePoint list.
PowerApps multiselect check box
PowerApps multi-select check box
  • As per the requirement, we want to use the check box controls instead of a combo box control for the Skills data card. As a result, users can select multiple selections easily.
  • For this, unlock the Skill data card, then remove the combo box control from the data card.
Power Apps multiselect check box
Power Apps multi-select check box
  • Insert a vertical gallery into the Skills data card. For this, the following steps are:
    • Add a vertical gallery to the screen. Set the layout as Title (to show only the choices).
    • Then select that gallery and cut it.
    • Again select the Skills data card under the forms > right-click> Paste.
    • Insert the below expression on the gallery’s Items property to display the choices of the Skills column.
Items = Choices(Projects.Skills)
PowerApps check box multiple values
PowerApps check box multiple values
  • Inside the gallery, insert a check box control and place it near the choices. Select the check box and insert the below expression on the Text property. Now the check box will have names such as Power Apps, Power Automate, Power BI, etc.
Text = ThisItem.Value
powerapps multiple checkboxes
Power Apps multiple checkboxes
  • Now, save and preview the app. We can see the check box is allowing us to select multiple items like the below:
power apps select multiple checkboxes
Power Apps select multiple checkboxes

This is how to work with the multiple checkboxes within the Power Apps.

Read Power Apps Listbox items from SharePoint list

PowerApps checkbox reset on visible

In this section, we’ll look at how to reset the check box controls on the screen’s visible time. That is, when the screen opens or becomes visible, the check box controls will automatically reset.

We will use the above example where we have used multiple checkbox controls within a vertical gallery inside the Power Apps edit form, shown below:

Power Apps checkbox reset on visible
Power Apps checkbox reset on visible

To reset the above combo box controls on the screen’s visible time, the following steps are:

  • Insert the below expression on the Screen’s OnVisible property.
OnVisible = UpdateContext({VarClearCheckbox: false});
                    UpdateContext({VarClearCheckbox: true})

Where VarClearCheckbox is the name of the local variable,

Power Apps reset a checkbox to blank OnVisible
Power Apps reset a checkbox to blank OnVisible
  • Next, select the check box control and insert the local variable name i.e., VarClearCheckbox in the control’s Reset property.
Reset = VarClearCheckbox
Resetting the check box values in powerapps screen OnVisible time
Resetting the check box values in the PowerApps screen OnVisible time

Save and publish the app now. When we open the app to the above-mentioned screen, we can see that it clears all of the check box controls.

Reset Power Apps checkbox screen's onVisible
Reset Power Apps checkbox screen’s onVisible

This is how to reset the check box values in the Power Apps screen OnVisible time.

Power Apps checkbox checked value

We’ll look at how to get the Power Apps checkbox checked value(s) here. That is, we will create an edit form within Power Apps with multiple checkboxes to allow the user to select their options. The Power Apps checkbox checked value(s) are displayed when the user selects an item(s) from the check box controls.

To work with this requirement, we will use the Projects SharePoint list and the following steps are:

  • We have prepared an edit form using the Project SharePoint list as the data source. For the Skills, we have used the checkbox controls instead of the combo box control within that Datacard. (Follow the given link to use combo box control instead of the checkbox control > Power Apps check box multiple values)
Power Apps checkbox checked value
Power Apps checkbox checked value
  • Select the check box control (under the gallery) and insert the below expression on the OnCheck property.
OnCheck = Collect(Collskills,ThisItem)

Where Collskills is the name of the collection.

PowerApps checkbox checked value
Power Apps checkbox checked value
  • Similarly, insert the below expression on the OnUncheck property of the checkbox control.
OnUncheck = Remove(Collskills,ThisItem)
Get multiple checkbox checked value Power Apps
Get multiple checkboxes checked values Power Apps
  • Next, insert the collection name in the Default property of the Skills DataCard.
Default = Collskills
How to get value of selected checkbox Power Apps
How to get value of selected checkbox Power Apps
  • Similarly, set the collection name on the Update property of the Skills DataCard.
Update = Collskills
Power Apps get multiple Checkboxes checked values
Power Apps get multiple Checkboxes checked values
  • To get the Power Apps checkbox checked values, we will add a label control to the Skills Data card. Insert the below expression on the label’s Text property.
Text = "Selected Skill are:  " & Concat(Collskills, Value & ",")
Power Apps checkbox get checked values
Power Apps checkbox gets checked values

Now, save and preview the app. Let’s select some items from the checkboxes. We can see it will reflect the checked values within the Label control, shown below:

Get checked Value from Power Apps Checkbox control
Get checked Value from Power Apps Checkbox control

This is how to get the checked value from the Power Apps Checkbox control.

Read How to use Power Apps List box control?

PowerApps link checkbox to SharePoint list

Here, we will see how to link the checkbox controls to the specific SharePoint list. That means when the user inserts the data within a form and clicks on a submit button, the data will save into the SharePoint data source including the checkbox controls.

Let’s take the above Power Apps edit form as an example to implement this requirement and the following steps are:

  • On that Power Apps screen, add a button control to the screen and place the button under the edit form.
  • Rename the button control as Submit.
  • Also, add the following expression to the Onselect property of the button to save the inserted data as well as the checked value to the SharePoint list from the Power Apps.
OnSelect = SubmitForm(Project_Details_Form);

Where Project_Details_Form is the name of the Power Apps edit form.

PowerApps link checkbox to sharepoint list
PowerApps link checkbox to SharePoint list

Let’s preview the app and insert some data into the above controls. Also, checked some items from the check box controls as well.

Power Apps link checkbox to SharePoint
Power Apps link checkbox to SharePoint

Then click on the button control. We can see these items will be saved within the SharePoint list.

PowerApps Save checkbox to sharepoint list
PowerApps Save checkbox to SharePoint list

This is how to link the Power Apps check box to the SharePoint list.

See also  Power Automate error: The property '__metadata' does not exist on type 'SP.List'

Read Power Apps combo box default value

PowerApps yes/no checkbox

Here, we will see how to work with the Power Apps Yes/No checkbox. That means we will build 2 checkbox controls for Yes and No, respectively, in the Power Apps screen. Users can choose one option based on their needs. Let’s see how to work with this scenario.

  • Add two check box controls on the Power Apps screen and rename them as Yes and No.
PowerApps YesNo checkbox
PowerApps YesNo checkbox
  • Insert the below expression on the OnCheck property of the ‘Yes checkbox‘.
OnCheck = Reset(No_Chckbx);Set(SelectedChoice, "Yes")

Where No_Chckbx is the name of the ‘No Checkbox’ and SelectedChoice is the name of the global variable.

PowerApps Yes No checkbox
PowerApps Yes No checkbox
  • Insert the below expression on the OnCheck property of the ‘No checkbox’.
OnCheck = Reset(Yes_Chckbx);Set(SelectedChoice, "No")

Where Yes_Chckbx is the name of the ‘Yes Checkbox.

Power Apps YesNo checkbox
Power Apps YesNo checkbox
  • Next, add a label control to the screen to display the selected choice. Insert the below expression on the Text property.
Text = If(Yes_Chckbx.Value = true, "You have selected " & SelectedChoice, "You have selected " & SelectedChoice)
Working with Power Apps yesno checkbox
Working with Power Apps yes no checkbox

Let’s preview the app and select any choice from the check box (Ex: Yes). We can see the result will come like below:

Working with PowerApps yesno checkbox
Working with PowerApps yes no checkbox

This is how to work with PowerApp’s yes/no checkbox.

Power Apps checkbox set the background color

Here we will see how to set the background color within the Power Apps checkbox control. That means, when the user checks any check box, it will lighten with a specific color.

To work with this requirement, we will use the above example of the Yes No check box controls where we will set different background colors for both the check box controls, and the following steps are:

  • Insert the following expression into the CheckboxBackgroundFill property of the ‘Yes Checkbox‘ control shown above.
CheckboxBackgroundFill = If(Self.Value, LightBlue, White)
powerapps checkbox set the background color
Power Apps checkbox set the background color
  • Similarly, insert the below expression on the ‘No checkbox’ control’s CheckboxBackgroundFill property.
CheckboxBackgroundFill = If(Self.Value, Red, White)
Power Apps checkbox set the background color
Power Apps checkbox set the background color

Let’s preview the app and check any Power Apps checkbox controls (Ex: No). We can see it will change the checked checkbox background color like below:

Power Apps Checkbox Background Color change on checked
Power Apps Checkbox Background Color change on checked

This is how to set the Power Apps Checkbox Background Color.

Read Power Apps combo box filter

Power Apps checkbox oncheck

In this section, we’ll look at how to use the Power Apps checkbox oncheck property. Assume there is a requirement, and the requirement specifies a check box and a button control on the Power Apps screen.

When the user checks the check box control the button will activate; otherwise, it will come in disable mode. To work with this requirement, the following steps are:

  • Add a check box control to the Power Apps screen.
  • Give a name to the Power Apps checkbox control i.e., Accept.
Power Apps check box oncheck
Power Apps check box oncheck
  • Next, we will add a button control and rename it as Activate.
  • Insert the below expression within the button’s DisplayMode property.
DisplayMode = If(Accept_Chckbx.Value = true, DisplayMode.Edit, Disabled)
PowerApps checkbox oncheck
PowerApps checkbox on check

Let’s preview the app and we can see when the Power Apps checkbox control will check the button will be visible.

Power Apps checkbox on check
Power Apps checkbox on check

This is how it works when the Power Apps checkbox control is checked.

Power Apps checkbox default value

Here, we will see how to work with the Power Apps checkbox default value. Suppose, we have a SharePoint list having some random column including a Yes/No field named Active like below:

powerapps checkbox default
PowerApps checkbox default

We will create a Power Apps vertical gallery using the SharePoint list mentioned above.

powerapps checkbox set default
Power Apps checkbox set default

As per the scenario, when a user selects an item from the vertical gallery, the default data from the Active column, whether true or false, is displayed.

To work with this requirement, the following steps are:

  • Insert the below expression on the TemplateFill property of the gallery. As a result, it will indicate which item is selected or not.
TemplateFill = If(ThisItem.IsSelected,RGBA(215,213,240,5),RGBA(215, 180, 240, 1))
Power Apps check box default value
Power Apps check box default value
  • Next, we will add a label control to the screen and insert the below formula on the Text property to display the selected item’s employee name.
Text = Employee_Gal.Selected.EmployeeName.DisplayName
  • Similarly, add a check box control to display whether the selected gallery item is active or not. For this, insert the below expression on the Power Apps check box control’s Default property.
Default = If(Employee_Gal.Selected.Active = true, true, false)

Where Employee_Gal is the name of the Power Apps vertical gallery name.

Default value in Power Apps check box control
Default value in Power Apps check box control

Let’s select the second item from the gallery to see how the default value will come in the Power Apps check box control.

Power Apps check box default
Power Apps check box default

This is how to check the default value within the Power Apps check box control.

Read Power Apps Combo box with SharePoint list

Power Apps checkbox default checked

Would you like to work with the Power Apps checkbox default checked? That means that when you launch the app, the check box control will be checked by default.

By doing a simple process, we can achieve this need. The following steps are:

  • Add a check box control to the Power Apps screen.
  • Give a name to the check box control on the Text property (ex: Select)
  • Set the OnCheck property as below:
OnCheck = true
powerapps checkbox default checked
Power Apps checkbox default checked

That’s all! Now, whenever you launch the app, the check box control will be checked by default.

See also  Power Apps Gallery Filter [With Real Examples]

This is how to set the default value as checked within the Power Apps combo box control.

PowerApps checkbox reset

Do you want to reset the check box control within a gallery via a single click?

We recently required to reset the Power Apps checkboxes that are used in a gallery. We’ll add a reset button to the gallery. As a result, if the user enters incorrect data into the gallery’s check box control, the item or check box control can be reset by clicking on the icon. If this is your requirement, then here is the answer and the following steps are:

We will use the above Employee SharePoint list to prepare a gallery that will display the Employee Name and the Join date like below:

PowerApps checkbox reset
PowerApps checkbox reset
  • In the above gallery, we will insert a checkbox control to display whether the respective employee is active or not. Also, insert the below expression on the checkbox’s Text property to display the value as True/false instead of Option.
Text = ThisItem.EmployeeName.DisplayName
Power Apps checkbox reset
Power Apps checkbox reset
  • Insert the below expression on the checkbox’s Default property to display the check mark on the respective true value.
Default = If(ThisItem.Active = true, true, false)
Reset Power Apps Check box control
Reset Power Apps Check box control
  • Next, add a reset icon to the Power Apps screen and place it above the Power Apps gallery. Insert the below expression within the reset icon’s OnSelect property.
OnSelect = UpdateContext({VarReset: true});
UpdateContext({VarReset: false})

Where VarReset is the name of a local variable.

Resetting the check box values in PowerApps
Resetting the check box values in PowerApps
  • Finally, set the local variable name within the check box’s Reset property.
Reset = VarReset
How to reset checkbox control in Gallery in PowerApps
How to reset checkbox control in Gallery in PowerApps

That’s all! Let’s check out the app. We can see that if we select incorrect information in the check box control, it can be reset by clicking the reset icon.

This is how to reset the checkbox control in PowerApps Gallery.

Read How to Sort Combo Box Items in Power Apps

Power Apps patch checkbox value to SharePoint list

Here we will see how to patch a check box value to the SharePoint list. That means when the user checks a check box control, the selected item will be patched to the SharePoint list. To work with this requirement, the following steps are:

Suppose, we have a SharePoint list named Task List with a Title and Status(choice) column.

PowerApps patch checkbox SharePoint list
PowerApps patch checkbox SharePoint list
  • On the Power Apps screen, add a text input to insert the task.
  • Next, add a blank vertical gallery to the screen.
  • Set the Items of the gallery as below:
Items = Choices('Task list'.Status)

Where ‘Task list’ is the name of the SharePoint list and Status is the name of the choice column of the SharePoint list.

Power Apps patch check box to SharePoint list
Power Apps patch check box to SharePoint list
  • Add a check box control into the gallery and insert the below expression on the checkbox’s Text property.
Text = ThisItem.Value

As a result, it will display all the choices in the gallery like below:

Patch check box to SharePoint list Power Apps
Patch check box to SharePoint list Power Apps
  • To patch the selected check box to the SharePoint choice column, insert the below expression on the OnCheck property of the check box control.
OnCheck = Patch(
    'Task list',
    Defaults('Task list'),
    {
        Title: Title_TxtInput.Text,
        Status: {
            '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
            Value: Status_Chckbx.Text
        }
    }
)

Where,

  • Title and Status: The name of the SharePoint columns.
  • Title_TxtInput: The name of the text input control.
  • Status_Chckbx: The name of the check box control.
Power Apps patch check box to SharePoint choice
Power Apps patch check box to SharePoint choice

Let’s preview the app. We can see when we insert data to the text input and check any check box control.

PowerApps patch check box to SharePoint choice
PowerApps patch check box to SharePoint choice

We can see the item will be patched to the SharePoint list like below:

Patch a PowerApps checkbox to SharePoint choice column
Patch a PowerApps checkbox to SharePoint choice column

This is how to patch a PowerApps checkbox to the SharePoint choice column.

Read How to Patch Power Apps Combo Box

Power Apps checkbox set value

In this section, we’ll look at how to set the value of the Power Apps Checkbox control. That is, when a user enters data into a specific control, the corresponding checkbox is checked by default.

To work with this scenario, the following steps are:

  • On the Power Apps screen, add a date picker control. Under the Insert tab > Inputs > Date picker.
powerapps checkbox set value
powerapps checkbox set value
  • Next, add a check box control to the screen and give a text to the control as power your requirement.
  • Also, insert the below expression into the checkbox control’s Default property.
Default = If(!IsBlank(DatePicker1), true, false)
Power Apps checkbox set value
Power Apps checkbox set value

Let’s preview the app. We can see when we select a date the check box will automatically check.

set value on Power Apps checkbox
set value on the Power Apps checkbox

This is how to set a value on the Power Apps checkbox control.

Conclusion

From this Power Apps Tutorial, we learned the usage of the checkbox control within the Power Apps based on various scenarios. Such as:

  • Power Apps check box control
  • Power Apps check box control properties
  • Power Apps check box control example
  • Power Apps check box multiple values
  • PowerApps checkbox reset on visible
  • Power Apps checkbox checked value
  • PowerApps link checkbox to SharePoint list
  • PowerApps yes/no checkbox
  • powerapps checkbox set the background color
  • Power Apps checkbox oncheck
  • powerapps checkbox default
  • powerapps checkbox default checked
  • PowerApps checkbox reset
  • powerapps Patch checkbox SharePoint list
  • Power Apps checkbox set value

You may like the following Power Apps tutorials:

>