Creating an alert message for users

Here is the result

Data model

Create an alerts table containing details about each alert

Then add an alert count field in the Users table with a Rollup or Count (Complex Formula) field

You can improve this data model by adding some select options in the Alerts table (active/inactive, important/not important…) to only count some of the alerts in the User table (count if status = active for instance).

Page builder

Create a landing page to display all the alerts for a user

Create a new row in the page builder. Pro tip: do this in a layout, so that all pages in this layout will show the alert dialog.

Here is the HTML code for the alert dialog

<div class="alert alert-danger">
<h4 class="alert-heading">Action Needed!</h4>
Your have <span class="alert_count">{loggedInUser.Count Alerts}</span>
 actions waiting for you. Please check your 
<a class="alert-link" href="alerts">alerts</a>.</div>

This alert dialog contains a links that directs to the landing Alerts page (showing the alert details)

In the Page Builder, go the Layout and retrieve the component id by hovering over the (i) icon:

Here the alert ID is “component_layout_59”. This is where you will retrieve the alert count to know whether or not to display this box (see Javascript below).

Run your app to display the alert. Then “Inspect” the page (on Chrome) to retrieve the row container ID (the HTML element that contains the alert dialog). On a Mac, you get to “Inspect” a page by clicking Option + Command + “i”

Here the component ID is “x_element_layout_1_57”

Add this Javascript code to the layout (or page) that contains the alert dialog

TB.render('component_layout_59', function(data) { 
    alert_count = data.ele[0].getElementsByClassName("alert_count")[0].innerText; 

    if(alert_count === "0"){
         document.getElementById("x_element_layout_1_57").style.display = "none";


This will hide the box when the value contained in the alert dialog is “0”.

Last thing: in the landing alerts page, add this Javascript code:

This will avoid displaying the warning once you navigate to the page.

Alert menu item

This menu item (only an icon) directs to the Alert details page.

To create the menu item, add it in the “Page Builder” / “Layout” / “Menu”

The trick is (thank you @Chem !) is to insert a name that contains some HTML code

<span id="menu-badge" class="badge"></span>

Continue in the Page Builder and add three Javascript lines to the function

    if(alert_count != "0") {

This will automatically add the value alert_count retrieved from the HTML page in the banner.



@ivan wow, thank you so much for sharing!

Re: the menu item count, I made this post a while back. Number count in badge with extra filters

I’m going to look into this again and see if we can streamline it :wink:


Thank you very much! That was the missing piece. I used your code, without the call to the Tadabase API since the value is already available in the HTML page.

That said, I think your solution is better: it reads the value from the backend without the need to reload the page.

1 Like