Power Apps – Rearrange gallery items using dropdown

6 steps

Introduction:

We will create a demo set up on how to re-arrange gallery items with a combo box. This can be an alternative solution because as of writing, there is no out-of-the-box drag and drop control. We will use a combo box instead of a dropdown because with a combo box, we can work around the erratic behavior of its OnChange property. This tutorial uses a collection as a demonstration.

Step 1:

Insert a button named Button1. Change the following properties:

Text property

"Reset"

OnSelect property

ClearCollect(myTable,
Table(
{ID:1,Title: "Item Number One",Order: "1"},
{ID:2,Title: "Item Number Two",Order: "2"},
{ID:3,Title: "Item Number Three",Order: "3"},
{ID:4,Title: "Item Number Four",Order: "4"})
);

UpdateContext({varReset:false});
UpdateContext({varReset:true});

Note: The Order column should be text instead of number because a combo box does not accept numbers to display in its choices.

Step 2:

Click Button1 to create the collection myTable.

Step 3:

Insert a button named Button2 below Button1. Change the following properties:

Text property

"Sort"

OnSelect property

ClearCollect(myTable,Sort(myTable,Order,SortOrder.Ascending))

Step 4:

Insert a blank vertical gallery named Gallery1. Change the following properties:

TemplateSize property

Items property

myTable

Step 5:

Insert a label named Label1 inside Gallery1. Change the following properties:

Text property

ThisItem.Title

Step 6:

Insert a Combo box named ComboBox1 inside Gallery1. Change the following properties :

Items property

myTable

DefaultSelectedItems property

ThisItem

OnSelect property

UpdateContext({IsSelected:true});

SelectMultiple property

false

IsSearchable property

false

Reset property

varReset

OnChange property

If(IsSelected,
//Identifying the current item and the replacement item
UpdateContext({varReplacementOrder:Self.Selected.Order});
UpdateContext({varReplacementID:
LookUp(myTable,Order=Self.Selected.Order).ID});
UpdateContext({varThisOrder:ThisItem.Order});
UpdateContext({varThisID:ThisItem.ID});

//If user selects a blank value, reset it, 
//otherwise update the current and replacement orders
If(IsBlank(varReplacementOrder),
Patch(myTable,LookUp(myTable,ID=varThisID),{Order:varThisOrder});
Reset(Self);
,
Patch(myTable,LookUp(myTable,ID=varReplacementID),{Order:varThisOrder});
Patch(myTable,LookUp(myTable,ID=varThisID),{Order:varReplacementOrder})
);

//Deactivate the selection so that it will 
//avoid unwanted behavior of combobox
UpdateContext({IsSelected:false})
)

Conclusion:

To test, you can change the selection of the combo boxes. You will notice the numbers selection in the combo box interchange. You can click the “Sort” button to re-sort using the new order.

Frequently Asked Questions

I tried this method but did it straight from the data source instead of a collection, it shows an error message everytime I change the combo box selection.

You need an additional step as a workaround. You will need the help of timers to delay the change. Please contact us if you need another tutorial for that.

Did this article help? Let us know how we can improve. Send us a message by clicking the “Contact Us” button below.

Article last updated on Feb 20, 2024

Need expert guidance on Power Apps?