PowerApps – using Checkbox controls with Multi-Valued Choice columns

2+

At some point Microsoft PowerApps Team added support for fields with multiple values through a Combo Box control. However, as of this moment (2/3/2019) there is still no native support for Checkbox controls even when you configure your Choice column in SharePoint to have Checkboxes (allow multiple selections).

There is a good article (https://powerapps.microsoft.com/en-us/blog/multivaluedchoicesinforms/) published by Carlos Figueira from PowerApps Team that shows how to implement Checkbox controls. The downside of it was using a Text column that imitates a Choice column.

It’s been a while since that article was published, so it’s hard to say if anyone has done it differently.


In this post I will explain how to pair Checkbox controls with a true Multi-Valued Choice column.

Please note, in my example I will be using a PowerApps Form rather than PowerApps App; however, it shouldn’t make any difference.

Let’s create a SharePoint List, name it TestList, add a TestListColors Choice column. Red, Green, Blue are the values; Checkboxes (allow multiple selections) is selected.

Here is how it looks with a test1 item:

Next, we use a PowerAppsCustomize forms action to create a default PowerApps Form automatically:

Just like in the article above we need to remove a Combo Box control from the TestListColors Data Card, then add three Checkbox controls – Checkbox1 (Text value – Red), Checkbox2 (Text value – Green), Checkbox3 (Text value – Blue). Don’t forget to clear some minor errors after the Combo Box has been removed as there are always some dependencies.

There are basically 2 steps that we need to take care of:

  • saving data when checkboxes are selected;
  • loading and displaying correct checkboxes when reading previously saved data.

STEP 1 – SAVING DATA

For each Checkbox we need to change both OnCheck and OnUncheck values, they are all the same:

ClearCollect(
	SelectedColors,
		If(Checkbox1.Value,"Red"),
		If(Checkbox2.Value,"Green"),
		If(Checkbox3.Value,"Blue")
);
ClearCollect(
	SelectedColors,Filter(
		SelectedColors,
		!IsBlank(Value)
	)
)

What it does is when checking or unchecking the checkboxes it updates a collection. It also removes blank values.

The Update field for the TestListColors_DataCard1 needs to be:

SelectedColors.Value

STEP 2 – LOADING AND DISPLAYING DATA

A Default value for each Checkbox:

If(
	{
		'@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
		Id: 0,
		Value: "Red"
	} in TestListColors_DataCard1.Default,
	true,
	false
)

Note, that Id and Value in the code above have to match a corresponding Checkbox.


RESULT 

2+

This Post Has 22 Comments

  1. Pavel – Great post! This is exactly what I need in my current form. I am having trouble with 2 things in your post:

    1. What do I set the “Update” property to in the Datacard that held my combobox that now holds my checkboxes?
    2. I do not understand this part of your code:

    );
    ClearCollect(
    SelectedColors,Filter(
    SelectedColors,
    !IsBlank(Value)
    )
    )

    I believe this would be used on the OnUnCheck property. This looks like on UnCheck I will be clearing the entire collection. Does each checkbox write to its own collection? If not, if I uncheck the Red box…wouldn’t I be clearing the entire collection? Obviously I’m not understanding something here. 🙂

    Any help would be greatly appreciated.

    Bill

    0
    1. Hi Bill,
      Thanks for the kind words!
      1) Looks like “Update” should be YourCollection.Value
      2) That very part takes care of blank values (when a checkbox is not selected). If you don’t use it, then you collection will have values {Red”, “Blue”, “”} (you don’t really want to try to save that last one “”).
      The code is exactly the same for both OnCheck and OnUncheck.
      If more questions, don’t hesitate to contact me.

      0
  2. Thanks Pavel! I now have the data saving back to my SharePoint list (I’m using a PowerApp App) but am struggling with the Loading and Displaying Data step. What does Id refer to in the below?

    If(
    {
    ‘@odata.type’: “#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference”,
    Id: 0,
    Value: “Red”
    } in TestListColors_DataCard1.Default,
    true,
    false
    )

    0
    1. Bill,
      If your multi-choice field has Red, Green, Blue values then Red would be Id: 0, Green would be Id: 1, Blue would be Id:2.
      So each check box should have its own code similar to that.
      It’s somewhat hard-coding but shouldn’t be an issue if the data/purpose of the form doesn’t change often.
      Thanks!

      0
  3. Do you know where can I find out what Id is associated to each checkbox?

    0
    1. As an example,
      If your Checkbox1 is dedicated to Red color, then its code should have Id: 0.
      If your Checkbox2 is dedicated to Green color, then its code should have Id: 1. And so on.
      The association is made by you.

      0
  4. I have it working now! This is a great way to use checkboxes with multi-valued choice columns. I’m assuming that Id’s are assigned for each checkbox I put into my Datacard automatically by PowerApps. And I’m assuming the Id values start at 0 and progress. So if I have 5 checkboxes, my Id values will be 0, 1, 2,3 and 4. If I have 10 checkboxes, it will be 0,…9. Thanks again Pavel.

    0
    1. Yep, that’s it!
      Though IDs are not about the number of checkboxes, they must match the IDs of possible values in a multi-choice column.
      I can have just 2 checkboxes:
      Checkbox1 (for Red color) – Id: 0
      Checkbox2 (for Blue color) – Id: 2
      Note how I skipped Green value with its Id: 1
      Hope it makes sense.

      0
  5. This is fantastic, many thanks. However, there seems to be a problem with caching. When a selection is made when editing a form, you either have to open another list item or refresh the browser otherwise if you open the item you just edited without doing that, it doesn’t show the edits. Have you got the same problem with this?

    0
    1. Hi Anthony,
      You are welcome and thanks for the kind words!
      Yes, that sounds so familiar and reminds of some pain.
      First, please check if this option is on for you and turn it off if it is – go to “File” – “App Settings” – “Advanced settings” – make sure this experimental feature is off “Use longer data cache timeout and background refresh”.
      That option was screwing me up when I was trying to open the item that I have just submitted. Now, this is important, it was only affecting a previously submitted item, not the rest of them.
      If that’s the problem, then it’s not related to Checkboxes. It can happen in any form.

      0
      1. I am applying same approach for days of work where days from Monday to Friday able to be selected . Any clues for working out this.
        Thanks

        0
  6. How can apply same approach for days of work where use able select the days.

    0
    1. Hi Ram,
      What is not working for you? Monday through Sunday are just text values. Just replace “Red” and other colors from my example with your 7 days. If I’m missing something, please let me know.
      Thanks!

      0
  7. Hi,
    I did exactly the provided solution, however the data is not being saved into the Sharepoint list linked to my Powerapps form.

    0
  8. Hi,

    I followed the solution, it’s not being recorded to the sharepoint list though.

    0
    1. Hi Jessa,
      Sorry for not getting back earlier. I replied to your email.
      Thanks!

      0
  9. Hi Pavel!
    This article is amazing! I was able to successfully SAVE and LOAD the multiple checkbox values to my SharePoint List using your method. But I’m running into an issue that I’m wondering if you can help?

    For some reason, as soon as I used this method, it won’t display any records anymore (in View mode). When I click any record in the SharePoint List, it only loads the first record on the list. If I click the newest record or any other record, it still only displays the first record. Even after doing a hard refresh, the form doesn’t seem to refresh and show any other records, it only displays and allows editing the first record.

    Would you know why that happens?
    When I remove all the code from your article, it successfully displays any record again. So something in the code is preventing it from displaying the records.

    0
    1. Hi Justin,
      Glad I could help with my blog.
      First, please check if this option is on for you and turn it off if it is – go to “File” – “App Settings” – “Advanced settings” – make sure this experimental feature is off “Use longer data cache timeout and background refresh”. That setting is per application I believe.
      Please let me know.

      0
      1. Hi Pavel,
        Thanks for your quick response. Unfortunately, that didn’t work. Now it seems even if I remove the checkboxes, the issue still happens. It only gets fixed if I go to ‘See all versions’ and restore an older version.

        I noticed this code in the Form’s “Item” field that was put there by default:
        If(IsBlank(SharePointIntegration.Selected) || IsEmpty(SharePointIntegration.Selected),First(Requests_Test),SharePointIntegration.Selected)

        So I’m guessing for some reason, after implementing the method in your article – it’s seeing the selected SharePoint List item as blank or empty, therefore only showing the first record?

        It’s very strange because it’s saving all new items fine with the checkbox values. So I’m really confused why it’s not seeing any of the selected items given that your code doesn’t touch that?

        0
        1. Replied through email. Thanks!

          0
  10. Hi Pavel,

    I followed your example and it worked like a charm. I have a form that has four choice fields that require multiple selections, and I was looking for a way to handle the multiple selections. This will work great, I can see.

    0
    1. Hello Dhruv,
      Happy I could help!

      0

Leave a Reply

Close Menu