Sorting Galleries in Power Apps with up and down arrows.

I have recently been working with Galleries in Power Apps and needed a simple way to re-order the items before saving back to the Tables in the Dataverse (been dying to use that).

In our example we have a QuestionsCollection that we want to order, we have and Field in the Table called ‘Response Order’, we use this to maintain the order state.

In your Gallery add Up and Down icons.

UP Icon Properties.

In the OnSelect property of the icon add the following expression:

If(
    ThisItem.'Response Order' = 1,
    false,
    Patch(
        QuestionsCollection,
        LookUp(
            QuestionsCollection,
            'Response Order' = ThisItem.'Response Order' - 1
        ),
        {
            'Response Order': LookUp(
                QuestionsCollection,
                'Response Order' = ThisItem.'Response Order' - 1
            ).'Response Order' + 1
        }
    );
    Patch(
        QuestionsCollection,
        ThisItem,
        {'Response Order': ThisItem.'Response Order' - 1}
    )
)

As we dont’t want the Up icon to be visible on the first item in the collection we add the following expression to the Visible property of the Icon.

If(
    ThisItem.'Response Order' = 1,
    false,
    true
)

DOWN Icon Properties.

In the OnSelect property of the icon add the following expression:

If(
    ThisItem.'Response Order' = CountRows(QuestionsCollection),
    false,
    Patch(
        QuestionsCollection,
        LookUp(
            QuestionsCollection,
            'Response Order' = ThisItem.'Response Order' + 1
        ),
        {
            'Response Order': LookUp(
                QuestionsCollection,
                'Response Order' = ThisItem.'Response Order' + 1
            ).'Response Order' - 1
        }
    );
    Patch(
        QuestionsCollection,
        ThisItem,
        {'Response Order': ThisItem.'Response Order' + 1}
    )
)

As we dont’t want the Down icon to be visible on the last item in the collection we add the following expression to the Visible property of the Icon.

If(
    ThisItem.'Response Order' = CountRows(QuestionsCollection),
    false,
    true
)

Now the Icons we re-order the items in the Gallery and maintain the correct values when moving position.

Update: When testing with the client I realised that when an Item was deleted from the list the order numbers where not updated. This caused some issues with adding new items to the gallery. Here is the full formula for the Trash Icon, we remove the item from the collection and then update all the order numbers that were higher than the removed item.

Set(
    removed,
    ThisItem.'Response Order'
);
Remove(
    QuestionsCollection,
    ThisItem
);
ForAll(
    galSectionQuestions.AllItems,
    UpdateIf(
        QuestionsCollection,
        'Response Order' > removed,
        {'Response Order': 'Response Order' - 1}
    )
);

Update 2: It seems the above formula subtracts 2 instead of 1 to the ‘Response Order’ and no matter what I try I haven’t worked out why this is…yet!

As a workaround I just update all the ‘Response Order’ values for the updated collection.

Set(
    removed,
    ThisItem.'Response Order'
);
Remove(
    QuestionsCollection,
    ThisItem
);

ClearCollect(rowCounter,{Value:1});
ClearCollect(temp,QuestionsCollection);
ForAll(
    temp,
    Patch(
        QuestionsCollection,
        ThisRecord,
        {'Response Order':First(rowCounter).Value}
    );
    Patch(
        rowCounter,
        First(rowCounter),
        {Value: First(rowCounter).Value + 1}
    );
);

This works well and now all the ‘Response Order’ values are correct, now I can patch my table with the updated collection.

Patch(
    Questions,
    QuestionsCollection
);

Was this helpful?

2 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *