Skip to main content

Show Placeholder in Rich Text Fields

Cor Winkler Prins

UI ExtensionIt is now possible to display a placeholder text in a rich text field of a UI extension. A placeholder text is typically used to make it easier for users to understand what to fill out in a field when it is still empty.

The data-placeholder attribute can now be included in the HTML of a UI extension to specify the text that should be displayed in a rich text field when it is empty. For example:

<div class=”row vertical”>
<label for=”specs” title=”Specifications”>Specifications</label>
<div id=”specs” class=”rich-text” data-placeholder=”Enter the specifications here…”></div>
</div>

The placeholder of a rich text field can also be set using JavaScript:

$(‘#specs’).placeholder(‘Enter the specifications here…’);

It is even possible to present a placeholder in the Note field. This can be done by including the following JavaScript:

ITRP.field(‘note’).placeholder(‘Describe your request here…’);