Add slots inside designer-placed components in HTMLComponent

Anvil Q&A
1

I have an HTML custom component that defines internal and external slots. The html looks like this:

<div anvil-name="component">
    <div anvil-slot="data-slot" anvil-slot-internal></div>
    <div anvil-slot="extra-slot">
        <div class="placeholder anvil-designer-only" anvil-if-slot-empty="extra-slot" anvil-drop-here>Placeholder for when using the Component</div>
    </div>
    <div anvil-slot="other-slot" anvil-slot-internal></div>
</div>

In each internal slot I have a Card added in designer with a few components. The extra-slot is used optionally in each place the component is used.

However, I now need to add a component inside the card that was added in the “data-slot” for one specific usage of the custom component. I don’t seem to be able to do that, however.

I tried creating a custom component that works only as a div with slot and added to the component, but it was not possible to drag other components to that slot.

The only way I seem to be able to achieve what I want was when I converted the Custom Container Component to a Layout and added Slots using the designer, but this required the page that I wanted to use the component to not be from another layout. I had to create a custom component based on the Custom Container Component Layout (CCCL), add the fields I wanted, then create the page based on the main layout of my app and add the custom component based of the CCCL. This seemed like a lot of workarounds to be the correct way, so I’m not sure this was the intended way (or even it there is an intended way of doing what I want).

To summarize what I want:

image
image983Ă—366 11.7 KB

The above card is inside an anvil-slot inside of a HTML Custom component. I want to be able to add other components there from the usages of the custom component. Is it possible?

2

Yep, I can confirm that this is a thing that’s currently not possible to do, but we want it too! (We call it “composite custom component containers” internally.)

The reason we can’t immediately do this is because it demands contradictory things from the component tree. Let’s imagine you get your wish, and you can build the custom container component you sketched. You then drop that component into a form somewhere, and drop a button into the green box. What should that button’s .parent be?

  • Is it the Card on your panel? Well, that’s a bit odd - as far as the form using your component is concerned, it just add_component()ed the button onto gabriels_custom_component_1, not onto some random M3 Card in the middle of it. People use .parent to raise events, we rely on it in the designer…it would be really awkward.

  • Is it your custom component itself? Well, that’s a bit odd…if you called get_components() on the Card inside your component, should the return value include that button or not? If it does, then it’s a contradiction (the card isn’t the button’s .parent, so the component effectively has two parents). If it doesn’t, then somehow the internals of the Card have to…know?..that this is a custom component, and specially not return this one component that is otherwise definitely part of the card? This messes everything up.

We’ve sketched some ideas on whiteboards (including some strange portal things that allow components to be in two places at once but wire up .parent and visibility correctly), but for now our compromise is that the only way to create custom containers in the designer is for all their child components to be added directly to the container. That way, the .parent is always consistent.

1 Like
3

Sounds like parent is being used for (at least) two functionally different things.

If so, what would you call each one?

4

I completelly understand. I can see this is a specific caseand yet, not that specific as well, that’s why I asked here, to see if there was a better or official way of doing it.

About the example, I think it’s as confusing as it was for me to think in the beginning that any row inside a DataGrid is the RepeatingPanel, not the DataGrid.

A Row from a RowTemplate created using a DataGrid component doesn’t have the DataGrid as it’s parent, but the RepeatingPanel. And the RepeatingPanel’s parent isn’t the form, but the DataGrid. So, in my simple and honest opinion, for that example, the button’s parent should be the card inside of gabriels_custom_component_1. That is what it looks like in the designer after all, just like the RP inside the DG.

Of course, I know I’m probably seeing just the tip of the problem.

Another thing that I’ve noticed is that layouts now have a property called slots. They seem to just list the slots available, but it would be nice to be a dict containing the components assined to each slot. That way the button would be naturally a component of the card.get_components(), but also in a slot of gabriels_custom_component_1.slots['custom-slot'].

Considering that this is already being talked about internally, can this be converted to a Future Request, then?

1 Like