How to create an alert2 footer button that call a function when clicked

Anvil Q&A
1

What I’m trying to do:
I have an “alert2” footer button, and I would like it to call a function when it is clicked.

What I’ve tried and what’s not working:
I’ve seen this code from the forum , but I still don’t understand how to use it in the “alert2” footer button to call a function when it is clicked.

My alert2 code, with a footer button to call a function when clicked.

from alert2.alert2 import alert2 

alert2(footer_buttons= [Button(text='Call Function')],header= 'ID Processed Unsuccessfully', content= message_to_print') ```

For the import of the “alert2” object, you can add the clone below as a dependency in your App and name it “alert2.” The clone is from this Forum link
share a copy of your app

2

The solution you saw was for default anvil alerts. This is how you can do it for my dependency

b=Button(text='call_function')
b.set_event_handler('click',call_function)
alert2(footer_buttons= [b],header= 'ID Processed Unsuccessfully', content= 'message_to_print')
1 Like
3

divyeshlakhotia Wow, thank you so much! It worked, and your dependency is amazing too. So, how can I do the following with the alert:

1. How can I give a different color to the alert border lines?
2. How can I give different colors to the alert content?
3. How can I change the border radius of the alert?
4. How can I remove the close button?
5. How can I change the added button color?

I tried the below code to make the content with different colors, but I failed.

first_content = RichText(content= 'Unfortunately church ID number are only allocated to new church members.', foreground= 'red')
second_content = RichText(content= '<br><br>To be a church member, click the church member button or click the close button to exit', foreground= 'green')
b.set_event_handler('click',self.change_member_function)
alert2(footer_buttons= [b],header= 'ID Processed Unsuccessfully', content= f"{first_content} + {second_content}",footer_color='red',close_button_color= 'red',padding_top='30vh')
4

You can modify your code to this

first_content = RichText(content= 'Unfortunately church ID number are only allocated to new church members.', foreground= 'red')
second_content = RichText(content= '<br><br>To be a church member, click the church member button or click the close button to exit', foreground= 'green')
b.set_event_handler('click',self.change_member_function)
l=LinearPanel()
l.add_component(first_content)
l.add_component(second_component)
alert2(footer_buttons= [b],header= 'ID Processed Unsuccessfully', content= l,footer_color='red',close_button_color= 'red',padding_top='30vh')

You can set dismissable to false to remove the close button.

As for the borders, you can just apply a CSS role to the alert.

Also, I will suggest going through the Anvil docs and specifically checking out how to modify components with code.

1 Like
5

@divyeshlakhotia Please advice, its quite strange the alert2.close() is not closing the alert window at all.

Here’s the App code:

from ._anvil_designer import Form1Template
from anvil import *
import anvil.server
import anvil.js

from anvil.js import window
from anvil.js.window import alert
import anvil.media
import time

# from anvil.js.window import js_eval

import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables

from anvil.js.window import document as _document
from anvil.js.window import jQuery as _S
from alert2.alert2 import alert2 

# Create a recognizer object


# import anvil.html as ahtml

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    a2=alert2(content='Hello')
    a2.close()

Here’s the App clone: