Blog

GlideDialog Window Example

In ServiceNow, you can make great AJAX dialog windows (GlideDialogWindow). They use an UI Page that can insert, update, or delete records, prompt for interaction, or just about anything allowed in Javascript.

From the ServiceNow Wiki, here is some documentation to read before you start building your GlideDialogWindow.

Here is an example that will allow you to create a new caller when in the Incident Form:

UI Action: New Caller

Table: Incident
Form Context Menu: true
Active: true
Show Update: true
Client: true
OnClick: newCaller()
Condition: !current.isNewRecord()
Script:
function newCaller() {
 var sysId = typeof rowSysId == 'undefined' ? gel('sys_uniqueValue').value : rowSysId;
 var gDialog = new GlideDialogWindow("inc_new_caller");
 gDialog.setTitle("New Caller");
 gDialog.setPreference('sysparm_sysID', sysId);
 gDialog.setPreference('sysparm_table', "incident");
 gDialog.render();
}

 

UI Page: inc_new_caller HTML

HTML

<g:ui_form>
<input type="hidden" id="cancelled" name="cancelled" value="false"/>
<input type="hidden" id="incidentSysID" name="incidentSysID" value="$"/>
<table width="100%" cellpadding="0" cellspacing="0">
 <tr><td nowrap="true"><g:ui_input_field label="First Name" name="first_name"id="first_name" mandatory="true" size="50"/></td></tr>
 <tr><td nowrap="true"><g:ui_input_field label="Last Name" name="last_name" id="last_name" mandatory="true" size="50" /></td></tr>
 <tr><td nowrap="true"><g:ui_input_field label="Email" name="email" id="email" mandatory="true" size="100"/></td></tr>
 <tr><td nowrap="true"><g:ui_input_field label="Business Phone" name="phone" id="phone" mandatory="true" size="40" /></td></tr>
</table> 
<table>
 <tr>
<td id="label.location" class="label" nowrap="true" height="23px" type="string" choice="0"><span id="status." class="mandatory label_description" mandatory="true" oclass="mandatory">$[SP]</span><label for="location" onclick="" dir="">Location:</label></td>
<td nowrap="true"><g:ui_reference name="location" id="location" table="cmn_location"/></td></tr>
</table> 
<table width="100%" cellpadding="0" cellspacing="0">
 <tr><td align="left" nowrap="true"><br /><g:dialog_buttons_ok_cancel ok="return validateForm();" cancel="return onCancel();"/></td></tr>
</table>
</g:ui_form>


UI Page: inc_new_caller Client Script

function onCancel() {
 var c = gel('cancelled');
 c.value = "true";
 GlideDialogWindow.get().destroy();
 return false;
}
function validateForm() {
 if (gel('first_name').value == '') {
alert("${JS:gs.getMessage('Please input First Name')}");
return false;
 }
 else if (gel('last_name').value == '') {
alert("${JS:gs.getMessage('Please input Last Name')}");
return false;
 }
 else if (gel('email').value == '') {
alert("${JS:gs.getMessage('Please input Email')}");
return false;
 }
 else if (gel('phone').value == '') {
alert("${JS:gs.getMessage('Please input Business Phone')}");
return false;
 }
 else if (gel('location').value == '') {
alert("${JS:gs.getMessage('Please input Location')}");
return false;
 }
 else {
var grUser = new GlideRecord("sys_user");
grUser.addQuery("first_name", gel('first_name').value);
grUser.addQuery("last_name", gel('last_name').value);
grUser.addQuery("email", gel('email').value);
grUser.addQuery("phone", gel('phone').value);
grUser.addQuery("location", gel('location'));
grUser.query();
if (grUser.hasNext()) {
 alert("${JS:gs.getMessage('Duplicate caller, use existing')}");
 return false;
}
else {
 return true;
}
 }
}


UI Page: inc_new_caller Processing Script

if (cancelled == "false") {
var grNewUser = new GlideRecord ("sys_user");
grNewUser.initialize();
grNewUser.first_name = request.getParameter("first_name");
grNewUser.last_name = request.getParameter("last_name");
grNewUser.email = request.getParameter("email");
grNewUser.phone = request.getParameter("phone");
grNewUser.location = request.getParameter("location");
var grNewUserSysId = grNewUser.insert();
gs.addInfoMessage("Caller "+grNewUser.first_name+" "+grNewUser.last_name+" created.");
response.sendRedirect("incident.do?sys_id=" + incidentSysID);
}

 

Hope that gives you some ideas when you are making your own dialog windows.