Adding placeholder functionality for TextField in SAPUI5

[Former Member]

SAPUI5 does not provide placeholder functionality for the Textfield by default(currently). With the help from the forums (Andreas Kunz) and also my colleague (Anastasios Georgousakis), I was able to do a work around extending the TextField element.

1) Create a file 'MyTextField.js'

2) Add reference to the new file in your index.html file

<script src= "uitutorial8/MyTextField.js"></script>

3) Extend the TextField (enter the below code in MyTextField.js)

sap.ui.commons.TextField.extend("MyTextField", {

          metadata : {

                    properties : {

                              "placeholder" : "string"

                    }

          },

          renderer : {

                    renderInnerAttributes : function(oRm, oTextField) {

                              oRm.writeAttributeEscaped('placeholder', oTextField.getPlaceholder());

                              oRm.addStyle('background-color', '#fff'); // this change could also be done with plain CSS!!

                    }

          }

});

4) Design the view

  var myText = new MyTextField();

                myText.setPlaceholder("Please type");

                return myText;

The getter and setter for the property is generated automatically.

Done...