Display data (type= choice in Sharepoint) in Check box format in Edit form.

[RyoIshi731]

Hi  

I am creating report with original source sharepoints.

I am setting Edit Form and want to display choice data in Check box format, is this possible?

Like below picture. This picture is from PDF.

Thanks in advance for your advice.

[PriyankaGeethik]

Hi @RyoIshi731 ,

Try choice data will multiselect option when creating the column in SharePoint.

[RyoIshi731]

@PriyankaGeethik  

Thanks for your support.

I changed Sharepoint setting like this.

However the powerapps still show list down not checkbox. (item=service category)

[RusselThomas]

Hi @RyoIshi731 ,

Do you want them to be able to select multiple choices?

I believe there is a way to do what you want, but a lot depends on this feature.

Kind regards,

RT

[RyoIshi731]

@RusselThomas 

Yes, I want to select multiple choices.

How can I do it?  I have no idea so far.  Do you mean is it very complicated?

[RusselThomas]

Hi @RyoIshi731 ,

It's a little complicated, but I can walk you through it 🙂

First, can you tell me what your Edit form Item: property is please?

Kind regards,

RT

[RyoIshi731]

Thank you so much for your kind support.

I want to show check box for Service Category.

There are 8 items, so 8 checkbox is required.

Data source is Maintenance Report List in Sharepoint.

[RusselThomas]

Hi @RyoIshi731 ,

I'm going to sign off in a while, so I'll make an assumption that the Item: property of your update form is based on a selection in another gallery (i.e. BrowseGallery.Selected) and try to explain so long - and it's a long explanation only because I prefer to explain a lot, rather than just paste code snippets, which would certainly be a shorter post 😁

The thing to remember with Choices is that they are either records or tables - not just values.  Record if it's a single selection type, table if it's a multi-select type.  

Based on this construct, PowerApps will only allow you to save data back into SharePoint as long as it conforms to the original column construct which in this case would be a record or a table.

When you add an edit form, PowerApps will automatically pick a control based on the column type it gets from datasource info.  For choice columns, it will choose a dropdown for single-select choices and a combobox for multi-select choices.  In your case, we're considering multi-selects, so assuming you've updated SPO and refreshed the source inside PowerApps, your choice card Update: property will default to the combobox.SelectedItems property.  Whatever is selected in the combo will be saved back and overwrite what was there before, so if you had 20 options selected before and then unselect one of them, PowerApps will save back a table containing 19 items. This is important, because this is what we will hijack to replace the combobox with a checkbox gallery.  

To avoid picking up errors from anything you might have tried before, try this to test;

