Adding Placeholder Behavior to TextBox Elements

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

Using placeholders in HTML forms is simple enough, but when building Workflow forms, the “placeholder” attribute is not made available to us in the designer.

Using a javascript body onload event, we have a very simple way to add placeholder functionality to a TextBox component in Workflow.

Symantec Workflow TextBox Placeholder Attributes
This illustration shows the results of adding placeholder attributes to textboxes in Workflow. Note: the popup labels featured in this example are not covered in this article.

First thing that needs to be done is to add values to the Control Ids of any TextBox that needs a placeholder value.
2014-10-27_14-48-44
Next, make sure that any “Initial Value” fields are cleared (unless these are being populated by existing variable data intentionally).  We don’t want to type any static values into the “Initial Value” field if we’re using this placeholder method.
2014-10-27_14-51-30
Next, add a Body Custom Event.  Select “onload”, and enter the following for the event handler code:


 document.getElementById('TestTextBox').setAttribute("placeholder","Test Placeholder");

Symantec Workflow Body Onload Event
These steps illustrate configuring a body onload event to add a placeholder attribute to a textbox by id.

Workflow forms do not add the “placeholder” attribute to TextBox components by default.  Using this javascript method, we can easily add a placeholder to a TextBox.  The result:
2014-10-27_14-59-26

Thanks to jdeleon7010 for the question.

compatible_ie2020compatible_firefox2020compatible_chrome2020compatible_safari2020compatible_opera2020

3 thoughts on “Adding Placeholder Behavior to TextBox Elements

  1. Great Post! One rookie mistake that I was doing was adding a new entry for each text box that I wanted a placeholder for. When adding a new event in the form behavior, it would only process the last snippet of code. I had to create one onload event and add all my lines of code there.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s