Image inside Input field

[venkatachala_ck]

Hi experts,

How to achieve this using sapui5(xml) or fiori

i tried using flexbox but it was not proper

thanks & regards

Venkat

[RameshShrestha · Accepted solution]

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",

"width":"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.write("<div");

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

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

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

oRm.addStyle("width","200px");

oRm.addStyle("background-color","white");

oRm.addStyle("border-radius","20px");

oRm.writeStyles();

//Rm.write(">");

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(...)

oRm.write(">");

var aChildren = oControl.getContent();

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

oRm.write("<div");

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

oRm.writeStyles();

oRm.write(">");

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]});

   container.placeAt('content');

  }

});

//CSS for removing border for Textfield

	<style type="text/css">
		.noBorder{
		border: none!important;
		}
		</style>

[venkatachala_ck · Accepted solution]

Hi Ramesh,

thankyou for your response