Answered

Order gallery items with buttons (arrow up/down)

(0) Share

Report

Posted on by Community Power Pla...

Hello,

I would like to put the items in a gallery in order with a couple of arrows (up/down). I've tried with a timer but I cannot get it to work. Any easier way?

Regards,

Albert

Categories:

Building Power Apps

I have the same question (0)

All responses (10)

Answers (1)

Community Power Pla... on at

Like (0)

Report

Hi @Anonymous

Can you show a sample screen shot what you are trying to do.

Thanks.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

@Anonymous I've updated the post with pic.
Should be simple. I have a gallery with several items. But I need to put the different records in order.
So two arrows, up and down, and this updates the collection to change the display order in the gallery.
Thanks

Was this reply helpful? Yes No
PavanKumar 479 on at

Like (0)

Report

Hi,

Add custom column called Sort order to your collection and use that column for sorting the gallery.

On click of up or down arrow just increment and decrement that value. That simplifies in order to achieve the re-ordering.

if this answers your question mark it as verified
Regards,
Pavan Kumar Garlapati

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Hi @Anonymous

If you need to sort the gallery on specific column, as @PavanKumar mentioned, you can have the icons on each column and on click of a icon (column)

UpdateContext({ MYSORTCOLUMN: "column name" })

Items property of the gallery should be as below.
SortByColumns( mycollection, MYSORTCOLUMN ) // either collection or the sp list

Thanks.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Sorry but this method does not seem to work.
Using UpdateContext({QuestionOrder: QuestionOrder -1}); on the up arrow, and sorting the gallery by column QuestionOrder
😕

Was this reply helpful? Yes No
Verified answer

v-yutliu-msft on at

Like (3)

Report
Hi @Anonymous ，

For now, the gallery's order could only sort based on one spefic column and formula.

You could not change one item's position by just cliking a button.

So I suggest you add one field to record value , sort items based on this field and then change the field's value by clicking the arrow.

I've made a similar test for your reference:

1)create a collection that adds one new record:

(Please note that you can not set ClearCollect collection in the gallery's Item property.

You should set it in one behaviour peroperty)

ClearCollect(collection1,AddColumns(tablename,"order",ID)) //add one field named order, the original data is equal to ID(one exiting field that can represent the items'order)

2)set the gallery's Items:

SortByColumns(
collection1,
"order") //sort items based on order field

3)set the arrow's OnSelect: //update the value of order field

Up arrow OnSelect:

Patch(collection1,ThisItem,{order:order-1})

Down arrow OnSelect:

Patch(collection1,ThisItem,{order:order+1})

Then, you could update the order field by clicking the arrows to make the item up/down.

Best regards,

Was this reply helpful? Yes No
Community Power Pla... on at

Like (1)

Report

@v-yutliu-msft Thanks, it kind of works but it gets messy as you end up with repeated "order" numbers because {order: order+1} does not modify the record next to it to order-1. So you end up with duplicate numbers.
But if you keep clicking the arrows then well, you eventually get it to work.

is there any "ThisItem -1" or something similar?

Another option would be to give further separation between each "ID"....

Was this reply helpful? Yes No
Community Power Pla... on at

Like (1)

Report

I see this is a rather old post, but i'd like to add the next step into this request that i've found:
Following the "Order" column, I agree the need for "thisitem-1" to also update de inmediate up/down item. I use the the Lookup function where contidion is "thisitem.order-1" as follows:
Arrow UP
If(ThisItem.Order=1;false; -> this is in case it's already the first item
Patch(YourCollection;LookUp(ColNewAprobadores;Order=ThisItem.Order-1) look for the inmeditate "up" item;{Order:LookUp(YourCollection;Order=ThisItem.Order-1).Order+1}) patch "that" item (can't use "thisitem");; Patch(YourCollection;ThisItem;{Order:ThisItem.Order-1} patch current item))
Button DOWN
Same but changes the + and - symbols. Set Order=x to be the last numer of items you can have (if there is any)
If(ThisItem.Order=x;false;Patch(YourCollection;LookUp(YourCollection;Order=ThisItem.Order+1);{Order:LookUp(YourCollection;Order=ThisItem.Order+1).Order-1});; Patch(YourCollection;ThisItem;{Order:ThisItem.Order+1}))

Hope it helps
Regards,

Was this reply helpful? Yes No
donavanmarais1 2 on at

Like (0)

Report

Has anyone got this idea to work?

Was this reply helpful? Yes No
rcallan 25 on at

Like (0)

Report
Following on from previous replies. I have used varables to save the current and new positions. This negates the need for futher look up and makes the patch function neater.

Rather than checking if the item is 1st or last when trying to patch. I have used the visible function to hide the arrow in those cases.

Also remember to Sort your gallery items by your Order Column to give the visual effect of the item moving up and down

Gallery Items

Sort( [YourSource], [YourOrderColumn] )

Up Arrow - OnSelect

UpdateContext( { varCurrentOrderPos: ThisItem.[YourOrderColumn], varNewOrderPos: ThisItem.[YourOrderColumn] -1 //current position - 1 } ); //Increase Order of Previous item by 1 Patch( [YourSource], LookUp( [YourSource], [YourOrderColumn] = locNumberNewOrderPos ), { [YourOrderColumn]: locNumberCurrentOrderPos, } ); //Decrease Order of Current Item by 1 Patch( [YourSource], ThisItem, { [YourOrderColumn]: locNumberNewOrderPos } );

Up Arrow - Visible

ThisItem.[YourOrderColumn] > 1

Down Arrow - On Select

UpdateContext( { varCurrentOrderPos: ThisItem.[YourOrderColumn], varNewOrderPos: ThisItem.[YourOrderColumn]+1 //current position + 1 } ); //Decrease Order of Next item by 1 Patch( [YourSource], LookUp( [YourSource], [YourOrderColumn] = locNumberNewOrderPos ), { [YourOrderColumn]: locNumberCurrentOrderPos, } ); //Increase Order of Current Item by 1 Patch( [YourSource], ThisItem, { [YourOrderColumn]: locNumberNewOrderPos } );

Down Arrow - Visible

ThisItem.[YourOrderColumn] < [YourSource].AllItemsCount //Use variable to store total rows to avoid delegation varning

Was this reply helpful? Yes No