In this article I’ll show you how you can use GlideDialogWindow to pop open a dialog containing any custom UI Page information you want. I’ll also show how you can pass information into those dialogs, and how you can return information from those dialogs back to the standard form that initiated the dialog. These dialogs can be initiated from any place where you can use client scripts…client scripts, UI Macros, UI Actions, etc.

The example I’ll use here is based on one that a ServiceNow developer wrote as an example. It’s not very fancy, but it’s simple enough to show how things work without adding a bunch of confusing elements. It simply opens a dialog with information populated from the form and returns information from the dialog to the form.

The first piece of this solution is to set up some mechanism to trigger your GlideDialogWindow. For this example, I’ve chosen to use a UI Action button. Here are the details of the button. The comments in the script explain how to initialize the dialog and pass parameters on to your UI Page to populate information there.

function commentsDialog() {
//Get the values to pass into the dialog
var comments_text = g_form.getValue("comments");
var short_text = g_form.getValue("short_description");//Initialize and open the Dialog Window
var dialog = new GlideDialogWindow("task_comments_dialog"); //Render the dialog containing the UI Page 'task_comments_dialog'
dialog.setTitle("Add Task Comments"); //Set the dialog title
dialog.setPreference("comments_text", comments_text); //Pass in comments for use in the dialog
dialog.setPreference("short_text", short_text); //Pass in short description for use in the dialog
dialog.render(); //Open the dialog
}

Once you have your UI Action set up to trigger the dialog, you need to make sure that you have the correctly-named UI Page to display in the dialog. In the script above, we used ‘var dialog = new GlideDialogWindow(“task_comments_dialog”);’ to initialize a GlideDialogWindow and point to the ‘task_comments_dialog’ UI Page. Here’s what that page looks like. The comments in the HTML below explain each piece of the UI Page. The client script portion of the UI Page is used to validate the input on submission of the dialog form. If validation passes, the value of the ‘Comments’ field on the dialog is passed to the ‘Comments’ field on the original form.

<table width="100%">
<tbody>
<tr id="description_row" valign="top">
<td colspan="2">${jvar_short_text}</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>

function validateComments() {
//Gets called if the 'OK' dialog button is clicked
//Make sure dialog comments are not empty
var comments = gel("dial_comments").value;
comments = trim(comments);
if (comments == "") {
//If comments are empty stop submission
alert("Please provide comments to submit the dialog.");
return false;
}
//If comments are not empty do this...
GlideDialogWindow.get().destroy(); //Close the dialog window
g_form.setValue("comments", comments); //Set the 'Comments' field with comments in the dialog
}

The post GlideDialogWindow: Advanced Popups Using UI Pages appeared first on ServiceNow Guru.

The first part of this solution is to set up a client-side trigger for your terms dialog. For this example, we assume that the Terms dialog only needs to be displayed for a particular catalog item so our trigger can be in an ‘onLoad’ catalog client script set against the item in question. The script simply needs to create and render the dialog when the item (or potentially variables) load. It also needs to point to a UI Page (by name) that should load within the dialog. It’s the UI Page that will contain all of the specific form elements and terms. If you want your dialog to redirect to a specific location if the ‘Cancel’ button is clicked you can include the ‘cancel_url’ preference as shown below…

function onLoad() {
//Initialize and open the Dialog Window
var dialog = new GlideDialogWindow('terms_and_conditions_dialog'); //Render the dialog containing the UI Page 'terms_and_conditions_dialog'
dialog.setTitle('Terms and Conditions'); //Set the dialog title
dialog.setSize(600,600); //Set the dialog size
dialog.removeCloseDecoration(); //Remove the dialog close icon
dialog.setPreference('cancel_url', 'catalog_home.do?sysparm_view=catalog_default'); //Set optional cancel redirect URL
dialog.render(); //Open the dialog
}

Now that we’ve set up a trigger, we need to make sure that we have a UI Page with the correct name to be triggered. Notice in the script above that we’re looking for a UI Page named ‘terms_and_conditions_dialog’ in our dialog client script. The correct name is the only absolute in the UI Page. It needs to match the name given in the client script trigger.
The other elements of the UI Page are up to you. Typically when I’ve seen a terms and conditions page, the page contains the terms, an ‘Agree’ checkbox of some sort, and buttons to agree or cancel. I’ve commented those portions of code below. The buttons both trigger specific client-side functions that make sure the ‘Agree’ checkbox is checked (for the ‘OK’ button) and redirect back to the default homepage – or the homepage passed in via the ‘cancel_url’ parameter (for the ‘Cancel’ button). The only thing I haven’t provided is the actual terms and formatting. In order to produce that in a nice HTML format, I actually cheated and pasted my terms into the HTML editor on a blank KB article. Then I could get it formatted like I want and then just toggle to the code editor and copy the HTML into the correct place in my UI Page…

