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
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.
I hope this one helpful to you. Try this sweetalert2 module . Image1 – Before clicking Image2 – After clicking(the popup fades few seconds)
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.
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.
If you already knows how CSS this can be useful https://academy.mendix.com/link/paths/123/Style-your-App-with-Sass
would recommend using a toast widget. there are quite a few in the marketplace.
otherwise, give the item a class and play a fade to 0 opacity CSS animations.
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)