• Add a new screen and insert an edit form (don't duplicate your current screen as this will just carry everything across and the point is to start new to make sure it works first). 
• Set the Item: property of the form as it's set on the original (for this example I'm assuming it's going to be a selected record from another gallery somewhere - in my case BrowseGallery.Selected)
• Right-click your choice field card on your form and unlock it.
• Select the current input control (should be a combobox if your column update has come through).
• Insert a blank vertical gallery into the card.  Confirm that the gallery is inside the card by checking the hierarchy in your tree view and making sure it's at the same level as your combobox, indented under the card.  If it isn't, select the gallery and cut it with ctrl+x, then select the combobox (or any other) control inside your card again and paste with ctrl+v
• Set the gallery Items: property to the same as your combobox Items: property - it should be something like

Choices([@yourSPOList].choiceColumnName)

 where yourSPOList is your source and choiceColumnName is the name of the choice column.

• Set the Gallery layout to Title - we only need one field - now you should see your Gallery populate with your choices.  You can set the gallery Wrap: property to 2 so you get two choices side by side.  The text label should default to the first column value and Choice() only spits out one column by default named "Value" - so the text label Text: property should default to ThisItem.Value 
• Format the label and with the label selected, add a checkbox to the gallery.  Again, make sure the checkbox is inside the gallery - easy to see as it will be repeated for each row of the gallery.  Clear the Text: property of the checkbox to get rid of the "Option" text and format the checkbox how you want it.

At this point you should be sitting with a checkbox gallery but the checkboxes aren't connected to the data.

Now comes the complicated bit - first, we need to make sure that your gallery of checkboxes and values picks up whatever has been saved already, so as you edit an existing record, what was selected before is checked, and what wasn't isn't. 

The Combobox solves this quite neatly as it has a DefaultSelectedItems property that can be populated with the current record values.  

Adding a gallery to a card is a little more challenging as it creates another level of scope, which means the gallery components can't necessarily "see" the record the form is editing.  For this to work, we need to reference the current record directly.  This is easy enough, but here I need to remind you that I have no clue what your form Item: property is - which tells the form what record it's editing - so I have to make one up.  You need to substitute my assumption, (BrowseGallery.Selected) for your actual form Item: property value.

Set the Checkbox Default: property to

ThisItem.Value in BrowseGallery.Selected.ChoiceColumn.Value

Now the checkboxes will align with whichever options were originally selected when the form is loaded.

Next, we need a way to collect the changes a user makes to this selection and save them back to SharePoint when the form is submitted.  I tend to find Gallery.AllItems is an unreliable data source, especially when its scope has been embedded in a form, so I prefer to construct this collection myself from the existing record, which is as simple as follows;

 ClearCollect(collectUpdates, BrowseGallery.Selected.ChoiceColumn)

The only question is when do you do this - which is largely up to you and depends on the user experience. 

If you are using a browse gallery to select items to edit, you could create the collection using the same event that brings the user to this screen, (just before the Navigate() function), or when the screen loads by using the screen OnVisible: trigger, or any other event that makes sense to you - but for this example I'll just include a little logic in the checkbox OnCheck: and OnUncheck: events - because these events can occur multiple times in the same screen, we just need to add some logic to only create the collection if it's currently empty.

OnCheck:

If(
   IsEmpty(collectUpdates), 
    ClearCollect(collectUpdates, BrowseGallery.Selected.ChoiceColumn); 
    Collect(collectUpdates, ThisItem.Value),
    
    Collect(collectUpdates, ThisItem.Value)
)
/*this checks if the collection has been created yet, and if not, creates it and adds the selected value - considering you can't check a checked box, it's safe to assume the value isn't in the list already.  If the collection isn't empty, we just add the value
Using ClearCollect() is a little redundant as we already know the collection is empty, but I wanted to highlight the difference between that and the Collect() which appends the data to the collection*/

If you're creating the collection elsewhere before you get to the screen or as you land on it, the only thing you need here is the Collect(collectUpdates, ThisItem.Value)

OnUncheck: (same idea as above, just removing the value instead of adding it)

If(
   IsEmpty(collectUpdates), 
    ClearCollect(collectUpdates, BrowseGallery.Selected.ChoiceColumn);
    RemoveIf(collectUpdates, Value=ThisItem.Value), 

    RemoveIf(collectUpdates, Value=ThisItem.Value)
)

As per the above, if you're creating the collection elsewhere, the only thing you need here is RemoveIf(collectUpdates, Value=ThisItem.Value) 

Now, we just need to make sure that this collection gets cleared each time the screen is loaded.  There are other events you could use, but the OnVisible: event for the screen in this context is probably the most practical - so set the OnVisible: property of the edit form screen to

Clear(collectUpdates)

Nearly there - the last thing we need to do is change the card on the form to update SharePoint based on what's in the collection, instead of the combobox.  Make sure you have the card selected for the choice field in the form, easiest way is to select it on the tree view on the left.  Set the card's Update: property to

collectUpdates

Now, you should be able to test by adding a button to submit the form.  If everything works as expected, you can simply copy the gallery from this form's card to your original form's card and update the card Update: property - again, if the copy/paste pops the gallery outside the form, cut the gallery from where it landed and paste again into the card (if the card is locked it should prompt you to unlock it).

You can also now get rid of the combobox as it's not used or needed, but to make life easier you may want to copy its name first, then delete it, then rename your gallery to the same name as the combo.  This is only useful to avoid having to correct the hidden components of the card that refer to the combo and will error out when the combo disappears.  Once you rename the gallery to the combo, the other components will link to it automatically and the errors should disappear, then you can rename the gallery to whatever you want and the linked components will auto-update themselves.

Hope this helps 🙂

RT

[RusselThomas]

Hi @RyoIshi731 ,

Sorry, not sure if this is translating correctly - I understand your data source is sharepoint, but the form Item: property tells the form which record in the source it's editing - this is the one we will want to substitute for Browse.Gallery.Selected in my answer.

Kind regards,

RT