Horizontal Repeating Panel Help

Anvil Q&A
1

I would like to have a horizontal repeating panel in my app but don’t know how how to add it to my form and configure it. I’ve looked at previous posts on this subject but all seem to assume that this step is understood

I cloned the HRP app and set it as a dependency. I got the two components in the custom components section but if I drag a horizontal repeating panel onto my form I just get an empty box with minimal properties.

Could anyone point me at a tutorial on this or give me a brief walk through on implementing this component?

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

I think the general idea for horizontal repeating panels are not something as automatic as a (normal) vertical repeating panel.

Usually it means programatically add each of the components to a Flow Panel.

So, let’s say you want to show a list of names. If you wanted a vertical repeating panel you would add the repeating panel, use the designer to add TextBox to each row, bind or manually set the text property of the TextBox to the item and then set the items property of the RepeatingPanel to the list, right?

To do a horizontal you would instead add a FlowPanel and, programatically loop thru the list adding a TextBox with the text.

def load_horizontal_repeating_panel(self, items_to_load):
  # items_to_load would be a list of str in this example
  for item in items_to_load: 
    text_box = TextBox(text=item)
    # horizontal_repeating_panel would be a FlowPanel added using designer
    self.horizontal_repeating_panel.add_component(text_box)

There’s no native HRP. You can always do a custom component that does the above and now (with the power of “recent” anvil magic) you can even see it changing in the designer, but as far as my knowlege goes for this forum, HRP are always FlowPanels manually populated using a loop.

3

You can absolutely get a repeating panel to work horizontally rather than vertically (if that’s what you need)

Here’s a more comprehensive thread on the topic

@nickm.booth it would be useful to know which app you cloned. Linking to relevant discussions can really help for context, otherwise we’re just guessing.

3 Likes
4

Hi stucork
I added the css to theme.css but still appeared no further forward but thanks for your help again. I tried Gabriel’s flow panel based suggestion and got it working so I’ll stick with that.
Cheers, Nick

2 Likes
5

Thanks Gabriel. I tried your flow panel containing multiple linear panels. Worked first time.

1 Like