I’m creating an app where users can create a collaborative list that has an arbitrary number of other “members” on that list. Each member can then rate each list item.
I have a page that shows a given list and all the items on that list. I want to create columns for every member’s rating, but lists can have different numbers of members on them. In other words, on this page there will be a table; some of the columns are always going to be there (name of list item, URL of list item, current user’s rating of list item), but there will be a dynamic number of additional columns for each of the other members’ ratings.
Any suggestions on how to create this? Right now I have a horizontal repeating group nested in the overall repeating group of list items, but that makes the horizontal repeating group part of the table horizontally scrollable while the rest of the table isn’t, which looks odd.
(I’m also trying to create a header for this table. I followed @Kfawcett’s great idea here, but with the nested horizontal repeating group, it means the header can be scrolled independently of the other rows…)
I do not believe there is a solution for the dynamic width repeating group what will indefinitely increase its size horizontally like the ‘full list’ setting for a vertical repeating group.
UX question:
If there were a 1000 members, would you want to display 1000 columns to your user? Likely not. Whats more likely is that you’d want to display the first few that will fit on the screen and then have a ‘more’ button? You can achieve that UX easily within bubble with the fixed number of cells option. There’s not funky horizontal scrolling in this case.
you could then have a pagination buttons (next page / last page / 1[2] 3 4). You can target one or more repeating groups using a workflow and position which results are displayed in the group.
you can conditionally hide / show different buttons and groups depending on the value ofrepeatinggroup members:count
Thanks for that suggestion @jon2! I’ll explore the idea of using the fixed number of cells parameter.
To answer your UX question - agreed that a table with 1000 columns would be crazy. I’m thinking that there will be a maximum number of members allowed per list - probably less than a dozen - so having all the columns laid out wouldn’t be too crazy in the extreme case (though agreed with you that “more” is a useful concept to explore)
In general with bubble. Its easiest to design pixel perfect where width is concerned. Elements like repeating groups and texts can dynamically grow or shrink vertically, but not horizontally.
Of course, there is all sorts of other funky stuff to consider as far as responsive design goes. One trick that may prove useful to you also. If you use the responsive tab in the editor (provided that your design is pixel perfect) you can conditionally hide and collapse columns horizontally in the same way that you can when hiding elements vertically in the UI builder tab. This is great if you want to auto hide any columns based on the browser’s width. The adjacent columns to the hidden column would fill in the vacant space.
This would only be able to hide the entire repeating group however.
