Power Community

Power Community

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.

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

The following steps are optional. They have been added here so we can test the solution works:

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'
)

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

gbl_record

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

Set(
    gbl_record,
    Form1.LastSubmit
)

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

Amik_1-1697417813579.png

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

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Embed Python Visuals in Power BI Desktop – Quick Review

Hi Folks, This post is all about embedding Python visuals in Power BI, you will need to install the respective...

More Articles Like This

- Advertisement -spot_img