Get Display Values in Client Scripts

[Muhammad Khan]

As we all know that it's always been a concern to get the display value of different fields/variables in client scripts. So, this little effort is based on my learning to demonstrate that how to get display value of different fields/variables given below.

1. Select Box Variable / Choice Field
2. Reference Variable / Reference Field
3. Lookup Select Box Variable
4. List Collector Variable

Note: In this implementation objects like window to distinguish between Service Portal and Native UI is not used, rather a different approach is used in which you do not have to uncheck (make false) the Isolate script checkbox.

Service Portal Result

Native UI Result

Note: In below catalog client script, display value for List Collector and Lookup Select Box in Native UI does not work.

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    // For Selectbox Variable or Choice Field
    var isPortal = g_form.getDisplayValue('type');
    if (isPortal.length != 0) {
        g_form.showFieldMsg('type', 'New Backend Value: ' + newValue + ' New Display Value: ' + g_form.getDisplayValue('type'));
    } else {
        g_form.showFieldMsg('type', 'New Backend Value: ' + newValue + ' New Display Value: ' + g_form.getOption('type', newValue).text);
        g_form.showFieldMsg('type', 'Old Backend Value: ' + oldValue + ' Old Display Value: ' + g_form.getOption('type', oldValue).text);
    }

    // For Reference Variable
    isPortal = g_form.getDisplayValue('user');
    if (isPortal.length != 0) {
        g_form.showFieldMsg('user', 'New Display Value: ' + g_form.getDisplayValue('user'), 'info', true);
    } else {
        g_form.showFieldMsg('user', 'New Display Value: ' + g_form.getDisplayBox('user').value, 'info', true);
    }

    // For Lookup Selectbox Variable
    isPortal = g_form.getDisplayValue('lookup_selectbox');
    if (isPortal.length != 0) {
        g_form.showFieldMsg('lookup_selectbox', 'New Display Value: ' + g_form.getDisplayValue('lookup_selectbox'), 'info', true);
    } else {
        // Control comes here if item is opened in Native UI.
        // This does not work for List Collector.
        g_form.showFieldMsg('lookup_selectbox', 'New Display Value: ' + g_form.getDisplayBox('lookup_selectbox').value, 'error', true);
    }

    // For List Collector Variable
    isPortal = g_form.getDisplayValue('list_collector');
    if (isPortal.length != 0) {
        g_form.showFieldMsg('list_collector', 'New Display Value: ' + g_form.getDisplayValue('list_collector'), 'info', true);
    } else {
        // Control comes here if item is opened in Native UI.
        // This does not work for List Collector.
        g_form.showFieldMsg('list_collector', 'New Display Value: ' + g_form.getDisplayBox('list_collector').value, 'error', true);
    }

}

Interested in reading my other articles, go through the below link.

Useful Implementation for Service Portal and Native UI

Always open to learn new things.

Happy Learning

[Pooja58]

function onLoad() {

alert(g_form.getDisplayBox('caller_id').value); // display reference field
var state_val = g_form.getValue('state');
var state_label = g_form.getOption('state',state_val).text; // display choice field name
alert(state_label);


}

[alexaria]

This also worked for me:

var assignee = g_form.getValue('assigned_to');

var assigneeName = getDisplayValue_2('assigned_to', 'sys_display.sc_req_item.assigned_to');


// htmlID: exact HTML id from your browser's inspect window
function getDisplayValue_2(fieldName, htmlID) {

	// frontend eg. CatItem by OOB
	if (!window)
		return g_form.getDisplayValue(fieldName);

	// backend eg. RITM by OOB
	if (g_form.getDisplayBox(fieldName) && g_form.getDisplayBox(fieldName).value)
		return g_form.getDisplayBox(fieldName).value;

	// backend eg. RITM by HTML
	var el = document.getElementById(htmlID) || // try this.document... on errors
		document.querySelector('[id$="' + htmlID + '"]');
	if (!el) return '';
	var tag = el.tagName.toLowerCase();
	if (tag === 'input' || tag === 'textarea') { // reference, textbox, ...
		return el.value || '';
	}
	if (tag === 'select') { // selectbox
		var opt = el.selectedOptions && el.selectedOptions[0];
		return opt ? opt.textContent.trim() : '';
	}
	return el.textContent.trim() || '';
}