How to setup Notifications in Bubble.io
This tutorial will demonstrate how to create and display notifications in your Bubble app
Sending notifications is a common functionality in apps. And if your needs are not extensive, you can create a notifications system without any plugin.
If on the other hand, you’d like to display native browser notification, you can use OneSignal. I’ll create a tutorial for that as well.
Setting up the database
Create a new data type called Notifications. This will help us to structure the app efficiently.
In this setup we have
Content — to display the notifications text body.
Name — just a heading to denote the ‘notification type’ for e.g A new task added or A new reminder added. This can be custom or pre-filled. You can also ignore this field.
Read — to denote whether the notification has been read or not.
User — to save the User who has been assigned this notification.
You can customize these fields as per your requirement.
Setting up the workflow
Depending upon the requirement, saving these fields is straight forward.
Once you’ve created a new notification entry, all that is left is for us to display these notifications.
Displaying the notifications
I’ve added a small bell icon in my app where I want the users to click to view their notifications.
I then added a Group Focus to display the notifications. You can use a Group as well, but I find Group Focus to be better.
Once you’ve set up the design of the Group Focus, add a Repeating Group inside it.
The type of content should be Notifications and the data source can be left blank. But how will it find the relevant notifications if the data source is blank? We’ll add the data source in the conditional statements.
This setup will ensure that only the unread notifications are displayed in the Repeating Group.
You can then add the elements in the Repeating Group to display all the information. Namely the text, number, date etc.
Create a Trigger to display the Group Focus when the Notifications icon is clicked. Or whatever way you prefer.
Marking the notifications as Read
Once you have the Group Focus and the Repeating Group setup, you would like the notifications to not be displayed again once they’ve been read once.
Just add a new text element or a checkbox which the user can click to mark all the notifications as read. I’ve added a text element ‘Mark all as read’. When the user clicks on this, a workflow is triggered.
This updates the ‘Read’ field of all the current notifications to Yes. And if you recall, we had set a condition for the Repeating Group, to only display notifications where the ‘Read’ field is No.
As a result, all the notifications are hidden from the Repeating Group. You can then add another step to hide the Group Focus or whatever way you’d like your app to behave.
This is a basic but straight forward way to add a Notifications functionality in your Bubble app. A lot more customization can be done when it comes to aesthetics and database structure.
I hope you understood and found it easy to replicate. I’ll soon add a tutorial on how to use OneSignal for the same purpose.
If you need some help with your Bubble project, send me an email at firstname.lastname@example.org