Add Slots Programatically

Anvil Q&A
1

Is there a way to programmatically add Slots to a Layout Form?

I have tried both of these methods:

    self.slots["fourth"] =  self.slots["first"]
    self.slots["fourth"] = copy.copy(self.slots["first"])

The first just places components in the first slot and the second errors out.

2

Yes it’s possible, we do have more documentation on the way that will cover this and other advanced use cases.

could you describe what you want the result to be, and we can provide some helpful snippets in the mean time.

1 Like
3

I’m basically trying to make rows of components with slots and when one row is full, add another 3 (or however many) slots. Basically the equivalent of repeating slots in html.

4

it sounds like you want a simple grid?

Is the number of columns in a row fixed?

have you tried - something like this:

<div style="display:grid;grid-template-columns:repeat(3,1fr)">
  <div anvil-slot-repeat="default"></div>
</div>

The above would be the html code in an HtmlTemplate
Then you can use this as a custom container
or as a layout if you prefer (you’d only need a single Slot inside the container)

5

That’s close, but I want the rows that aren’t full to let the components take up 50 or 100% of the space if. Here those still each take up only 1/3 of the row

7

Is that only true of the last row, or some arbitrary row?
If it is, we can do some css to make that work.

<div class="special-grid" style="display:grid;grid-template-columns:repeat(6,1fr)">
  <div class="special-grid-container" anvil-slot-repeat="default"></div>
</div>
<style>
.special-grid-container {
  grid-column: span 2;
}

.special-grid-container:nth-last-child(3):nth-child(3n+1),
.special-grid-container:nth-last-child(2):nth-child(3n+2) {
  grid-column: span 3;
}
.special-grid-container:nth-last-child(2):nth-child(3n+1) {
  grid-column: span 6;
}
</style>

The above makes the last row fill 50% if it’s only got 2 elements
and 100% if it’s only got 1 element.

But that might not quite be what you’re after.

8

Nope, that’s exactly what I was wanting (or at least darn near close enough based on my simple tests). Thanks!