Sometimes when we need to notify user about some events on a web application, growl notification is used. (Growl (software) - Wikipedia, the free encyclopedia). When we google for CSS for Growl, we can get many implementations. So I just pick this one jQuery UI Notification Widget by Eric Hynds. And created a SAP UI5 control for it. Here is how (example) it can be used.
Let's get into the control itself. Here is the javascript.
sap.ui.core.Control.extend('sap.dennisseah.Growl', { // inspired by http://www.erichynds.com/examples/jquery-notify/index.htm metadata : { properties: { title: {type: 'string', defaultValue: 'Title'}, message: {type: 'string', defaultValue: 'Hello, I am here!'}, visible: {type: 'boolean', defaultValue: false}, width: {type: 'sap.ui.core.CSSSize', defaultValue: '300px'}, autoclose: {type: 'boolean', defaultValue: true} } }, init: function() { this._show = false; }, renderer: function(oRm, oControl) { if (oControl._show === false) { return; } oRm.write("<div"); oRm.writeControlData(oControl); oRm.addClass("sap-dennisseah-growl-ui-notify"); oRm.writeClasses(); oRm.write(' style="width:' + oControl.getWidth() + '">'); oRm.write('<div class="sap-dennisseah-growl-ui-notify-message sap-dennisseah-growl-ui-notify-message-style">'); oRm.write('<a class="sap-dennisseah-growl-ui-notify-cross sap-dennisseah-growl-ui-notify-close" href="#">x</a>'); oRm.write('<div class="sap-dennisseah-growl-ui-notify-title">' + oControl.getTitle() + '</div>'); oRm.write('<p>' + oControl.getMessage() + '</p>'); oRm.write("</div>"); oRm.write("</div>"); }, onAfterRendering: function() { var that = this; this.$().find('a').click(function() { that.hide(); }); }, hide: function() { this._show = false; this.$().fadeOut('slow'); }, show: function() { var that = this; this._show = true; this.invalidate(); if (this.getAutoclose()) { setTimeout(function() { that.hide(); }, 2000); } }
});And its css can be find at http://dennisseah.appspot.com/sapui5/Growl.css
You can do show() and hide() to show and hide it respectively. When it is visible (shown) and with the autoclose flag set, it will fade out in 2 seconds. Otherwise, user has to click on the close (x) icon to hide is explicitly.
var growl = new sap.dennisseah.Growl({ title: 'Success', width: '350px', // default is 300px message: 'You have successfully created the control', autoclose: false // default is true
});
growl.placeAt('content'); // you can add it to any containers such as page, panel, etc
growl.show(); // do this whenever you want to show it.
And this is how it looks like
Hope that you like it.
-Dennis