Notifications and Message icons

Is it possible to create notification and message indicator icons to read / open them in CUBA as attached?


1 Like


There are two ways of implementing this feature:

  1. Custom component or JavaScript extension
  2. Vaadin overlays add-on. Demo:

The second way is simpler than the first, but it requires additional jar file. Vaadin Overlays for Vaadin 7.6 is not published in Maven repository thus you should add overlays-1.1.3.jar to modules/web/lib and to your build file using Project properties > Advanced tab as a compile dependency:


Then you have to create web-toolkit module using Create module - Create web toolkit module action.

This add-on enables you to add overlay icons and text using simple Java API:

public class ExtAppMainWindow extends AppMainWindow {
    private Button demoBtn;
    private HBoxLayout demoBox;

    public void init(Map<String, Object> params) {

        Label overlayLabel = new Label("10");

        AbstractComponent vButton = demoBtn.unwrap(AbstractComponent.class);
        CustomOverlay overlay = new CustomClickableOverlay(overlayLabel, vButton);

        AbstractOrderedLayout vLayout = demoBox.unwrap(AbstractOrderedLayout.class);

You can style your overlay using CSS (Using extended theme):

.overlay-badge {
  background: red;
  color: white;
  border: 1px solid red;
  border-radius: 3px;

The result will be:

I’ve created demo project with Vaadin overlays here:


Thank you Yuriy. The sample app is running well. But when I tried to apply the same in my project the project couldn’t find the path for the overlay resources even I have put the overlay jar file to the web/lib, update dependency, updated theme file.
Please see attached image of file path info that i have in my project, thanks for helping on what i am missing here.




Where have you put library jar? Have you regenerated IDE files using Studio?

I have put the overlay jar file manually to the web/lib folder and also updated Grade file to update the dependencies, is it Ok? The line of code displayed in properties that you see in the snapshot I sent earlier, is that correct?

Sorry, I’ve forgotten to tell about AppWidgetSet.xml file. There you have to add overlays library include statement.


Thank you, worked.