Skip to Content
Author's profile photo Dennis Seah

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

/wp-content/uploads/2014/03/growl_517232.png

Hope that you like it.

-Dennis

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      That's great. However, is there a way to load the CSS file dynamically?

      Author's profile photo Dennis Seah
      Dennis Seah
      Blog Post Author

      Yes, there is.

      Someone has shared information on this

      Dynamically loading CSS and JS files using jQuery | Naveen S Nayak&amp;#039;s Blog