Notifications - Adding and General Notifications Usage


#1

Using the Alerts, Notifications component for page visitor event feedback

We will show you how to display a notification when a form added on your page is completed and submitted successfully and triggers an email with the visitor entered information. Note that this is just an example of a single use case however the concept remains the same for any other event on your page as well as for any server action which you are using.


 
Step 1: First we have to add the Notifications Component to the page structure. Right click App in the App Structure panel:


 
Step 2: Open the Alerts menu:


 
Step 3: And select Notifications:


 
Step 4: In the properties panel you will find the Position and Display options for the Notifications component. Here you can setup the position, alignment, horizontal and vertical offsets, spacing and opacity options as well as the timeout for the notification. Enable the closable option if you need to show a close icon inside the notification:


 
Step 5: You can edit the default styling for the chosen notification component states - success, info, warning and danger:


 
Step 6: Select one of the notification styles and setup the text color, background style or the icon. Note that the icons used here are standard font-awesome icons, which can therefore be swapped out for more suitable icons according to your needs:


 
Step 7: Select the component which you want tracked to control what event should initiate the notification. In our use case it is a Server Connect form(1), which sends the visitor entered form details to an email. Once selected click(2) in order to assign a new dynamic event:


 
Step 8: Select server connect:


 
Step 9: And select “Success” to make your added notification show when the form submits successfully/ There are multiple events you might need to show a notification on. You can show different notifications on different dynamic events as well:


 
Step 10: Then click the highlighted icon to open the dynamic action picker:


 
Step 11: Select the notification type you want to use(1) and click the + button(2):


 
Step 12 In the text you can either select a dynamic value, using the dynamic data picker, or enter a static text message. Note that static text must be wrapped in single quotes:


 
Step 13: Click Select, and you are done. When the form submits successfully it will now display your notification to the visitor:


WapplerPrevious   WapplerNext



About the Notifications and Alerts category
Wappler Official Documentation
#2

Hi, I have an form that create a user and goto user list page when it success. in this case how to use notification ? i tried above steps but did not work. because a success event has two actions, please help me


#3

You can’t have a notification and a page redirect. The page will redirect before the notification shows up. What is your use case that you need both?


#4

I just wanted to notify the user that has been created successfully even they have redirected to list page.


#5

That wouldn’t work as the notify and the redirect would happen at the same time so no one would ever see the notifications.


#6

You could redirect to the list page and add url parameter like:

'listpage.html?user=created'

On the list page add an alert instead of notification.
Select the alert, add dynamic attribute, show when URL parameter user == ‘created’. This way the user will be redirected to the list page and there he will be notified via alert.