Notifications - Adding and General Notifications Usage

[George]

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:

---

   

---

[thines]

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

[brad]

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?

[thines]

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

[brad]

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

[Teodor]

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.

[sitestreet]

I like this solution. What would the syntax be for putting in that dynamic attribute when user == ‘created’? I assume it’s not part of Wappler and would have to be hand coded?

[max_gb]

Redirect your user on success to whichever page you like (i.e- homepage) and include a query string (?=success or similar) in the URL. On your index page you should have a variable setup in query parameters under App connect called success (or whichever name you used in the URL) that will then show an alert of your choice.

[sitestreet]

Thanks @max_gb. I’m understanding the process but it’s not working!

I have added the Query Manager to App Connect, created the variable, and have added the Alert to App Connect.

I’ve added a Dynamic Attribute of ‘Show’ to the Alert with the condition of (query1.data.message == "added") eg. ?message=added is in the URL.

But the alert isn’t showing.

Any idea where I’m going wrong?

[max_gb]

@sitestreet Here’s my working example…

1. Set form submit button Dynamic Events > Click > Action: browser1.goto(‘index.html?success=true’)

2. On index page click App on right hand side under App Structure, then click Define Query Params button.

3. Add variable called success

4. Click the Alert element from the App connect panel and add ‘Alert Show’ from the Dynamic Attributes section. Set the query to: (query.success == "true")

And that should be it. Mine is working perfectly.

[sitestreet]

Perfect. I hadn’t spotted the Show Alert option. I was using the standard Show. Many thanks.

[JonL]

Reminder that you can now use a flow to run a notification(instead of an alert) by reading the same URL parameter on redirect.