Laying out multiple form components with grid

Anvil Q&A
1

Hi,

I have one main form (its basically a dashboard) that launches a number of other forms that I have made components. I’m having problems trying to lay them out nicely though… GridPanel gets all messed up with row sizing, and XYPanel is just too messy.

Basically, I’m trying to do something like this inside a column panel.:

image

I’ve been playing around with different ways, but I feel like there has to be a better way than XYPanel:

def dashboard_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.content_panel.clear()
    
    dGrid = XYPanel()
    onGrid1 = Form1()
    offGrid1 = Form1()
    feed_on = Form2(sef_prop = "ON property")
    
    #dGrid.add_component(Form1(),x = 10, y = 10, width=272)
    #dGrid.add_component(Form2(),x=300,y=10)
    #dGrid.add_component(Form1(),x = 10, y=210, width = 275)
    
    self.content_panel.add_component(dGrid,full_width_row=True)
2

A bit of a work around but you can create place holder panels inside the outer ColumnPanel.
This way you can lay it out how you want to and then add the Child Forms to the place holder panels.

Does it need to be created dynamically?

Or you could do this with a HTML form but … :nauseated_face:

3

Those placeholder panels though, isn’t that the same as just adding a couple components in the python code at the time that I need them?

4

The benefit is that you have the IDE to lay them out ahead of time. So you can use a combination of LinearPanels FlowPanels and ColumnPanels to get the right layout and then the Child Forms can be added to the right place.

Have you got a clone I can have a quick play with?

5

You bet, here you go:

https://anvil.works/build#clone:IXN5FOOXSN33WA4P=6FMOT237WDBDZ4QJVXAUX754

The “NotionalGrid” is the Form1 above. And “FeedForm” is Form2 above. Thanks for the help!

6

Which form are you wanting to go where?

7

sorry, so:

image

8

If I make changes / save things, does it update that link I put? or is that link frozen in time?

9

Using two column panels I get the following screenshot. but I hate the way its clustering in the middle / not using the available space…

image
image3829×1903 297 KB

10

So you want to use the full_width_row option to sort that out.

1 Like
11

ah, doh forgot about that. Maybe this is the route I go then?

12

That link is frozen. Its 2am here so I am calling it for the day. I will send back a clone link once I get it sorted

1 Like
13

If that is how you want it for sure.

You might be best off creating a dashboard form and building it in that. Then you will be able to navigate between forms without having to rebuild it every time.

14

That makes sense. Tx!