Flexible Height Galleries – A quick intro

In one of my recent projects, there was a need to have a gallery in which the rows would not have the same height. While that use case involved nested galleries, I wanted to try out the concept of a flexible height gallery using a simple use case.

Here's what I came up with:

1. There will be one gallery which will have multiple rows with data
2. Each row will have a text input control allowing the user to enter a number
3. Based on the number entered in a row, the height of that row should get adjusted
4. Extra: when a different row is selected, the previous row should go back to its original/default height

Instead of using a nested gallery, I used a simple label with no text (for step 3 above). Here are the steps you can follow to achieve this:

• Add a blank flexible height gallery and set its Items property to a table of your choice (I used a list of Users)
• Add a label (Label_Title) inside the gallery and display certain relevant information (e.g. user name)
• Add a text input control (TextInput_Number) and set the Default property to "" (we will have to change this later)
• Add another label (Label_Blank) and blank out its Text property
• This is the label that we will use to expand based on the user's input in the text input control
• Set this label's X, Y, and Width properties as desired
• Set this label's Height property to Value(TextInput_Number.Text)*100
• Add another label (Label_Separator) to make it easy to see where a row ends
• Set its Height to 1 or any other small number, X position to 0 and its Width to the width of the gallery
• Set its Y position to Label_Blank.Y+Label_Blank.Height to place it right below Label_Blank
• Set its Fill property to some color to make it easy to spot
• Set the Template Size property of the gallery to 100
• To achieve the extra step (#4), replace the Default property of the text input control to If(!(ThisItem.IsSelected), "")
• This ensures that as soon as another row is selected, the previously expanded row goes back to the default height

With all these settings in place, this is how the gallery behaves:

Going back to the original use case, the text input control would be replaced by the number of rows of the nested gallery. The rest of the behavior will remain the same.

Have fun! Get addicted!