This is one way to show newest database record on bootstrap icon. (This is a How to Guide for Node.js Project)

If you have a database and you want to get the newest record each time a new entry is made in the database here is a way to do it, but first here is what I am talking about.

1.) Here you can see the icon is showing.
image

2.) Here you can see the icon is hiding.
image

The goal here is to show notification icon on client side each time an admin user inserts a new record for a given user in the database.

Note: This instruction assumes you know how to use Wappler on an intermediate level and that you understand a little about database architect. This instruction was rushed over and locking full details of most of the implementation on the database table side.

Here are the steps to get this working. The scenario here is that you have a system that send videos to users in their account online and anytime their new video is ready you want them to see that notification inside their user dashboard.

Server Side Steps
Step 1. Make a Custom Query


please take note of the parameter that I am using to filter database record for the logged in user. The Video table has an FK field Id_id that is used to filter the record in the video table using the security provider identity that is program through a usertable.

Please note also that if your database direct connection is not the localhost database you will get an ERROR if you try to execute the custom query. Hence, if your database direct connection is remote you will have to manually add the Schema like so before saving the query.


Then deploy to test if the query return data. Note remember to turn output if want to see the results.

Step 2. Set some Set values to get true or false so we can use it to hide/show the alert icon client side. Here all we are doing is using on set value then picking the video_createon_date timestamp data field coming from our custom query. We then add 15 minutes to it
image


We also have one more Set value that pick the current date time and another Set value that asked if the timestamp plus 15 min coming from the database is greater than the current time.
Note: The reason that I choose 15min is subjective I just decide that fictious company doesn’t insert new videos for a given user every15min or less.

Client Side Steps

Step 1. In your main.ejs layout page add a Server Connect and select the custom query.
Then. add a Data View. For in the Data View for, >> Data Source pick the Server Connect you just add for the Data View >> Filter pick the video_createon_date inside the Data View for Data View >> Sort Direction choose Decending.

Step 2. Now go to the icon and bind the Data View items.
Then go to DYNAMIC ATTRIBUTES >> Display >> Show



We use the Show attribute here instead of Hide because we don’t want the icon to flash the result then hide before the data loads it’s better to only Show the icon when condition is met.

This is just one of many ways to handle a scenario like this.

I hope this helps someone out there getting started.

Community Page
Last updated: