How to create a Dual List Selector in an EditForm
Ami K
15,654
Like
Share
ReportThe 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:
Icon.ChevronLeft
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:
Sort(
'My Data',
Modified, //or use 'Modified On' for Dataverse
SortOrder.Descending
)
3. Insert a Label control inside Gallery_Data and on the Text property of the Label, enter:
Concat(
ThisItem.'Your Multi-Choice Field',
Value & ","
)
4. Add a Button control into your app, and set the OnSelect property to:
SubmitForm(Form1)
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:
NewForm(Form1);
Clear(col_Selections)
6. On the OnSelect property of the Gallery_Data, enter:
Set(
gbl_record,
ThisItem
);
EditForm(Form1);
ClearCollect(
col_Selections,
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:
gbl_record
8. On the OnSucess property of the Form, enter:
Set(
gbl_record,
Self.LastSubmit
)
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:
Filter(
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:
ThisItem.Value
3. On the OnSelect property of the NextArrow Icon inside GalleryLeft_Selector, enter:
Collect(
col_Selections,
ThisItem.Value
)
4. On the Items property for GalleryRight_Selected, enter:
DataCardValue1.SelectedItems.Value
5. On the OnSelect property of the arrow Icon control inside GalleryRight_Selected, enter:
Remove(
col_Selections,
ThisItem
)
6. On the DefaultSelectedItems property for DataCardValue1, enter:
Filter(
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:
Edit item example:
------------------------------------------------------------------------------------------------------------------------------------------------
If you liked this blog, please give it a Thumbs Up.
Imran-Ami Khan
Comments
-
How to create a Dual List Selector in an EditForm
@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.
-
How to create a Dual List Selector in an EditForm
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
-
How to create a Dual List Selector in an EditForm
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
Set( gbl_record, ThisItem ); EditForm(Form1); ClearCollect( col_Selections, 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.
-
How to create a Dual List Selector in an EditForm
@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.
-
How to create a Dual List Selector in an EditForm
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.
-
How to create a Dual List Selector in an EditForm
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.
-
How to create a Dual List Selector in an EditForm
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:
- 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
- When opening the item again, both combobox DatacardValue1 and GalleryRight_Selected are not populated, GalleryLeft_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:
Filter( 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.
*This post is locked for comments