Alerts - Fade out

I have set up an alert to notify users that saving data was successful. onSuccess() i show the alert with type “Success” and Content ‘Changes Saved’. The alert is set to “Fade” and “Closeable”

The alert is shown correctly on submission of the form however it remains at the top of the form and does not fade out resulting in the user needing to manually close the message. Is this how the alert should work or should it fade out. If no fade out do i need to await integration of Responsive Notify?

Closeable alert means that it shows a close button and the user can close it.
Fade means it will fade on show/hide or toggle.

There is no auto-fade out option, i will check if this can be added in the next updates.

Thanks @Teodor. Are there plans to add “Responsive Notify” to Wappler. I assume this would add the required functionality including user definable fade periods (as an alternative to tinkering with Alerts).

i was able to make it fade out after 3 seconds. you can do it like this:

1- add Action scheduler.
2-in the Tick dynamic property of the Action scheduler chose the alert and select the hide action. so the Tick action will be like this youralert.hide()
3- when your form submit (or any dynamic event) show the alert then start the action scheduler. so it will be like this newInvoice.show();schedulerCloseAlert.start()

That’s it

9 Likes

@mrbdrm That’s a really nice solution!

@mrbdrm Great Solution, Big Thanks

I think Responsive Notify will be available soon. I asked about this a couple of weeks ago and George replied that it was coming up.

1 Like

Responsive notify is coming to wappler, but we don’t have a time-frame for it - for now it is not the features with the highest priority.

Thanks for clarifying. It would be useful but I can see it’s not a priority (certainly not as far as I am concerned).

Hey guys
you can improve the alert by making it floating at the top (so it will not push other element down) by adding the alert in a div with this style applied to the div:

position: fixed; 
top:0;
left:0;
width:100%;
margin-top:50px;
z-index: 999;
padding:10px;
3 Likes

Just for anyone picking up this thread later, the comments are pretty much redundant now with the addition of “Notifications” to Wappler (in the “Alerts” section). It does everything described here and more in a single function

2 Likes

That’s right - also the Notifications are really easy to setup and configure: https://github.com/Wappler/docs/wiki/Notifications

1 Like

Hi, I am trying to implement your solution but I can't find the "action scheduler", neither in workflows either in dynamic attributes or dynamic events !

It's an App Connect component:

Thank a lot for the help, was able to implement it in 5 seconds… grate community here.