I am trying to display a list of tasks with an ‘expand’ button to display each list item’s subtasks. Asana has a similar feature which you can see in the screen shot below.
To display the information for each row of my repeating group I have created two reusable elements.
- A List Item Row Element: contains a ‘completion’ checkmark, and a ‘task’ name label
- A Expandable Row Element: consists of two parts:
2a) The List Item Row Element described as a part of bullet #1 plus an ‘expand’ button to the side of this element.
2b) A hidden group that the displays its contents when the ‘expand’ button is pressed. This group has the “Collapse this element’s height when hidden” box ticked and contains another repeating group where the main tasks’s subtasks will be shown.
The best I can tell, both of these reusable elements seem to be working well whenever they are not inside of a repeating group. However, whenever I add the Expandable Row Element to the cell of a repeating group, things stop behaving as one might expect.
To start, I created my repeating group, added the Expandable Row Element to the cell, and hooked up my datasources. The repeating group was set to a height of 500px because I want to display 10x rows and each List Item Row Element (only element visible in Expandable Row Element) is 50px.
Based on the editor preview, one might expect this to show the List Item Row Element for each cell. However, when the ‘Preview’ in the corner is pressed, every cell is 0px high with the exception of the very last row. Besides this one row only the gray cell separators are visible.
I’ve tried to inspect one of these rows using the debugger tools, but I couldn’t find any useful information for debugging this issue.
For my second attempt I tried cutting the number of rows in half to see if maybe bubble wasn’t detecting the List Item Row Element for some reason. This seems to be a step in the right direction, but what exactly happening here is quite puzzling. Given we now have 5 rows on a 500px repeating group, one might expect each row to be 100px. However, surprisingly, each row is now 50px.
This is a good start, but when I press the ‘expand’ button, the cell does expand to 100px, but now any contents of subtask repeating group that are taller than 100px now show behind the next row.
This seems to indicate that if the cell is tall enough to fit all the content one might want to display, it will collapse to the appropriate height when the rest of the ‘expandable’ content is hidden.
For my third attempt, I tried to test this theory by making each cell larger than it needed to be. I increased the height of repeating group to 2000 for the 5 rows making each row 400px tall assuming that due to the collapsed content that it will initially display each cell at 50px like it did in my second attempt with a maximum height 400px when expanded. However, again, this yielded another set of confusing and inconsistent results. This time each cell started out at 400px instead of in their collapsed state seen in the previous two attempts.
Would anyone be able to explain the logic as to why the layout system is behaving in this peculiar way? More importantly, would anyone have any suggestions for how to get my layout to function like the Asana example in the first image attached?
Thanks in advance for the help!