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