Toast Notification Components and Dialog Exit Animations in WeWeb

WeWeb has an Alert dialog that you can use to create a toast-style component, but it requires a little customisation to make it versatile and reusable.

Also, dialogs in WeWeb by default have animate on show coded in, but not on hide. It is not an uncommon problem in CSS because display: none or removal of elements from the DOM cannot be animated directly, and visibility: hidden is also somewhat awkward. But in WeWeb you can make hide/close animations work with a combination of Time delay actions in workflows and CSS transitions on opacity.

This example creates a reusable toast component using an Alert dialog, but can be adapted for other dialogs and components that you are toggling visibility for.

1. Add an Alert component using Add > Basics > Dialog > Alert
2. Right-click and Turn into component.
   I called mine Toast.
3. In the Component tab (4-dot icon), add two Variables, one for the message to display and isError to indicate whether the toast should display as an error or not.
   If you have more than two states, adjust your variables accordingly.
4. In the Style tab (pencil icon), Toggle the dialog to display it then in Custom CSS > CSS, use the following css to animate changes to opacity as a transition that lasts 0.3 seconds. You won't see anything yet.

Copycopy code to clipboardtransition: opacity 0.3s ease allow-discrete;

5. In the Settings tab (adjustments icon) > HTML Attributes > Id, set the component id to something unique for the page, I've set mine to toast.

6. Back in the Component tab (4-dot icon), add an On execution Workflow called Show Toast that sets Allow execution from outside to on and takes two parameters.
   I've named them the same as my variables.

   

7. Add Change variable value actions to set each internal Variable from the previous step to their corresponding input parameter.
   Note: Using the input parameters directly in other areas of the component does not work.

   

8. Add a Custom javascript action to reset the opacity for the component (precautionary, should work without)

Copycopy code to clipboardvar el = document.getElementById("toast");
if (el) {
    el.style.opacity = 1;
}

9. Add an Execute component action on this component's Alert component to Open the dialog

   

10. Add a Time delay action for 2000ms (how long the toast is shown for).

11. Add a Custom javascript action to set the opacity to 0 to hide the component.
    We'll add a CSS transition to animate this soon.

Copycopy code to clipboardvar el = document.getElementById("toast");
if (el) {
    el.style.opacity = 0;
}

12. Add a Time delay action for 300ms (how long the CSS transition will last from earlier).
13. Add an Execute component action on this component's Alert component to Close the dialog.
14. Finally, add a Reset variable value to reset your message and isError variables. This isn't strictly necessary, but it's good to do cleanup.
15. Use isError to conditionally set the visual presentation of the Alert and message to set the Alert Message text.

Add this component on each page that you need a toast notification, and where you want to trigger it, for example, in a Form container On submit workflow, add an Execute component action for this new Toast component, and set the isError and message parameters accordingly.