Show/hide notification list

0
Hello everyone, I have a listview with notifications that should be displayed after clicking on a bell icon, which must be hidden even if you click on any place in the windows except the bell. So there should be a “window.addEventListener(‘click’, function (event) {        if (!event.target.matches('.notification-button')) {             if (notificationContent.style.display === 'block') {                 notificationContent.style.display = 'none';            }        }” to be added to the page.   it should be exactly like the functionality of the notification symbol in mendix forum    can someone help me with this ?
asked
1 answers
1

Hi Mouhanad,

 

We did something similar in our application: 

Create the listview notification container you want as a popup screen.

On the layout of your popup (or page itself) add an extra container with a close page action, and style this as a overlay with z-index so it will always fill the entire screen and is being placed behind your notification list. This will make sure whenever you click outside of the menu, the popup will close.

You will then have to style your popup in a way that it be placed on the far end of the screen. This does require some manual styling and probably some trial and error for your specific case but it is definitely possible. 

 

I added a video as an example of what the functionality will look like (will have to be styled differently for your case), but then you might be able to decide if this is what you intend to make. Keep in mind that we use the close page action container as an overlay and therefore give the rest of the screen a darker color. This will not apply to your case.

New Project (1).gif

If this is actually what you would like to build, I would advise to check out the starter template Tasks & Planning app, they also have this functionality implemented, you can copy CSS there and change it to fit your needs.

image.png

 

If you have more questions feel free to ask! Hope this will help!

answered