Skip to Content

Adding placeholder functionality for TextField in SAPUI5

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’

/wp-content/uploads/2013/01/file1_171740.jpg

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…

/wp-content/uploads/2013/01/file2_171741.jpg

11 Comments
You must be Logged on to comment or reply to a post.