Vaadin-Notification

Introduction

Vaadin is an open-source web development framework with inbuilt support for both javascript and AJAX. External functionality can also be included into it using the google web toolkit.

Vaadin has many components which can be used to create the web app and in this blog, we are going to see Vaadin-Notification which is used to communicate different information about activities, processes, and events throughout the application.

Basic Notifications

Vaadin-Notification is used to provide some feedback or information to the user. A very simple vaadin-notification component can be created using the below code.

const notification = Notification.show(‘Welcome ninja’, {
  position: 'middle',
});

You can also try this code with Online Javascript Compiler

Run Code

Theme Variants

Different theme variants can also be used like success, error, primary, and contrast. To switch between different themes you can use.

notification.setAttribute('theme', ‘THEME_NAME’);

You can also try this code with Online Javascript Compiler

Run Code

For example, if you want to set the theme to success or primary you can set the attribute theme to that particular theme name.

notification.setAttribute('theme', ‘success’);

You can also try this code with Online Javascript Compiler

Run Code

1. Success: To display the vaadin-notification after an operation is successfully completed we can use this theme variant. The below code snippet can be used to change the theme variant of vaadin-notification to success.

const notification = Notification.show('Welcome ninja!', {
  position: 'middle',
});
notification.setAttribute('theme', ‘success’);

You can also try this code with Online Javascript Compiler

Run Code

2. Error: This theme variant can be used when we want to notify the user that some error has occurred. The below code snippet can be used to change the theme variant of vaadin-notification to error.

const notification = Notification.show(‘Registration Failed!’, {
  position: 'middle',
});
notification.setAttribute('theme', ‘error’);

You can also try this code with Online Javascript Compiler

Run Code

3. Primary: when we want to grab the attention of the user at that time we can use this theme variant. The below code snippet can be used to change the theme variant of vaadin-notification to primary.

const notification = Notification.show('Hello Ninja!’, {
  position: 'middle',
});
notification.setAttribute('theme', ‘primary’);

You can also try this code with Online Javascript Compiler

Run Code

4. Contrast: High-contrast version of vaadin-notification. The below code snippet can be used to change the theme variant of vaadin-notification to contrast.

const notification = Notification.show('High-Contrast Version’, {
  position: 'middle',
});
notification.setAttribute('theme', ‘contrast’);

You can also try this code with Online Javascript Compiler

Run Code

Duration

Users can control how long a vaadin-notification is shown on screen by changing its duration. By default, 5 seconds is the on-time for the vaadin-notification.

Persistent Notifications

Some notifications need more attention than others and need explicit user permission to close. We can set the duration to 0 to get this functionality. There should have a button that the user can press to close the notification or take other suitable action.

Position

There are 7 different positions available in the viewport where we can place vaadin-notification.

Position Explained

Size

The notification card's size is determined by its content automatically. The card's maximum width is one-third of the viewport if the viewport is large; otherwise, the card always occupies the entire viewport.

Stacking

Depending on where they are placed, multiple simultaneously displayed notifications are stacked vertically. A fresh notification appears below the more recent ones when the bottom half of the screen is used as the position.

A new notification shows above the already-present notifications when the position is set to the top half.

Use Notifications efficiently

Use notifications efficiently as they are disruptive in nature. Reserving alerts for more crucial information that the user might otherwise miss will help.

Instead of sending out immediate notifications, less urgent notifications can be sent via a link or dropdown in the application's header or footer.