What I’m trying to do:
Wrap a form’s existing button (an old Custom Component) in a Layout-based Custom Component. The new Custom Component adds new data-entry options that the button cannot display by itself.
What I’ve tried and what’s not working:
I’ve successfully created a Layout-based Custom Component, for use as a wrapper around an existing button.
I’ve successfully placed an instance of the wrapper next to the button.
I’ve tried to drag the button onto the wrapper instance, but no luck. The button lands next to the wrapper, or above, or below, but never in its designated slot.
I’ve tried cutting the button off of the form (CTRL-X), exposing the wrapper’s slot (select the wrapper and click its Edit icon), and pasting the button there with (CTRL-V), but nothing gets pasted.
This App is about 6MB, with complex data, so it is not practical for me to post a clone link. However, I may be able to create a short proof-of-concept, if that proves necessary.
Wow! And yet, the menu above clearly shows that we can define them as Custom Components. And there’s even documentation for doing so: Creating a Layout from an Anvil Form.
I simply used both checkboxes seen there. Why wouldn’t I?
So, from your comment, it seems I should not have done so, as it was never going to work as I intended.
What can be done in the documentation to prevent Anvil users (developers) from going down this path? They want to create a Custom Components with slots. Layouts seem like the perfect tool for the job. But, apparently, they’re not. One should create HTML-based Custom Components instead, as in your link.
This distinction absolutely belongs in the Layouts documentation and tutorials. Early in their docs and tutorials. One cannot simply infer it from the current Layout examples.
Thank you for pointing out the alternative.
Edit: It looks like the ONLY effective way to provide slots in a Custom Component is to start from HTML + CSS. I got into Anvil precisely to avoid having to learn all that. It’s not exactly a small or simple subject. Learning CSS – and how best to organize the HTML to effectively apply it – lies outside my time budget, right now.
Thank you for that screenshot, because it’s pointed out that the documentation is out of date! You now turn a custom component Form into a container from the configuration menu (but yes, it needs to be a Form that has an html layout, which doesn’t mean you need to define everything in HTML - you can still use normal Anvil components):
The reason those two options can be checked at the same time is because you technically could have a Layout Form that you also want to use as a custom component. Not all custom components are containers. The confusing thing is that the Layout Form slots do not behave the same way when you then add the Form as a custom component. We’ll look into making this possible because it is confusing behavior.
I will also raise an issue to fix the docs and make them more clear.
That will help a bunch! For example, if you’re trying to create a pure-Anvil Custom Component with slots, via The Layouts API, its examples all make perfect sense, that way.
