Growl Control

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}
      }
    },


    renderer: function(oRm, oControl) {
      if (oControl.getVisible() === 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="#">&times;</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.$().fadeOut('slow');
      setTimeout(function() {
        this.setVisible(false);
      }.bind(this), 401)
    },


    show: function() {
      var that = this;
      this.setVisible(true);


      if (this.getAutoclose()) {
        setTimeout(function() {
          that.hide();
        }, 2000);
      }
    }
  });

And its css

.sap-dennisseah-growl-ui-notify {
   margin-top: -4px;
   float: right;
   padding: 5px;
}


.sap-dennisseah-growl-ui-notify-message {
  padding: 10px;
  margin-bottom: 15px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}


.sap-dennisseah-growl-ui-notify-message-style {
  background: #000;
  background: rgba(0,0,0,0.8);
  -moz-box-shadow: 0 0 6px #000;
  -webkit-box-shadow: 0 0 6px #000;
  box-shadow: 0 0 6px #000;
}


.sap-dennisseah-growl-ui-notify-cross {
  margin-top: -4px;
  float: right;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 1px #fff;
  padding: 2px;
}


.sap-dennisseah-growl-ui-notify-close {
  color: #fff;
  font-size: 1rem;
}


.sap-dennisseah-growl-ui-notify-title {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}


.sap-dennisseah-growl-ui-notify-message>p{
  margin: 3px 0;
  padding: 0;
  color: #FFF;
  font-size: 0.825rem;
  line-height: 18px;
}

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.show();

And this is how it looks like

Hope that you like it.

-Dennis