Skip to Content

Badge is commonly used these days. So I am sharing an implementation of badge control.

CSS

.sap-dennisseah-badge {
  margin: 2px;
  display: flex;
  border-radius: 6px;
  font-size: 12px;
  height: 30px;
  opacity:0.8;
  justify-content: flex-start;
  cursor:pointer
}

.sap-dennisseah-badge:hover {
  opacity:1;
}

.sap-dennisseah-badge-text{
  margin: 3px;
  background-color: transparent;
  white-space: nowrap;
  display: block;
  padding: 5px;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 550;
}

.sap-dennisseah-badge-num {
  margin-top: 6px;
  margin-right: 10px;
  padding-top:2px;
  background-color: #FFF;
  width: 40px;
  text-align:center;
  border-radius: 5px;
  height: 15px;
  font-weight: bold;
  color: #333;
}

Javascript

  sap.ui.core.Control.extend('sap.dennisseah.Badge', {
    metadata: {
      properties: {
        text: {type:'string', defaultValue: 'untitled'},
        value: {type:'int', defaultValue: 0},
        width: {type: 'sap.ui.core.CSSSize', defaultValue: '150px'},
        color: {type: 'sap.ui.core.CSSColor', defaultValue: '#007cc0'}
      },
      events: {
        pressed: {}
      }
    },
   
    _width : function(minus) {
      var w = parseInt(this.getWidth().replace('px', '')) + minus;
      return w + 'px';
    },
   
    _style : function() {
      var styles = [
         'background-color: ' + this.getColor(),
         'width: ' + this.getWidth()
        ];
      return styles.join(';');
    },
   
    renderer: function(oRm, oControl) {
      oRm.write("<div");
      oRm.writeControlData(oControl);
      oRm.addClass("sap-dennisseah-badge");
      oRm.writeClasses();
      oRm.write(' style="' + oControl._style() + '">');
      oRm.write('<div class="sap-dennisseah-badge-text" style="width:' +
         oControl._width(-40) + '">' + oControl.getText() + '</div>');
      oRm.write('<div class="sap-dennisseah-badge-num">' + oControl.getValue() + '</div>');
      oRm.write("</div>");
    },
   
    onAfterRendering: function() {
      var that = this;
      this.$().click(function(e) {
        that.firePressed({text: that.getText(), value: that.getValue()});
      })
    }
  });

And here is how they can be created

  var b1 = new sap.dennisseah.Badge({
    text: 'Inbox', value:100, color: 'orange',
    pressed: function(e) {
      alert('inbox pressed');
    }});
  b1.placeAt('content');

Here is an working example.

-D

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply