Skip to Content

Simple Notifications for UI5

Enhance your Control-Lib!


Today i want to show you a new custom control for UI5-applications. I let myself inspired by codrops once again (see Notification Styles Inspiration).

The idea is to create a simple and responsive notification, which can be used on different devices. Besides, it should be possible to have different types of notifications (error, warning, information and success). Although UI5-developers can already use the NotificationBar to show messages and notifications, i want to offer an additional control, which has its focus on simplicity and a responsive design.

To get a better impression, please check out the following links.

View Demo

Get Source Code


It’s pretty simple to add a new notification in your app. Just write the following code to create a new instance of the control and to show it immediately.

new neko.control.Notification({
       message : "Your message",
       type : "success",
      durability : 3000,
       close : function(){
              // do something great
       open : function(){
              // do something great

When you have a look at the control implementation, that you can see further properties like “layout” and “effect”. These properties can be used, to apply different CSS to your notification. On this way, you can influence the behavior and layout of your control over additional CSS-classes. And this is really cool, because you can enhance your notifications just with CSS. There is no need to modify the underlying JavaScript implementation. If you need some suggestions for this, just a look at the mentioned codrops-article above.



You must be Logged on to comment or reply to a post.