cancel
Showing results for 
Search instead for 
Did you mean: 
Amik

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

 

Amik_0-1697416993536.png

 

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:

 

Amik_1-1697417813579.png

 

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:

sample new.gif

 

Edit item example:

sample edit.gif

------------------------------------------------------------------------------------------------------------------------------------------------


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

Imran-Ami Khan

Comments