Showing results for 
Search instead for 
Did you mean: 

How to create a Dual List Selector in an EditForm

The instructions below apply to both SharePoint and Dataverse. Due to its flexibility and features, this tutorial uses a Gallery control, although similar principles may also apply for a ListBox control.


Set up


1. Insert an EditForm control into your screen

2. Set the data source for the Form to your data source

3. Insert your Multi-Choice field into the Form

4. Unlock the DataCard for the Choice field

5. Inside the DataCard, insert two vertical Gallery controls and position them side by side


6. Expand the DataCard to a reasonable height to accommodate both Gallery controls

7. Ensure the Layout property for both Gallery controls are set to Title




8. Set your Gallery controls to your desired height/width/format


9. For the purpose of this tutorial, we will call the left Gallery “GalleryLeft_Selector”, and the right Gallery “GalleryRight_Selected


10. Do not delete or modify the existing Combo Box control inside this DataCard. For this tutorial, the name of this Combo Box is DataCardValue1.


11. For GalleryRight_Selected, select the arrow Icon on and set the Icon property to:




Optional steps


The following steps are optional but strongly recommended so that we can test the solution:


1. Insert a Gallery outside of the Form. We call it Gallery_Data


2. Set the Items property to your Data Source. For this demo, I am going set the Items property to:


    'My Data',
    Modified, //or use 'Modified On' for Dataverse


3. Insert a Label control inside Gallery_Data and on the Text property of the Label, enter:


    ThisItem.'Your Multi-Choice Field',
    Value & ","


4. Add a Button control into your app, and set the OnSelect property to:




Note that "Form1" is the name of our Form for this tutorial. 


5. Add another Button control into your app, and set the OnSelect property to:




6. On the OnSelect property of the Gallery_Data, enter:


    ThisItem.'Your Multi-Choice Field'.Value
//note if you are using Dataverse, appending ".Value" to the line above is NOT required


7. On the Item property of the Form, enter:




8. On the OnSucess property of the Form, enter:





We should now have a set up which looks like this:




Configuring the dual Gallery controls


1. On the Items property of GalleryLeft_Selector, enter:


    Choices('Your Multi-Choice Field'),
    Not(Value in col_Selections)


2. Notice we now have an error for the Label control. Select the Label for both Gallery controls and in the Text property, enter:




3. On the OnSelect property of the NextArrow Icon inside GalleryLeft_Selector, enter:




4. On the Items property for GalleryRight_Selected, enter:




5. On the OnSelect property of the arrow Icon control inside GalleryRight_Selected, enter:




6. On the DefaultSelectedItems property for DataCardValue1, enter:


    Choices('Your Multi-Choice Field'),
    Value in col_Selections


7. Test the solution. If the solution is satisfactory, hide DataCardValue1 by setting the Visible property to False, or setting the Visible toggle to Off.


New item example:

sample new.gif


Edit item example:

sample edit.gif


If you liked this blog, please give it a Thumbs Up.

Imran-Ami Khan




Hi, thanks for this detailed blog. So I tried to recreate this scenario (I left out the optional parts).


When I do everything exactly like you described (I checked this many times) I get following problems:


  1. Items get properly populated to combobox DatacardValue1 and Items property for GalleryRight_Selected but: when depopulating Items back, last item stays shown in GalleryRight_Selected, although it was removed from combobox DatacardValue1. After submitting the form, I can see though that the Sharepoint column of DatacardValue1 has been updated correctly
  2. When opening the item again, both combobox DatacardValue1 and GalleryRight_Selected are not populatedGalleryLeft_Selector shows all values - although the sharepoint column in the background is not being changed, so it just does not filter values in all 3 objects properly.

For problem 1: if I change Items property for GalleryRight_Selected from DatacardValue1.SelectedItems.Value to col_Selections - the population and depopulation works correctly.


However this workaround does not change the behaviour with problem 2, it stays exactly the same.


Correct me if I'm wrong and misunderstand how it works, but on each new app start col_Selections should be empty or rather non-existent yet, right? Thus DefaultSelectedItems property for DataCardValue1 from your part 6 with following code: 


    Choices('Your Multi-Choice Field'),
    Value in col_Selections

 shoud just generate blanks which is exactly what I observe.


Thus, it seems to me that there should be some additional collect code to create col_Solutions in onStart property of the APP to give the form an initial value of col_Solutions to start with.


However I could not figure out a suitable code to do this yet.

Hello @Nuriel - I am not clear on what data source you're using, but I have validated this in both SharePoint and Dataverse and I cannot reproduce the issues you have highlighted.


I would suggest following the steps outlined optional section because at present, I do not know how you're populating your Form with a record.


I marked that section as optional because people will have different methods for populating their Forms with a record, and did not want anyone to think the solution above would only work with a selected Gallery item.

Hello @Amik , I am using Sharepoint here. When I first read your blog I thought that this optional part was mere for optical purpose of having another gallery to show some data. Since I didn't require this and you wrote that it was optional, I thought, it would work without it.


Now when I look through that optional code, I think it does exactly what I meant, what the rest lackls, it is populating the collection at a yet different place, so that the dual selector part can have something to work with upon initiation.


I will not be able to use this in my application due to its specific. But I will build it later today first to test and then I will try and see, if I can adapt part of that code to my app specifics, to initiate the collection in similar manner.

@Nuriel that section is optional but populating your Form with a record is not optional. Typically, this is done using a selected Gallery item, but as mentioned already in my previous response, this is not the only way to populate a Form with a specific record - it all depends on how you want your app to work and the guidance above serves as an example.

Ok, I now went and setup everything exactly as in the example and added the whole optional part as in the example as well. I am using a sharepoint lookup column's combobox as DatacardValue1 (in my screenshot called Projekte_cmb)


I am getting the following (same) error both on the Items property of GalleryLeft_Selector and on the DefaultSelectedItems of DatacardValue1. 



This error is blenden on the col_Selections collection and appears as soon as I enter the following code of the nr. 6 of the optional part into the OnSelect property of the Gallery_Data


    ThisItem.'Your Multi-Choice Field'


By the way, it's the same error I was getting when I was tried to populate col_Selections with a record by my means.


@Nuriel ok I see the problem. For SharePoint, try appending ".Value" to this line below:


ThisItem.'Your Multi-Choice Field'.Value


Hell o@Amik I corrected that one.


But now I am getting one new error for the Default value of the Multiple Choice Column Datacard which is ThisItem.'Your Multi-Choice Field' (was not changed by me).



This error did not happen before. I tried adding .Value behind here as well, but it did not change the error.


I still published the app to check and now the interface works, everything is passed on correctly.


However, if I select at least one item in Gallery on Submit I get following error







@Nuriel - sorry I have been away. The above tutorial applies only to Canvas Apps created from the App Studio and has not been tested on SharePoint customized forms.

@Amik : no worries. In the mean time I solved this for my case, but I don't remember anymore 🤣 will look it up later maybe and post. 


I am working in the Canvas App environment as well, just passing initial variables through the otherwise empty customized form.