Alerts and Notifications

You can display popup messages using the alert and confirm functions. They are in the anvil module, so will be imported by default.

Messages

The simplest way to display a popup message is to call the alert function. You must supply at least one argument: The message to be displayed. The alert function will return True if the user clicks OK, or None if they dismiss the popup by clicking elsewhere. The example on the right produces the following popup:

alert("Welcome to Anvil")

Confirmations

If you want to ask your user a yes/no question, just call the confirm function in the same way. The confirm function returns True if the user clicks Yes, False if the user clicks No, and None if they dismiss the popup by clicking elsewhere (See dismissible keyword argument, below).

c = confirm("Do you wish to continue?")
# c will be True if the user clicked 'Yes'

Custom popup styles

You can customise alerts by passing extra named arguments to the alert (or confirm) function:

• content - The message to display. This can be a string or a component (see below)
• title - The title of the popup box
• large - Whether to display a wide popup (default: False)
• buttons - A list of buttons to display. Each item in the list should be a tuple (text,value), where text is the text to display on the button, value is the value to return if the user clicks the button,
• dismissible - Whether this modal can be dismissed by clicking on the backdrop of the page. An alert dismissed in this way will return None. If there is a title, the title bar will contain an ‘X’ that dismisses the modal. (default: True)
• role - Apply a CSS class to the alert for custom styling (see Roles)

# Display a large popup with a title and three buttons.
result = alert(content="Choose Yes or No",
               title="An important choice",
               large=True,
               buttons=[
                 ("Yes", "YES"),
                 ("No", "NO"),
                 ("Neither", None)
               ])

print(f"The user chose {result}")

Custom popup content

You can display custom components in alerts by setting the content argument to an instance of a component instead of a string.

t = TextBox(placeholder="Email address")
alert(content=t,
      title="Enter an email address")
print(f"You entered: {t.text}")

For complex layouts or interaction, you can set the content to an instance of one of your own forms. To close the alert from code inside your form, raise the x-close-alert event with a value argument:

self.raise_event("x-close-alert", value=42)

The alert will close and return the value 42.

Notifications

You can display temporary notifications by creating Notification objects.

To show a simple notification with some content, call the show() method. By default, it will disappear after 2 seconds.

n = Notification("This is an important message!")
n.show()

If you use a notification in a with block, it will be displayed as long as the body of the block is still running. It will then disappear.

with Notification("Please wait..."):
  # ... do something slow ...

You can specify the timeout manually (in seconds), or set it to None or 0 to have the notification stay visible until you explicitly call its hide() method.

n = Notification("This is an important message!",
                 timeout=None)
n.show()

# Later...
n.hide()

As well as a message, notifications can also have a title. Use the style keyword argument to set the colour of the notification. Use "success" for green, "danger" for red, "warning" for yellow, or "info" for blue (default).

Notification("A message",
             title="A message title",
             style="success").show()

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.