Use HTML elements as components with custom HTML?

Anvil Q&A
1

I had a designer create some custom UIs for me in Figma, which I then exported to HTML and CSS.

I imported each screen into Anvil and added the CSS files, and everything displays OK, but there is no functionality to the forms unless I add components from Anvil (ie, I can drag a button onto the page and use that to create events, etc). However this ruins the look and feel of what the designer created, since he created components that should be buttons and input boxes, etc. and when I drag the Anvil components there instead, (a) it is difficult to get them where they need to be, (b) they look out of place.

Is there a way designate particular

components as Anvil components in order to make them accessible in the code, and react to events like “press”?

2

I don’t have the links to hand, but search the documentation. You have to look up drop zones and the like. You can create fully anvilled up pages that accept components dropped on them.

Also, examine the existing html for the default pages. They will give you clues on how to do this.

3

Yes, I did look into the documentation here: Anvil Docs | Custom HTML Templates

And I have created the drop zones, but it still requires me adding an Anvil component in the place of, for example, a <button> tag in my HTML. Can’t I just use that existing <button> as a component in the designer? It shows up as a clickable region when I run the app.

The Custom Components page talks about something like this, but after reading the link, I didn’t find what it is talking about: (By using Custom HTML Forms, you can also design components using HTML, and combine Anvil components and HTML.)

4

Ah ok, that’s beyond my expertise. Hopefully someone else will pick this up.

5

You might have a look at this post in the forum: Custom HTML - Button event binding

Specifically you want to look at the Javascript binding. It shows one way to call a Python function from an HTML button.

6

Thanks… that is helpful.

It seems that the best way to do it would be with Custom Components, but the documentation doesn’t cover it very well.

“You can create your own component types in Anvil by designating Forms as ‘custom components’. You can give them custom properties and events.”

But the only example it covers is the Form. I don’t see anything written about turning divs or <button> into a component in the Toolbar or able to be referenced in the Python code.

Oh well, maybe I will try the JS way for now.

7

You’d use Javascript inside the custom component to present a Python only interface to a custom HTML form. For what you’re doing, custom components are overkill.

8

Thanks for all the tips, guys. I will try some things and see what works best.

9

There are a couple of ways you could get your custom HTML page to speak to anvil.

DropZones:
As you’ve mentioned already,
you can replace your interactive components with dropzones
then drag anvil equivalent component into the dropzones
you’d then need to style the anvil component to match your desired theme.

The issue here is that an Anvil Button isn’t a pure <button> element and so there is some work to do in matching the styling of an Anvil Button to your desired style.

Javascript Interop
Give your desired interactive components ids
Then refer to these in the __init__ method and add event handlers as desired.

class Form1(Form1Template):
    def __init__(self, **properties):
        self.submit_btn = self.get_element_by_id("submit-btn")
        self.submit_btn.onclick = self.submit_btn_click

    def get_element_by_id(self, id):
        return anvil.js.get_dom_node(self).querySelector("#" + id)

    def submit_btn_click(self, event):
        print("button clicked")

This works reasonably well, but you’re not gonna get any help from the autocompleter.
Familiarity with JavaScript will help here, since you’re interacting directly with JavaScript dom nodes in Python.

Here’s a clone link example:

Re custom component

That would definitely work too. The approach would really be an extension of the above idea.
You’d use the properties passed to you to update the state of the javascript dom nodes in your python code.

2 Likes