Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member182862
Active Contributor

In this blog, we show how to arrange sap.ui.core.Icon in a circle like a circular dialer.

CSS

.sap-dennisseah-circular-icons-group {
  border: solid;
  opacity: 0.9;
  border-radius: 50%;
}

.sap-dennisseah-circular-icons-group-btn {
  position: absolute;
  display: table-cell;
  opacity: 0.5;
  padding: 5px;
  border-radius: 100%;
}

.sap-dennisseah-circular-icons-group-btn:hover {
  opacity: 1;
}

Javascript

  sap.ui.core.Control.extend('sap.dennisseah.CircularIconsGroup', {
    metadata: {
      properties: {
        borderwidth: {type: "sap.ui.core.CSSSize", defaultValue: '50px'},
        diameter: {type: "sap.ui.core.CSSSize", defaultValue: '100px'},
        color: {type: "sap.ui.core.CSSColor", defaultValue: '#007cc0'},
        btncolor: {type: "sap.ui.core.CSSColor", defaultValue: '#005990'}
      },
      aggregations: {
        icons: {type: "sap.ui.core.Icon"}
      }
    },

    _style: function() {
      var styles = [
        'height: ' + this.getDiameter(),
        'width: ' + this.getDiameter(),
        'border-color: ' + this.getColor(),
        'border-width: ' + this.getBorderwidth()
      ];
      return styles.join('; ');
    },
   
   
    renderer: function(oRm, oControl) {
      oRm.write("<div");
      oRm.writeControlData(oControl);
      oRm.addClass("sap-dennisseah-circular-icons-group");
      oRm.writeClasses();
      oRm.write(' style="' + oControl._style() + '">');
      var icons = oControl.getAggregation('icons');
      for (var i = 0; i < icons.length; i++) {
        var icon = icons[i];
        icon.addStyleClass('sap-dennisseah-circular-icons-group-btn');
        oRm.renderControl(icon);
      }
      oRm.write("</div>");
    },
   
    onAfterRendering: function() {
      var that = this;
      function center() {
        var element = that.$()[0];
        var d = element.getBoundingClientRect();
        return { cx: d.left + d.width/2, cy: d.top + d.height/2 };
      }
     
      var icons = this.getAggregation('icons');
      if (icons.length === 0) {
        return;
      }

      var angle = 0;
      var borderwidth = parseInt(this.getBorderwidth().replace('px',''));
      var width = parseInt(this.getDiameter().replace('px',''));
      var center = center();

      var step = (2*Math.PI) / icons.length;
     
      for (var i = 0; i < icons.length; i++) {
        var ic = icons[i];
        var ic_obj = $('#' + ic.getId());
        var iradius = Math.max(ic_obj.width(), ic_obj.height());
        var base = ((width + borderwidth)/2);
        var offset = (iradius/2) + 5; // 5 = padding
        var x = Math.round(base * Math.cos(angle)) + center.cx - offset;
        var y = Math.round(base * Math.sin(angle)) + center.cy - offset;
        ic_obj.css('background-color', this.getBtncolor());
        ic_obj.css('width', iradius + 'px');
        ic_obj.css('height', iradius + 'px');
        ic_obj.css('left', x + 'px');
        ic_obj.css('top', y + 'px');
        angle += step;
      }
    }
  });

Example

The control can be created in this manner where you have a bunch of icon and their actions (when being pressed.

  var ctrl = new sap.dennisseah.CircularIconsGroup({
    icons: [
      new sap.ui.core.Icon({
        src: 'sap-icon://globe',
        size: '25px',
        press: function() {
          alert('global');
        }
      }),
      new sap.ui.core.Icon({
        src: 'sap-icon://business-objects-explorer',
        size: '25px',
        press: function() {
          alert('explorer');
        }

      }),
      new sap.ui.core.Icon({
        src: 'sap-icon://log',
        size: '25px',
        press: function() {
          alert('log');
        }
      }),
      new sap.ui.core.Icon({
        src: 'sap-icon://world',
        size: '25px',
        press: function() {
          alert('world');
        }
      }),
      new sap.ui.core.Icon({
        src: 'sap-icon://settings',
        size: '25px',
        press: function() {
          alert('settings');
        }
      })
    ]
  });

Here is an example. and here is how it looks like

-D

1 Comment