Set event handlers explicitly

Creating interactive apps in Anvil is now more Pythonic than ever. We’ve changed the way event handlers work by making them explicit in your code. This means it’s now a lot easier to see all the registered event handlers in your Form and to set event handlers from code.

In Form code, methods registered as event handlers will now be decorated with @handle("<component_name>", "<event_name">). This new decorator makes it explicit in code which methods are event handlers for which components.

The @handle decorator

You can still set event handlers in the normal way from the Anvil Designer. Setting an event from the Properties Panel or the Object Palette will automatically set up an event handler in your Form code with the @handle decorator.

Screen recording of the Anvil Designer showing a feedback form with a 'Submit' button. When the button is clicked, Anvil switches to code view to show the newly created event handler which is decorated with `@handle`

Setting an event handler from the Object Palette creates a method decorated with @handle

The @handle decorator expects two arguments: the component name and the name of the event that will raise the decorated function. For example, here is a click event handler for a Button called submit_button:

@handle("submit_button", "click")
def submit_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    anvil.server.call("submit_form", self.item)
    self.submit_button.text = "Submitted!"

Setting event handlers in code

You can also set event handlers in code yourself using the @handle decorator. Just add the decorator to a method in your Form code and give it the name of the component and the event you want to raise: @handle("<component_name>", "<event_name>"). The decorated method can have any name, just make sure it has the **event_args argument.

The @handle decorator makes it simple to modify existing event handlers. Want to bind the handler to a different component? Just change the component name in the decorator. Want to bind the same event handler to multiple component events? Just add another decorator to the method.

@handle("submit_button", "click")
@handle("comment_box", "pressed_enter")
def submit_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    c = confirm("Do you want to submit your comment?")
    if c:
        anvil.server.call("add_comment_to_table", self.comment_box.text)

It’s easier to see existing event handlers

The @handle decorator makes it a lot easier to know which components are connected to which event handlers because it’s all explicit in the code. You no longer have to scroll to the bottom of the Properties Panel to see the event handlers connected to a component.

Ready to check it out?

Start building

More about Anvil

If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Sign up for Anvil

Want to build an app of your own? Get started with one of our tutorials:

Data Dashboard

In this tutorial, you will learn to plot data using client-side Python code and deploy it online for others to see.
Go

Build Database-Backed Apps

In this tutorial, you will learn how to build a simple news aggregator app.
Go

Build a Simple Feedback Form

Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:

  • Build your User Interface
  • Write client-side Python
  • Write server-side Python
  • Store data in a database
  • Deploy your app
Go