Growl Control

[former_member182862]

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