Anvil Community Forum

Improved Alert with multiple support

I created an improved version of the default alerts that Anvil has. It allows lots of customizations and also allows multiple alerts to be displayed in a single screen. You can also resize or drag alert anywhere on the screen.

To use this alert in your app, clone this app and add it as a dependency to your app.

from alert2.alert2 import alert2

Here is a Demo App.
https://anvil.works/build#clone:RK3OZJVOVRHJYOSV=SJBVK43WAKV2NLLT3PHDSKA5

And the clone link of dependency
https://anvil.works/build#clone:BLEE5QRAV7T654ZV=ZENHA3CKXO67MYNNFBK72ZO7

Since we have so many customizations in this alert, here is a detailed list explaining each one

1. content

You can pass any string, anvil component, or form to content property

Ex.

alert2(content='This is the body of my alert')
alert2(content=Image(source='image.png'))
alert2(content=Form1())

Default Value = " "

2. header

You can pass any string, anvil component, or form to the header property. If you set the value of the header to False, it will be removed.

Ex.

alert2(header='This is the Title of my alert')
alert2(header=False) #Will disable Header

Default Value = False

3. footer_buttons

Adds buttons to the footer of alert. Clicking the button will close the alert and set the value of the alert. You can pass a list of string, dictionary, list of anvil components. If you set this value to False, it will disable footer, similar to the case with headers.

Ex.

a1=alert2(footer_buttons=["No","Yes"])
print(a1.value) #Should print either 'Yes' or 'No'

a2=alert2(footer_buttons={'Key':'Value'}) #This will display Button text as 'Key'
print(a2.value) #Should print 'Value'

a3=alert2(footer_buttons=[Button(text='Yes',icon='fa:check'),Button(text='No',icon='fa:times')])
#You can pass any Anvil Component 
print(a3.value) #Will display None. However, it will close the alert.

Default Value = False

4. close()

This method will close the current alert.

Ex.

a2=alert2(content='Hello')
a2.close()

5. dismissable

If set to False, the alert can only be closed when clicking any of the footer buttons or by calling the close method.

Ex.

alert2(content='This is the body of my alert')
alert2(content=Image(source='image.png'))
alert2(content=Form1())

Default Value = True

6. role

Assign an Anvil role to your alert.

Ex.

alert2(role='foo')

Default Value = None

7. close_button_color

Set the color of the close button.

Ex.

alert2(close_button_color='red')

Default Value = 'grey

8. block_script

If set to False, the rest of your app will continue running while the alert is opened.
Ex.

alert2(block_script=True)

Default Value = True

9. footer_buttons_align & footer_buttons_spacing
Set the alignment and spacing of your footer buttons.

Ex.

alert2(footer_buttons_align='left',footer_buttons_spacing='medium')

Default Value = right | small

10. background_image

You can pass an Image Component. This will set the background image of your alert.

Ex.

img=Image(source='image.png')
alert2(background_image=img)

Default Value = None

11. background_image_display

Accepts either ‘shrink_to_fit’ or ‘zoom_to_fill’
Ex.

img=Image(source='image.png')
alert2(background_image=img,background_image_display='zoom_to_fill')

Default Value = shrink_to_fit

12. background

Set the background color.

Ex.

alert2(background='black')

Default Value = white

13. drag

Allows users to drag alert anywhere on the screen if set to true. Works with touch devices as well.

Ex.

alert2(drag=True)

Default Value = False

14. resize

Allows users to resize alert. It will not work on most touch devices or if drag is set to true. It can take the following values = ‘none’, 'horizontal, ‘vertical’, ‘both’

Ex.

alert2(drag='both')

Default Value = ‘none’

15. footer_color & header_color

Set the background color for headers and footers.

Ex.

alert2(footer_color='green',header_color='red')

Default Value = ‘transparent’

16. opacity

Set the opacity of your anvil app while the alert is displayed on the screen. Accepts values between 0 and 1

Ex.

alert2(opacity=0.8)

Default Value = 0.4

17. padding_top

Set the distance between the top of the screen and alert. You can pass an integer value (gets converted in px) or any supported CSS value.

Ex.

alert2(padding_top='50vh')
alert2(padding_top=30)

Default Value = 50

18. font_size

Set the size of the font. You can pass an integer value (gets converted in px) or any supported CSS value.

Ex.

alert2(font_size='0.5em')
alert2(font_size=18)

Default Value = 16

19. foreground

Set the color of the font.

Ex.

alert2( foreground='red')
alert2(foreground='#ffffff')

Default Value = ‘black’

20. width

Set the amount of screen to be covered by your alert. If set to None, it will cover 40% for landscape devices and 90% for portrait devices

Ex.

alert2(width=80)

Default Value = None

This has been a long post. Let me know if any trouble comes up.

11 Likes

Thank you! I’m looking forward to playing with this. Being able to show an alert from inside an alert will be a big improvement.

2 Likes

@divyeshlakhotia Keep up the great Work! :muscle:

1 Like

This custom component looks great, but I get this error when I try to run the demo or use it myself:

`[An internal error has occurred]`

The error seems to be coming from anvil not the component. Maybe the code is outdated? Anyone have it working?

Thanks for reporting this. I will test it out tomorrow and let you know

That’s awesome! Thank you.

1 Like

Okay, I tested it out and everything still appears to be fine. Everything should run perfectly fine on the demo app. However, this error does appear when you directly run the dependency because it is meant to be a custom component.

Can you please check if this error persists in the Demo App? You should see a screen like this on it

1 Like

Well, not my proudest moment haha, but I was definitely trying to run the component, not the demo! It’s working for me now, though for some reason my form show’s fine in a standard alert, but nothing displays when I try to all it in an alert2. I also don’t get any errors in the console. Are there are any other logs I can look at for clues?

That is strange. The show events seem to be working fine for me Anvil | Login

If the problem is not resolved, please share a clone link.