Anyone know of a way to create a "dynamic column/field" gallery?

[arpost]

I've nearly created a dynamic gallery using the awesome video from @RezaDorrani (video here), but I've hit a roadblock and am hoping someone has a clever idea on how to accomplish my goal. I'm wanting to use a gallery to create a dynamic table, meaning users can show/hide fields and even reorder them. The problem I'm facing is I can't seem to come up with a sustainable solution that supports displaying data from a dynamic field.

Here's what I'm hoping to achieve. I'm wanting to make a "grid" using a gallery like the one below with headers above (as shown in the video above). However, I then want to let a user change the Order # for a column, which would then change the column position and also update the data below.

With other no-code tools I use, it's possible to "tie" the data field back to the header so that if the header changes, the data changes. As such, I thought I could achieve this in Power Apps by creating a "headers" collection with field header titles and header order positions like so:

Then, I thought I could simply have a gallery with label controls that point to the header for the column (as in the video above) but reference the header's FIELD in addition to the header control's properties. In other words, I thought I could achieve something like this:

Obviously Power Apps doesn't support using simple text to find a column, but I haven't figured out a viable alternative, which is incredibly limiting.

Anyone have a brilliant solution? Let me know if you have any questions.

[TheRobRush]

have you tried setting three variables, lets say col1Var, col2Var, & col3Var and when you say set Date column to position 3 it would set(col3Var, "Date") and then the gallery with those items in it, for the individual sections display col1Var/col2Var/col3Var respectively, instead of the actual values of the column names themselves? (Because gallery values have to be hard coded, so you cannot put say thisitem.variable) You could technically use updateif to literally swap values around in the source collection if that was important to you, but a simple set variable would also do the job.

In the gallery below it where it shows the data you could then use a switch to show the correct column based on the variable as well

[arpost]

@TheRobRush, thanks for the reply! Apologies, but I'm not sure if I'm understanding. Any chance you have an example you can provide?

[TheRobRush]

which part is confusing and I can write an example

[arpost]

Specifically this portion:

---

@TheRobRush wrote:

Have you tried setting three variables, lets say col1Var, col2Var, & col3Var and when you say set Date column to position 3 it would set(col3Var, "Date") and then the gallery with those items in it, 

---

I know how to define variables but am trying to visualize how this would meet the need. Any examples would be appreciated. 🙂

[TheRobRush · Accepted solution]

Ok, here is a simple example. This will allow you to change header positions by changing their value. 

First I collect a Header Collection, and a Data Collection like so.

ClearCollect(ColumnHeaders,{Header:"Type", Order:1},{Header:"Quantity", Order:2},{Header:"Color", Order:3});


ClearCollect(TableData,{ItemName:"Oranges", ItemQuant:200 ,ItemColor:"Orange"},{ItemName:"Apples", ItemQuant:100 ,ItemColor:"Red"},{ItemName:"Lemons", ItemQuant:75 ,ItemColor:"Yellow"})

I make two simple galleries, a horizontal one on top, a vertical one just below and format them to look like they are one. As seen below

Top/Horizontal Gallery has a Items property of 

Sort(ColumnHeaders,Order,Ascending)

Bottom/Vertical Gallery has an items property of (It could also be made into a switch which would sort the gallery based on different columns if needed)

TableData

The Top/Horizontal gallery has 2 labels and 2 icons. the top / number label is set to 

ThisItem.Order

that top label isn't necessary but while testing you can keep it visible to show you the order number changing

the lower, main label will be set to 

ThisItem.Header

Left down icon is

UpdateIf(
    
            ColumnHeaders,
            
                    ThisItem.Order-1=Order,
                            {Order:ThisItem.Order});


UpdateIf(
    
            ColumnHeaders,
            
                    And(ThisItem.Header=Header,ThisItem.Order=Order),
                            {Order:If(ThisItem.Order-1<1,
                                      ThisItem.Order,
                                      ThisItem.Order-1)})

And your right up icon is

UpdateIf(
    
            ColumnHeaders,
            
                    ThisItem.Order+1=Order,
                            {Order:ThisItem.Order});


UpdateIf(
    
            ColumnHeaders,
            
                    And(ThisItem.Header=Header,ThisItem.Order=Order),
                            {Order:If(ThisItem.Order+1>CountRows(ColumnHeaders),
                                      ThisItem.Order,
                                      ThisItem.Order+1)})

these two icons will change the items order up or down one, and change the item above or below it to the order it previously held.

in the lower / vertical gallery you have 3 labels evenly split width wise to fill the gallery.

the text for your first is

Switch(LookUp(ColumnHeaders,Order=1,Header),
        "Type",ThisItem.ItemName,
        "Quantity",ThisItem.ItemQuant,
        "Color",ThisItem.ItemColor)

the text for second is

Switch(LookUp(ColumnHeaders,Order=2,Header),
        "Type",ThisItem.ItemName,
        "Quantity",ThisItem.ItemQuant,
        "Color",ThisItem.ItemColor)

and finally the text for third is 

Switch(LookUp(ColumnHeaders,Order=3,Header),
        "Type",ThisItem.ItemName,
        "Quantity",ThisItem.ItemQuant,
        "Color",ThisItem.ItemColor)

each of these labels uses a switch in its text property to display the column associated with the order value in the horizontal gallery above it. THIS SWITCH is the same kind you could use in the items property of this gallery to also have it sort the gallery based on whatever first or last column currently is etc.

end result

 

[arpost]

That's great, @TheRobRush! Fits my scenario quite well, and the example is excellent! 👏

Any chance you have an idea on what to do if you have, say, 30 columns and want to be able to update the SWITCH all at once? I imagined a gallery with labels inside that changed position to match the parent could do the trick, but that started to get a bit "tricky" when I was trying it out.

[TheRobRush]

switch will work just fine with 30 items in it, after that just have to copy it across to the other columns and always be sure to change the number its referencing. 

Switch Syntax is

Switch( REFERENCE VALUE,

            POSSIBLE VALUE, WHAT TO DO IF THIS

            POSSIBLE VALUE, WHAT TO DO IF THIS) 

etc can go on as long as needed

 3 or 30, the code will be the same, just longer 🙂

[TheRobRush]

Were you able to resolve your issue? If so be sure to mark it as a solution so others can find it in future searches. If not feel free to share where you are at.

[arpost]

Thanks for the reply, @TheRobRush. Sorry for the delayed response. Thinking I'll go with your first solution for now. Just wish there were a way to do this so that you never have to update a SWITCH function for the "columns," meaning you could update something somewhere once and it updates everywhere. Realizing that's really only achievable with a gallery, though, so I think your solution is the only option I've found.