CODEWITHSUNDEEP
csssapui5
Igor Vilela
Igor Vilela

Reputation: 3

processe indicator change layout SAPUI5

hello someone can help me with this ? I what to change my process indicator from SAPUI5 to make something like this enter image description here

the idea is show how much percent are favor about something and how much percent is against thanks

Upvotes: 0

Views: 102

Answers (1)

D. Seah
D. Seah

Reputation: 4592

you can create a custom control like this or added some code to the onAfterRendering event.

  ProgressIndicator.extend("ProgressIndicatorEx", {
    renderer: {},
    onAfterRendering: function() {
      if (ProgressIndicator.prototype.onAfterRendering) {
        ProgressIndicator.prototype.onAfterRendering.apply(this, arguments);
      }

      var percentValue = this.getPercentValue();
      this.$().find("#" + this.getId() + "-bar").html('<span id="' + this.getId() + '-textLeft" class="sapMPIText sapMPITextRight" style="color: #FFF; margin-right:8px">' + percentValue + '%</span>'); 

      var rightBar = this.$().find("#" + this.getId() + "-remainingBar");
      rightBar.html('<span id="' + this.getId() + '-textRight" class="sapMPIText sapMPITextRight" style="color: #FFF">' + (100 - percentValue) + '%</span>');
      rightBar.css("background-color", "#c00")
      rightBar.css("border-color", "#c00")
    }

demo: https://jsbin.com/yawiqam/edit?js,output

Upvotes: 1

Related Questions