Skip to Content

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

To report this post you need to login first.

11 Comments

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

  1. Abhijeet Kulkarni

    This works perfectly for TextField. However, fails with PasswordField. The failure is pretty odd: The placeholder text is shown correctly, but upon typing the password, the typed characters are shown.

    The same can be fixed by adding another line as follows:

    oRm.writeAttributeEscaped(‘type’, ‘password’);

    after

    oRm.writeAttributeEscaped(‘placeholder’, oTextField.getPlaceholder());

    This ensures that the type field that is overwritten by extend is rewritten.

    (0) 

Leave a Reply