How to add placeholder function?

[hurm]

I want to give the user a hint when entering information in from table's column

like below

please help me thanks

[Maciej Kowalski]

Hi, try to use this code:

var field1 = g_form.getControl('[INSERT NAME OF FIELD HERE]');

field1.placeholder = "Test Placeholder";

[Ankur Bawiskar · Accepted solution]

Hi,

it's possible for string field

Use onLoad client script

function onLoad(){

	var field1 = g_form.getControl('fieldNameHere');
	field1.placeholder = "123-45-678";

}

Regards
Ankur

[hurm]

Is there any way to change its color? Because it's a lot like manually entered

[Ian Mildon]

As long as it's not on the Service Portal or Service Catalog you can use the following script to provide a customizable placeholder text in any font and color you want and even add a text background too:

function onLoad () {
	var config = { // add all fields and text here
		'phone_number': '123-45-678',
	};

	// This is not necessary if the script is configured not to be isolated
	var jQuery = new Function('return jQuery;')();

	getMessage(Object.keys(config).reduce(extractTextToTranslate(config), []), applyPlaceholders(config));

	function extractTextToTranslate (source) {
		return function (messages, key) {
			return messages.push(source[key]), messages;
		};
	}

	function applyPlaceholders (config) {
		return function (messages) {
			Object.keys(config)
				.map(getControlAndMessage(config, messages))
				.map(addPlaceholder(config, messages))
				.map(addPlaceholderStyle());
		};
	}

	function getControlAndMessage (config, messages) {
		return function (fieldName) {
			return { 'control': g_form.getControl(fieldName), 'message': messages[config[fieldName]], };
		};
	}

	function addPlaceholder () {
		return function (controlAndMessage) {
			jQuery(controlAndMessage.control)
				.attr('placeholder', controlAndMessage.message);

			return controlAndMessage.control;
		};
	}

	function addPlaceholderStyle () {
		return function (control) {
			jQuery('head')
				.prepend(getStyle(control.id));

			return control;
		};
	}

	function getStyle (id) { // set the background color, font color and style here
		var css = '*[id="element.' + id + '"] .form-control::placeholder { background-color: #f2f3f3; color: #7d8282; font-style: italic; };';

		return jQuery('<style>')
			.text(css);
	}
}

Just enter you field name and placeholder text on line 3, then on line 49, change the background-color, color and font-style to suit.

Oh and if you are wanting to do something similar on the Service Portal or Service Catalog, there is a "hidden" OOB field called "Example Text" that if you unhide (edit the UI Policy) and then you can add text directly to the variables. But this will not be as customizable as the above script.