Custom component display in ide

Anvil Q&A
#1

I’ve refactored the progress bars in my Extras library to use anvil components and css injection (thanks again @stucork for that suggestion).

That enables me to assign a unique class to each instance of the component so that multiple copies on the same form have their own distinct properties. It also means that dependent apps don’t need any css or roles defined. That all comes from the library itself. So far, so good.

In the previous implementation, I was using a custom HTML form. That didn’t cope with multiple instances and was a pain to install as a dependency but it had one feature which I’ve now lost…

The custom HTML component displayed perfectly in the ide. The current implementation is entirely blank (because the css is only injected as instantiation).

Is there any way to define how a component should appear in the ide? Even if that’s entirely separate from the runtime implementation, that would be fine.

(here’s hoping for a ‘ide-only’ role that I’ve simply failed to notice)

#2

I suppose I could use a custom html form with a drop zone for the standard components. I could embed some of the css within the html and leave only the instance specific css being injected at runtime. That might be enough to get the display in the ide.

I’ll have a play…

#3

I’ve tended to use CustomHTML components with a placeholder component. Of course this doesn’t update based on the designer changes. But atleast you get a better feel for the layout.

Things that might be helpful:
you can reset the html of an HtmlTemplate by doing: self.html = ''

If you do use CustomHTML then you can also do something like:

<div class="anvil-designer-only">

</div>

In order to display something only in the designer.

1 Like
#4

Yep, that’s the sort of thing I had in mind. I suppose there are a number of requirements that I’m attempting to juggle:

  1. Using multiple instances of a custom component on the same form with distinct properties
  2. Making custom components available from within a dependency without requiring any manual intervention to install stuff from a theme
  3. Having a custom component display correctly in the IDE

css injection is the only way I’ve found to handle 1 but it screws up 3.

Embedded css within custom html fixes 3 but I end up repeating the same css across different components.