<!-- Get values from dialog preferences passed in -->

<input id="cancel_url" type="hidden" value="${jvar_cancel_url}" />
<table width="100%">
<tbody>
<tr>
<td>
<div style="width: 584px; height: 400px; overflow: auto; border: 1px solid gray;">ENTER YOUR TERMS HERE...</div></td>
</tr>
<tr>
<td>
<div style="margin-top: 10px;"><!-- Pull in 'ui_checkbox' UI Macro for accept checkbox -->

<label for="load_demo">I accept these terms and conditions.</label></div></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr id="dialog_buttons">
<td colspan="2" align="right"><!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons --></td>
</tr>
</tbody>
</table>

function termsOK(){
//Gets called if the 'OK' dialog button is clicked
//Make sure terms have been accepted
var terms = gel('accept_terms').value;
if(terms != 'true'){
//If terms are false stop submission
alert('Please accept the terms and conditions to continue your order.');
return false;
}
//If accept checkbox is true do this...
GlideDialogWindow.get().destroy(); //Close the dialog window
//g_form.setValue('myvar', true); //Optionally set the value of a variable or field indicating acceptance
}

function termsCancel(){
//Redirect gets called if the 'Cancel' dialog button is clicked
if($('cancel_url').value != 'null'){
window.location = $('cancel_url').value;
}
else{
window.location = 'home.do'; //Redirect to default homepage
}
}

The post GlideDialogWindow – Terms and Conditions Acceptance Page appeared first on ServiceNow Guru.

In this article I’ll show you how you can use GlideDialogWindow to update records from a list with a multiple update or a form with an update or insert on a single record anywhere in the system.

Displaying a form popup from a form

Here’s an example I’ve used in the past that shows how you can use ‘GlideDialogWindow’ to show a popup from a form that you can use to update any record in the system (or make an insert into any table in the system). This example is a popup that shows required closure information when a UI action button is clicked.

1Create a new view on the table that has the form that you want to appear in the popup. For the new view you’ll just want to make sure that you include only the fields that are absolutely necessary to allow the user to make an update. In almost every case, your default form view will have way more information than is required. For this example I just added a few fields that would allow the user to enter resolution information about the incident.

2Create a UI action button that you can click to make the popup appear. Make sure to check the ‘Client’ checkbox and provide a value of ‘showMyForm()’ (or whatever the name of your ‘onclick’ function is) in the ‘OnClick’ field. For this example, I’ve added a condition of ‘!current.isNewRecord()’ so that the button doesn’t show up unless it appears on a valid record. Replace the reference to ‘ResolveDialog’ below with the name of your new view created in step 1 above.

function showMyForm(){
//Get the table name and sys_id of the record
var tableName = g_form.getTableName();
var sysID = g_form.getUniqueValue();//Create and open the dialog form
var dialog = new GlideDialogForm('Update incident', tableName); //Provide dialog title and table name
dialog.setSysID(sysID); //Pass in sys_id to edit existing record, -1 to create new record
dialog.addParm('sysparm_view', 'ResolveDialog'); //Specify a form view
dialog.addParm('sysparm_form_only', 'true'); //Add or remove related lists
dialog.render(); //Open the dialog
}

Thanks to the forums I also found that if you need to pass values into the dialog from your original form, you can set a callback function to pass and set those values into your dialog like this…

function showMyForm(){
//Get the table name and sys_id of the record
var tableName = g_form.getTableName();
var sysID = g_form.getUniqueValue();

//Create and open the dialog form
var dialog = new GlideDialogForm('Update incident', tableName); //Provide dialog title and table name
dialog.setSysID(sysID); //Pass in sys_id to edit existing record, -1 to create new record
dialog.addParm('sysparm_view', 'ResolveDialog'); //Specify a form view
dialog.addParm('sysparm_form_only', 'true'); //Add or remove related lists

dialog.setLoadCallback(function(iframeDoc) {
// To get the iframe: document.defaultView in non-IE, document.parentWindow in IE
var dialogFrame = 'defaultView' in iframeDoc ? iframeDoc.defaultView : iframeDoc.parentWindow;

dialogFrame.g_form.setValue('close_notes', 'Hello world!');
dialogFrame = null;
});

dialog.render(); //Open the dialog
}

