Skip to Content
Author's profile photo Former Member

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

Assigned tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo John Patterson
      John Patterson

      Thanks for sharing

      Author's profile photo Graham Robinson
      Graham Robinson

      Thanks Noufal, a nice simple example of how to extend SAPUI5 components.

      Author's profile photo ABDUL RAHEEM SHAIK
      ABDUL RAHEEM SHAIK

      Thanks for providing information on this nice to have feature.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      I am blogging after a very long gap. Thank you all for the support.

      Author's profile photo Former Member
      Former Member

      Thanks a lot for sharing.

      Author's profile photo Former Member
      Former Member

      Nice one! Thanks!

      Author's profile photo A.W. Mostert
      A.W. Mostert

      Thanks! Works perfectly.

      According to the current SAPUI5 API it should be in there, but it isn't.

      Author's profile photo DJ Adams
      DJ Adams

      This would suggest it is:

      http://jsbin.com/amInePi/1/edit?html,output

      dj

      Author's profile photo A.W. Mostert
      A.W. Mostert

      You are right 🙂 .

      I'm building a desktop web application and my development environment is 1.12.1 where the placeholder is not working. In 1.14.2 it works fine.

      http://jsbin.com/OzoYUmo/1/edit?html,output

      Arnold

      Author's profile photo Abhijeet Kulkarni
      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.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you for sharing