Notifications count on browser tab when Zero need it to be empty

[ahmed.khodeir.87]

Hi everyone,

I have made my app’s browser’s name dynamic and included the number of notifications for each user.
The issue now is that when the user has no notifications it shows as “0 Home | novyPro”.

How can I make this Zero disappear and to be " Home | novyPro"?

[newhorizoncode]

Hey @ahmed.khodeir.87,

This can be solved by using states; I recommend using a reusable element if you want this to be a global state.

I’ve left a rough outline of how to achieve your requested setup.

Firstly within our page or in your case, if it must take me global within a reusable element, we can set up two states.

Notification Boolean: Yes/No (This will be used to check if notification is present in the system and help change the title based on an if yes condition.

Notification Count: We will use this number to count the notifications.

When we have a notification, we set the state using the following method.

Setting a state based on a button click
Next, we set the data. This is not important for your project but will just provide a greater overview of how we set this up.

After we set to create a notification, we set the state.

We have included an only when. This means the state will only update when the notification count is not 0.

As you can see next, we set the title using the is yes conditional.

This will check if the boolean value on the notification is yes. If yes, we update the page title to the set state and if no, we use our default title.

I have included a quick GIF to display this system working.

Hopefully this helps

[ahmed.khodeir.87]

wow this is awesome !! thanks a ton!

[ahmed.khodeir.87]

it works like a charm! Thanks a ton, @newhorizoncode , really appreciate the shared knowledge and the time you took on posting the solution

[newhorizoncode]

Great to hear