3Since this form will include ALL of the buttons that normally display on the form, you’ll probably also want to add a client script that runs against the view you created and removes any unnecessary buttons. Typically you’ll just want to have the ‘Update’ button visible for something like this. An ‘onLoad’ client script that runs against your new view with a script like this should do the trick.

function onLoad() {
//Set the incident state to Resolved
g_form.setValue('state', 6);
g_form.setReadonly('state', 'true');

//Remove all buttons except for the 'Update' button
var items = $$('BUTTON').each(function(item){
if(item.id != 'sysverb_update'){
item.hide();
}
});
}

Here’s the end result. A simple, nice-looking form that allows you to make changes to any record in the system without navigating away from the record you’re currently viewing!

Displaying a form popup from a list (multiple updates with one action)

Here’s an example I’ve used in the past that shows how you can use ‘GlideDialogWindow’ along with the ‘showQuickForm’ method to show a popup from a list that you can use to update multiple records in a list with a single action.

1Create a new view on the table that has the form that you want to appear in the popup. For the new view you’ll just want to make sure that you include only the fields that are absolutely necessary to allow the user to make an update. In almost every case, your default form view will have way more information than is required. For this example I just added a few fields that would allow the user to enter assignment information about the incident.

2Create a UI action list choice menu option that you can click to make the popup appear. Replace the reference to ‘assignment’ in the condition below with the name of your new view created in step 1 above. You’ll also need to make sure that the ‘Action Name’ of your UI action matches the action name passed into your ‘OnClick’ function. Notice that I have ‘reassign’ for both the ‘Action Name’ and as a parameter going into the ‘showQuickForm’ function.

try{
//Make sure State gets changed to 'Active'
current.state = 2;
current.update();
}catch(e){}

That’s it! There’s no need to remove extra buttons or form elements in this case. The ‘showQuickForm’ function takes care of that for you. You should be able to go to your record list, check a few records, and click the UI action choice option to see a popup that allows you to update multiple records with entries from your custom form in a single action.

The post GlideDialogWindow: QuickForms appeared first on ServiceNow Guru.

This first example shows how to pop open a list of major incidents in a GlideDialog window.

//Show Major Incidents in a GlideDialog popup window
function showMajorIncidents() {
//Initialize the GlideDialog window
var w = new GlideDialogWindow('show_list');
w.setTitle('Major Incidents');
w.setPreference('table', 'incident_list');
w.setPreference('sysparm_view', 'default');
//Set the query for the list
var num = g_form.getValue('number');
var query = 'active=true^priority=1^number!=' + num;
w.setPreference('sysparm_query', query);
//Open the popup
w.render();
}

In some cases it may be necessary to open the popup in a separate window completely. This script opens a regular popup window containing a list of major incidents.

//Show Major Incidents in a Popup Window
function showMajorIncidents() {
//Construct a URL for our popup window
var num = g_form.getValue('number');
var tableName = 'incident';
var url = tableName + '_list.do?';
url += 'sysparm_query=active=true^priority=1^number!=' + num;
//Open the popup
var w = getTopWindow();
w.popupOpenFocus(url, 'related_list', 950, 700, '', false, false);
}

You can also use these functions in UI Macros. Here’s an example that pops open a window displaying high-priority incidents currently open for the selected CI. The script would need to be put in a UI Macro and that macro would need to be added to the ‘cmdb_ci’ field.

<!--?xml version="1.0" encoding="utf-8" ?-->

;


<script>
function showCIIncidents(reference) {
   //Get the name of the field referenced by this macro
   var s = reference.split('.');
   var referenceField = s[1];
   //Get the value of the reference field
   var v = g_form.getValue(referenceField);

   //Initialize the dialog window
   var w = new GlideDialogWindow('show_list');
   w.setTitle('Major Incidents');
   w.setPreference('table', 'incident_list');
   w.setPreference('sysparm_view', 'default');

   //Set the query for the list
   var num = g_form.getValue('number');
   var query = 'active=true^priority=1^number!=' + num + '^' + referenceField + '=' + v;
   w.setPreference('sysparm_query', query);
   //Open the popup
   w.render();
}
</script>

The post GlideDialogWindow: Popup Record List appeared first on ServiceNow Guru.