Temporary alert popup with animation

1
Hi there,   Question Upon microflow execution, I want to display a message box to the user which automatically fades out after X seconds.  I know how to do this with basic html and css, but I’m not sure how to implement it in Mendix. Is there an existing toolbox object for this, if not can someone briefly guide me on how to achieve this.   Reference The second codepen example from this website: https://speckyboy.com/css-js-notification-alert-code/    Image 1 – Before clicking   Image 2 – After Clicking (the popup fades after 2 seconds)   Thanks
asked
5 answers
1

Hi Lee, You could add a boolean to your context object, wich shows the message (modeled out on the page with conditional visibility based on the boolean) and then in a nanoflow toggle the boolean, add the Wait JS action to delay 2 seconds, and then toggle the boolean again to hide the message.
With CSS you could define where to show that container with the message you modeled out and add animations or any other desired styling to that container and it’s content.

answered
4

Hi Stevens,

                  I hope this one helpful to you. Try this sweetalert2 module .                                                                                                                                                                                 Image1 – Before clicking                                                                                                                                                                                                                                                                                                              Image2 – After clicking(the popup fades few seconds)  

answered
3

Hi Stevens,

One way Continue to the Ramachandiran Answer, you can use that module and you can create popups and using CSS properties position:absolute you can make that particular alert message to show where ever you want.

or else

use the javascript snippets where you need to create the same notification which ever you want and that needs to be called after the execution of a microflow or on click of the button.

or else

try using the float widget if you want to show the alert notification in a tooltip message.

Hope you can try anyone of this methods.

answered
1

If you already knows how CSS this can be useful https://academy.mendix.com/link/paths/123/Style-your-App-with-Sass

answered
1
  1. would recommend using a toast widget. there are quite a few in the marketplace.
  2. otherwise, give the item a class and play a fade to 0 opacity CSS animations.
  3. A JS snippet could also work, but as a toaster is a common pattern wouldn’t recommend it as future devs that don’t understand javascript might get in trouble if it’s user everywhere through the app:
  • assign a generic custom class to the toasters
  • set a delay function when the document is ready
  • play JS function after a delay
  • Search a custom class in a JS function
  • for loop through all the custom classes found
  • use the .hide(), .fadeOut() (if using jQuery) or item(i).style.display = ‘none’ for those elements
  • style the custom class with a position: fixed to the place on the page you would like them to appear (right top corner or bottom center are quite common patterns)
answered