Ⓘ Notification Badge in New Glide

Community Resources
, ,
1

Using HTML, this simple notification badge and counter can be written into a template column and displayed through a rich text component. This allows you to dynamically show the number of unread chats for your users. Note that your counter data must be in the user table and contain the number of unread chats, or be empty if all chats are read. To show or hide (empty) the badge, you need to add the class name “notifBubble” to the rich text component and use the following Html & CSS code:

<div style="display: flex; justify-content: flex-end;">
<div style="position: relative; display: inline-block; margin-left: auto; margin-top: 10px;">
<img src="{IMG}" alt="Avatar" style="width: 45px; height: 45px; border-radius: 50%;">
<div class="counter-bubble" style="position: absolute; top: -8px; right: -8px; background-color: red; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; overflow: hidden;">
<div id="counter-text" style="font-size: 10px; font-weight:bold;padding: 5px; text-align: center; white-space: nowrap; text-overflow: ellipsis;">{COUNTER}</div>
</div>
</div>
</div>


.notifBubble:has(#counter-text:empty) .counter-bubble {
display: none !important;
}

Feel free to copy this code and don’t hesitate to ask questions or mention any issues you encounter in applying it in this thread.

Additionally, CSS codes are provided below that you can choose based on your needs:

  1. To position the notification button fixed at the bottom right.
.notifBubble {
position:sticky !important;
bottom:0px;
z-index:99999;
width: fit-content;
margin-left: auto;
}

ScreenRecording2024-06-20at14.33.35-ezgif.com-video-to-webp-converter

  1. Adding CSS to add a static notification badge to Glide’s navigation buttons, whether in the tab-bar (mobile), top-bar, or side-bar. To ensure the notification on these buttons remains visible regardless of the active screen, you can add a spacer component or similar and give it the class name “show-counter” on each screen. Don’t forget to set its visibility to “show component when Counter is not empty.”
/*Notification at Tab-bar (Mobile)*/
[aria-label="Tab Navigation"] > button {
    position: relative;
}
#page-root:has(.show-counter) [data-testid="tab-Companies"]::before {
    content: "!";
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 0px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
}

Screenshot 2024-06-20 at 15.35.41
Screenshot 2024-06-20 at 15.35.411196×224 12.8 KB

/*Top-bar*/
nav > button {
    position: relative;
}
#page-root:has(.show-counter) nav > button:nth-child(6)::before {
    content: "!";
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 5px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    z-index:999;
    display: flex;
    justify-content: center;
    align-items: center;
}

Screenshot 2024-06-20 at 15.35.19
Screenshot 2024-06-20 at 15.35.19794×708 35.2 KB

/*Side Nav-bar*/
nav > ul > li {
    position: relative;
}
nav > ul {
padding-top:5px;
}
#page-root:has(.show-counter) nav > ul > li:nth-child(6)::before {
    content: "!";
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 5px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    z-index:99999;
    display: flex;
    justify-content: center;
    align-items: center;
}
26 Likes
2

Love this!

2 Likes
3

This is gold!!! :crown:

2 Likes
4

Ah this is great thanks!!

1 Like
5

Thanks for this! One question. Do you have to add the rich text component to every screen? I assume it’s the same concept as the “spacer” here?

1 Like
6

The richtext function along with this HTML code is only presented as a button on screens where it is needed. Therefore, the HTML code and related counter data are all placed in the user table. I have been doing it this way so that I can present more than one button on different screens, including different roles in the actions added to the component.
The use of spacers is only necessary for displaying notification badges on Glide navigation buttons. So these two components are two different things. If you have richtext buttons on all screens, you do not need to add a spacer component and can directly refer to the CSS code at :has(#counter-text:empty).

3 Likes
7

Need help! This is an awesome feature, so thank you for taking the time to put this here for us to use!

My question though, is I have a Rich Text component pulling in the template with your HTML, as well as the CSS for the side navigation. Gave the Rich Text the proper class, and added the spacer with the proper class.

For some reason though, I can’t seem to get the badge to move from this location. I’m trying to have it next to the “New Candidates” tab, but so far I can’t figure it out. Any suggestions?

8

Without looking at the code you copied/modified, I will try to guess the possible variables that you may not have set according to your situation:

  1. Besides {COUNTER}, replace {IMG} in the HTML code with the URL of your own icon.
  1. If you copied the CSS code for the Side Nav-bar, don’t forget to change li:nth-child(n) according to the order of your tabs.
1 Like
9

htmltemplate
htmltemplate694×1366 113 KB

customcss
customcss708×790 48.8 KB

Hmm. I actually have both of those elements adjusted. Maybe there’s something else I’m missing?

10

Make sure your image URL can be opened in a browser, I tried it and it couldn’t appear.
Apart from that, you have to turn off the Use Compiled CSS button and turn on the Preview CSS button to be able to see it in the builder.

1 Like
11

@Himaladin How to Custom navigition styled?

example
exampe

12

Do you mean that the dot points to the active tab?

13

Yesss

14

Hmm… This is a different problem

Screenshot 2024-07-16 at 23.43.51
Screenshot 2024-07-16 at 23.43.51848×254 21.4 KB

/*Nav-bar Background Color*/
[aria-label="Tab Navigation"] > *:nth-child(1) {
background-color: rgba(255,255,255,0.4);
border-radius:10px 0px 0px 10px;
}
[aria-label="Tab Navigation"] > * {
background-color: rgba(255,255,255,0.4);
}
[aria-label="Tab Navigation"] > *:last-child {
background-color: rgba(255,255,255,0.4);
border-radius: 0px 10px 10px  0px;
}
[aria-label="Tab Navigation"] {
background-color: slateBlue;
}
/*Nav-bar Icon & Label*/
#page-root .tab-active > div > svg{
color:darkblue;
}
#page-root .tab-active > p{
color:darkblue;
}

/*Nav-bar Active Button Pointer*/
#page-root .tab-active > div:after {
    content: "●";
    color: white;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
}
#page-root .tab-active > div:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 20px solid slateBlue;
}
15

can we also place a notification symbol on a button inside the detail screen?

image

16

Does your notification have a counter or not? What components do you use? Button Block? Or Action Row?

17

it’s a button block component. I count incremental changes using a math column

18

If you use the Button Block component you cannot display counter data except just a balloon notification.
Have you tried custom components?

19

the balloon is what I would like to show. thanks.
No, I haven’t tried custom components yet.

20

For Button Block, use a method like the nav-bar notification above with a class that you customize for your button, for example [aria-label=“Reviews”].