Showing results for 
Search instead for 
Did you mean: 

Image inside Input field

Active Participant
0 Kudos

Hi experts,

How to achieve this using sapui5(xml) or fiori

i tried using flexbox but it was not proper

thanks & regards


Accepted Solutions (1)

Accepted Solutions (1)

0 Kudos

Hi Venkatachala,

You can use the Horizontal Layout with Icon and TextField. The looks you can control by adding CSS property to the Style sheet classes.

I have tried using the Extension of UI element. Follow below link.

Creating a Simple Container Control - User Interface Add-On for SAP NetWeaver - SAP Library

//View Code in JS

sap.ui.jsview("extendui.viewOne", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf extendui.viewOne


  getControllerName : function() {

  return "extendui.viewOne";


  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf extendui.viewOne


  createContent : function(oController) {

  sap.ui.core.Control.extend("myContainer", { // call the new Control type "ColorBoxContainer"

metadata : {

properties : {            // setter and getter are created behind the scenes,

// incl. data binding and type validation

"boxColor" : "string" , // the color to use for the frame around each child Control

"icon" :"string",



aggregations: {

content: {singularName: "content"} // default type is "sap.ui.core.Control", multiple is "true"



// the part creating the HTML:

renderer : function(oRm, oControl) { // static function, so use the given "oControl" instance

   // instead of "this" in the renderer function


oRm.addStyle("margin", "2px");

oRm.addStyle("padding", "7px");

oRm.addStyle("border", "3px solid grey" ); // specify the border around the child //oControl.getBoxColor()






oRm.writeControlData(oControl);  // writes the Control ID and enables event handling - important!

oRm.writeClasses();              // there is no class to write, but this enables

   // support for ColorBoxContainer.addStyleClass(...)


var aChildren = oControl.getContent();

for (var i = 0; i < aChildren.length; i++) { // loop over all child Controls,


oRm.addStyle("display", "inline-block");



aChildren[i].$(this).attr("border", "none!important" );

oRm.renderControl(aChildren[i]);   // render the child Control

         // (could even be a big Control tree, but you don't need to care)

oRm.write("</div>"); // end of the box around the respective child


oRm.write("</div>"); // end of the complete Control



  var icons = new sap.ui.commons.Image({src:"images/user.png", width:"16px", height:"16px"});

   var tf = new sap.ui.commons.TextField({value:'edit text here',width:"150px"}).addStyleClass("noBorder");

   var container = new myContainer({

       boxColor: "grey",

       content:[icons, tf]});




//CSS for removing border for Textfield

<style type="text/css">
border: none!important;
Active Participant
0 Kudos

Hi Ramesh,

thankyou for your response

Answers (0)