How to Populate the Reference Fields using the GlideModal

[tejarekanda]

Creating UI Page

• HTML

<g:ui_form>
    <table style="width:100%">
        <tr>
            <td><b>Assigned To:</b></td>
            <td>
                <!-- Reference field -->
                <g:ui_reference name="assigned_to" table="sys_user"/>
            </td>
        </tr>

        <tr>
            <td><b>Work Notes:</b></td>
            <td>
                <textarea id="work_notes" rows="5" style="width:100%"></textarea>
            </td>
        </tr>

        <tr>
            <td colspan="2" style="text-align:right;padding-top:10px;">
                <button type="button" class="btn btn-primary" onclick="submitData()">Submit</button>
                <button type="button" class="btn btn-default" onclick="closeModal()">Cancel</button>
            </td>
        </tr>
    </table>
</g:ui_form>

• Client Script

onLoad();
function onLoad() {
    var dialog = GlideDialogWindow.get();
    

    var assignedToSysId = dialog.getPreference('assigned_to_sysid');
    var assignedToDisplay = dialog.getPreference('assigned_to_display');
    alert(assignedToSysId);

    if (assignedToSysId) {
        gel('assigned_to').value = assignedToSysId;
        gel('sys_display.assigned_to').value = assignedToDisplay;
    }
}

function submitData() {
    var assignedToSysId = gel('assigned_to').value;
    var assignedToDisplay = gel('sys_display.assigned_to').value;
    var workNotes = gel('work_notes').value;

    if (!assignedToSysId) {
        alert("Please select Assigned To");
        return;
    }

    if (!workNotes) {
        alert("Please enter Work Notes");
        return;
    }

    var dialog = GlideDialogWindow.get();

    var callback = dialog.getPreference('onSubmit');
    if (callback) {
        callback(assignedToSysId, assignedToDisplay, workNotes);
    }

    dialog.destroy();
}

function closeModal() {
    GlideDialogWindow.get().destroy();
}
​

Creating UI action

function openModal() {
    var dialog = new GlideModal('assign_worknotes_modal');
    dialog.setTitle('Assign and Add Work Notes');

    // Get current form values
    var assignedToSysId = g_form.getValue('assigned_to');
    var assignedToDisplay = g_form.getDisplayValue('assigned_to');
    alert(assignedToSysId);

    //Pass to UI Page
    dialog.setPreference('assigned_to_sysid', assignedToSysId);
    dialog.setPreference('assigned_to_display', assignedToDisplay);

    dialog.setPreference('onSubmit', function(sysId, displayValue, workNotes) {
        g_form.setValue('assigned_to', sysId, displayValue);
        g_form.setValue('work_notes', workNotes);
    });

    dialog.render();

Populate the Assigned to field on the Record

After Clicking On the UI action the Reference Field automatically Populated

[pr8172510]

Hi Teja,

Good implementation — you’re very close  This is a common scenario when working with GlideModal and reference fields.

A few things you should know and adjust:

1. Why reference field sometimes doesn’t populate properly
   Even though you’re setting:

gel('assigned_to').value = assignedToSysId;
gel('sys_display.assigned_to').value = assignedToDisplay;

The reference field (g) also relies on internal reference handling (AJAX + UI policies), so just setting values may not always fully sync.

1. Recommended approach → Use setDisplayValue properly

Instead of directly manipulating DOM:

Ensure both values are set correctly and in sync:

gel('assigned_to').value = assignedToSysId;
gel('sys_display.assigned_to').value = assignedToDisplay;

✔ This part is correct in your script
 But make sure this runs after the reference field is fully rendered

1. Key issue → Timing (onLoad vs field ready)

Sometimes onLoad executes before reference widget is ready.

Fix:

setTimeout(function() {
    if (assignedToSysId) {
        gel('assigned_to').value = assignedToSysId;
        gel('sys_display.assigned_to').value = assignedToDisplay;
    }
}, 100);

This ensures proper population

1. Alternative (more reliable) → Use g_form in modal (if applicable)

If your modal supports it (depends on UI Page setup), using APIs is better than DOM manipulation.

1. Important check

Make sure:

✔ Field name = assigned_to
✔ Reference = sys_user
✔ No UI Policy clearing the value
✔ No Client Script overriding onLoad

1. Best practice (important)

✔ Always set both:

• sys_id field → assigned_to
• display field → sys_display.assigned_to

✔ Handle timing issues in GlideModal
✔ Avoid relying only on DOM when possible

[Ankur Bawiskar]

@tejarekanda 

I shared solution for something similar in mid 2022, check and enhance

Store value in reference field of ui page using client script 

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Ankur Bawiskar]

@tejarekanda 

Hope you are doing good.

Did my reply answer your question?

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