SAP UI5 Inputs With Icons

[hkpatel]

hello communities, i have one requirement like this in my WEB-IDE project i have to take 2 inputs with this icons of user and pwd within the input box i have tried all the possible ways to do but failed, can i really do this is this posible Y or N and is there any blog or if anyone done this type of code please revert in the comment box ASAP.

Thanks In Advance.

[former_member182862]

HI.

there are many ways to do this. One way is to have a custom control.

css

.iconInput .sapMInputBaseContentWrapper {
  border-radius: 10px;
  padding-left: 20px;
}

.person .sapMInputBaseContentWrapper:before {
  content: '\e0ca';
}

.lock .sapMInputBaseContentWrapper:before {
  content: '\e153';
}

.sapUiSizeCompact .iconInput .sapMInputBaseContentWrapper:before {
  font-family: 'SAP-icons';
  margin-top: 4px;
  font-size: 1rem;
}

.iconInput .sapMInputBaseContentWrapper:before {
  font-family: 'SAP-icons';
  margin-left: -8px;
  margin-top: 16px;
  font-size: 1.25rem;
  margin-right: 4px;
}

.sapUiSizeCompact .iconInputFocus .sapMInputBaseContentWrapper:before {
  margin-left: 8px !important;
  margin-top: 2px;
}

.iconInputFocus .sapMInputBaseContentWrapper:before {
  margin-left: 8px !important;
  margin-top: 14px;
}

javascript

sap.ui.define(['sap/m/Input', 'sap/ui/core/Icon'], function(Input, Icon) {
  Input.extend("IconInput", {
    renderer: {},
    onAfterRendering: function() {
      if (Input.prototype.onAfterRendering) {
        Input.prototype.onAfterRendering.apply(this, arguments);
      }
      var $this = this.$();
      $this.addClass("iconInput")
      $this.find("INPUT").focus(function() {
        $this.addClass("iconInputFocus");
      });
      $this.find("INPUT").blur(function() {
        $this.removeClass("iconInputFocus");
      });
    }
  });
  
  var oInputPerson = new IconInput();
  oInputPerson.addStyleClass("person");
  var oInputPassword = new IconInput();
  oInputPassword.addStyleClass("lock");
  oInputPerson.placeAt("content");
  oInputPassword.placeAt("content");
});

working example: Link

Hope this help.

Thanks

Dennis

[hkpatel]

is there any simple way to perform this operation this kind will be too lengthy

[former_member182862]

I do not know if there are easier ways.