# User Notification

> An icon with a dropdown that shows last system notification for the us
> <div class="box"><xwc-user-notification url="https://xena.biz/da/opdateringer/?alttemplate=GetReleaseNote"></xwc-user-notification></div>
</br>

## Suppress Error
> * The result of pressing the **Xena release note** button will be shown under the buttons as the icon. 
>   The request is ok and has no error.
> * Pressing the **Xena release note Error** button will result in not showing the icon for User Notification
>   and in the console, an error will be shown.
>
> <br>
> <xena-button id="ReleaseNoteXena">Xena release note</xena-button>
  <xena-button id="ReleaseNoteXenaError">Xena release note Error </xena-button>
> <div id="target" class="box"></div>


<style>
    div.box{
        background-color:#517770;
        width: 100px;
        height: 50px;
        padding:8px 33px;
        margin-top: 10px;
    }
</style>

```html preview
<script>
    document.getElementById('ReleaseNoteXena').addEventListener('click', () => userNotification("https://xena.biz/da/opdateringer/?alttemplate=GetReleaseNote"));
    document.getElementById('ReleaseNoteXenaError').addEventListener('click', () => userNotification("https://xena.biz/da/error/?alttemplate=GetReleaseNote"));
    let notification;
    const userNotification = (url)  => {
        if(notification)
            notification.remove();
        notification = document.createElement('xwc-user-notification');
        notification.url = url;
        document.getElementById('target').appendChild(notification);
    }
</script>
```