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.

After a bit of digging I was able to figure out how ServiceNow was doing those types of comparisons for update sets and versions of Business Rules, UI Pages, etc. They’ve got a number of different script includes that take the different XML updates and then compare the various parts of them. Down under the hood a little ways there is a class that they have to compare between actual text values. Finding this was the jackpot since it allowed comparing just those things that I specifically wanted to compare. Using this class ended up being a relatively straight forward process, but did require some scripting (including JellyScript) so it may not be for the faint of heart.

Here’s what it will look like in the end:

Here’s what it will look like in the end.

The biggest part of the challenge is handled by ServiceNow’s “Differ” script include. This class has one main function that is used to do the magic: diff.

The diff function takes in four parameters:

• text1 – The first string that will be used in the comparison
• text2 – The second string that will be used in the comparison
• name – The label for what you’re comparing. Most likely going to be the field label for the field that you’re comparing. This shows up in a column on the left of the comparison
• change – An optional parameter that indicates whether to return a result if the strings match

The end result of this is a string with part of a table that contains the strings compared line by line just like you see when comparing differences in an update set preview. It is assumed that the results of this function will be included as part of a table given a specific class so that the rows are formatted correctly. There is an XML header that needs to be removed from the result but essentially this is the code needed to use the result of the function:

diff_output
<table class="diff">
<thead>
<tr>
<th class="top_left_field"></th>
<th class="texttitle" colspan="2">Left Label</th>
<th class="texttitle" colspan="2">Right Label</th>
</tr>
</thead>
</table>

The left and right labels identify what it is that you’re comparing and diff_output is the output from the function.

There are a few different ways this functionality can be used; after looking at it I opted to use a GlideDialog window and UI Page to provide a similar experience to what is already used in other places. To do this a UI Action needs to be set up to open the dialog window and a UI Page needs to be set up to do the comparison and show the results.

Here’s what’s needed in the UI Action. It’s relatively generic other than the UI Page that is referenced. For the fields that I haven’t included you can use the default or adjust it as you see fit:

Name: Compare to Current
Table: table that has the version info you want to compare to the current record
Client: true
Form link: true
List context menu: true
Onclick: showTheComparison()
Script:

function showTheComparison(){
//Get the values to pass into the dialog
var sysId;
// Check if this is called from a List, if so, rowSysId will have the Sys ID of the record
if (typeof rowSysId == 'undefined'){
// If it's called from a form, get the Sys ID of the record being shown
sysId = gel('sys_uniqueValue').value;
} else {
sysId = rowSysId;
}
//Initialize and open the dialog
//Instantiate the comparison dialog, the parameter is the name of your UI Page
var dialog = new GlideDialogWindow("compare_kb_to_version");
//Set the dialog title
dialog.setTitle("Version Comparison");
// Pass in the Sys ID of the record to compare
dialog.setPreference("version_sys_id", sysId);
// Set the size
dialog.setSize('95%', '95%');
//Open the dialog
dialog.render();
}

The UI Page has a little more to it since it needs to reference the specific tables and fields where the two versions are stored.

Name: compare_kb_to_version
HTML:

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


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Diff magic using the SN Differ class
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
// variable to aggregate the differences for the fields into
var diff = "";
// get the SN object that does the comparing
var differ = new Differ();

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Values needed for the diff
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
var left_label = "Published Article";
var right_label = "";

// Get the version info from the dialog property
var version_sys_id = RP.getWindowProperties().get('version_sys_id');
var version = new GlideRecord("kb_submission");
if (version.get(version_sys_id)) {
// Set the label for the right side of the difference
right_label = "Version: " + version.number;

/*~~~~~ Short Description field ~~~~~*/
// Pass in the strings that need comparing
// u_kb_article is the reference field that refers to the KB article that the version is for
var kb_short_description = differ.diff(version.u_kb_article.short_description, version.short_description, version.short_description.getLabel(), true);
// Strip off the XML header
var starter = kb_short_description.indexOf("?>");
kb_short_description = kb_short_description.substring(starter + 2);
diff += kb_short_description;

/*~~~~~ Text field ~~~~~*/
// Pass in the strings that need comparing
var kb_text = differ.diff(version.u_kb_article.text, version.text, version.text.getLabel(), true);
// Strip off the XML header
var starter = kb_text.indexOf("?>");
kb_text = kb_text.substring(starter + 2);
diff += kb_text;

}

 

${diff}
<table class="diff">
<thead>
<tr>
<th class="top_left_field"></th>
<th class="texttitle" colspan="2">${left_label}</th>
<th class="texttitle" colspan="2">${right_label}</th>
</tr>
</thead>
</table>

The first section of code in the g:evaluate tag sets up the Differ class. Then we get the labels for each side of the comparison. Then we get the comparisons for each of the fields that we’re trying to compare. In this case we’re comparing the Short Description and the Text fields. The comparison results are cleaned up and concatenated in a string to be used inside the wrapper HTML code that sets up the header and styles.

Once you’ve got all of that in place, seeing the differences is just a click or two away.

The post Comparing the Differences Between Two Strings appeared first on ServiceNow Guru.

1Create a UI page containing the live feed in an iFrame

<iframe id="feedframe" style="height: 320px; width: 100%;" src="live_feed_small.do" frameborder="0" scrolling="yes"></iframe>

2Follow the instructions here to add your UI page to a widget, and add your widget to a homepage.

The post Creating a Live Feed Homepage Widget appeared first on ServiceNow Guru.

The first step in creating a widget is to create the UI page to display the widget content. I’m not going to go into the complexities of UI page scripting here, but a UI page to add a knowledge search widget should look like this…

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <g:inline template="kb_header_search.xml" />
</j:jelly>

Next, you’ll need to reference this UI page in a ‘Widget’ record in order to enable users (and you as an administrator) to add it to a homepage. Widgets can be found by navigating to ‘System UI -> Widgets’ and they control the options that people see when they click the ‘Add content’ link on a homepage. There are several out-of-box widgets, but I like to set up a new widget for any instance that I work on called ‘Custom Widgets’ so that I don’t have to modify any out-of-box code. If you’ve got a ‘Custom Widgets’ widget in your system then you’re okay to modify that or create a new one if you choose.

As you might expect, the widget needs to follow a very specific pattern if it is to work correctly. I always use the same pattern that is used for the out-of-box widgets to keep things more standard and simple. It really requires only a couple of things. First, your UI page MUST be named with a ‘render_gadget_’ prefix (notice how I’ve named the ‘render_gadget_kbsearch’ UI page above). Second, you need to modify the ‘sections’ function below to include a line telling the script what the label of the widget will be, and the name of the UI page…minus the ‘render_gadget_’ part. The part of the script below that displays the KB search looks like this…’Knowledge Search’ : { ‘type’ : ‘kbsearch’ }.

function sections() {
   return {
      'Priority 1 Incidents' : { 'type' : 'pri1incidents' },
      'Priority 1 Problems' : { 'type' : 'pri1problems' },
      'Emergency Changes' : { 'type' : 'emergencyChanges' },
      'Knowledge Search' : { 'type' : 'kbsearch' }
   };
}

function sections() {
   return {
      'Knowledge Search' : { 'type' : 'kbsearch' }
   };
}

function render() {
   var type = renderer.getPreferences().get("type");
   var gf = new GlideForm(renderer.getGC(), "render_gadget_" + type, 0);
   gf.setDirect(true);
   gf.setRenderProperties(renderer.getRenderProperties());
   return gf.getRenderedPage();
}

function getEditLink() {
   return "sys_ui_page.do?sysparm_query=name=render_gadget_" + renderer.getPreferences().get("type");
}

Once you’ve set up your UI page and Widget record correctly you can open up a homepage and click the ‘Add content’ link in the top-left corner of the page. You’ll see your widget category name, ‘Custom Widgets’ in the first box, followed by the name of your ‘Knowledge Search’ widget in the second box to add to a homepage.

The post Creating a Knowledge Search Homepage Widget appeared first on ServiceNow Guru.

function addApprovalGroups(){
   //Open a dialog window to select Approval Groups
   var dialog = new GlideDialogWindow('add_approval_groups');
   dialog.setTitle('Add Approval Groups');
   dialog.setPreference('sysparm_groupQuery', 'active=true');
   dialog.render();
   //Make sure to not submit the form when button gets clicked
   return false;
}

The UI action opens the dialog with a call to a specific UI page. The UI page is what contains most of the logic for the slushbucket. It includes the actual HTML (which pulls in the slushbucket and UI buttons from UI macros) as well as the client script that loads the groups and makes a call to insert group approval records.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <TABLE BORDER="0">
      <TR>
         <TD>
            Please select the groups you wish to add as approvers.
         </TD>
      </TR>
      <TR>
         <TD>
            <!-- Include the 'ui_slushbucket' UI macro -->
            <g:ui_slushbucket/>
         </TD>
      </TR>
      <TR>
         <TD align="right">
            <!-- Include the 'dialog_buttons_ok_cancel' UI macro -->
            <g:dialog_buttons_ok_cancel ok="return continueOK()" cancel="return continueCancel()" ok_type="button" cancel_type="button"/>
         </TD>
      </TR>
   </TABLE>
</j:jelly>

//Called when the 'OK' button gets clicked
function continueOK(){
   //Get the selected values from the right slushbucket
   var values = slush.getValues(slush.getRightSelect());
   //Get the sys_id of the current record
   var taskID = g_form.getUniqueValue();
   //Make sure we have at least one selection
   if(values == ''){
      alert("At least one group must be selected");
      return;
   }

   //Add the group approval records
   var ajax = new GlideAjax('GroupSelectAjax');
   ajax.addParam('sysparm_name', 'groupsAdd');
   ajax.addParam('sysparm_taskID', taskID);
   ajax.addParam('sysparm_values', values);
   ajax.getXML(addGroupResponse);
}

//Called when we get a response from the 'continueOK' function
function addGroupResponse(){
   GlideDialogWindow.get().destroy();
   GlideList2.get('').setFilterAndRefresh('');
   return false;
}

//Called when the 'Cancel' button gets clicked
function continueCancel(){
   //Close the dialog window
   GlideDialogWindow.get().destroy();
   return false;
}

//Called when the form loads
addLoadEvent(function(){
   //Load the groups when the form loads
   slush.clear();
   var ajax = new GlideAjax('GroupSelectAjax');
   ajax.addParam('sysparm_name', 'getGroups'); 
   ajax.getXML(loadResponse);
   return false; 
});

//Called when we get a response from the 'addLoadEvent' function
function loadResponse(response){
   //Process the return XML document and add groups to the left select
   var xml = response.responseXML;
   var e = xml.documentElement; 

   var items = xml.getElementsByTagName("item");
   if(items.length == 0)
      return;

   //Loop through item elements and add each item to left slushbucket
   for (var i = 0; i < items.length; i++) {
      var item = items[i];
      slush.addLeftChoice(item.getAttribute('value'), item.getAttribute('text'));
   }
}

Many times, you can stop with the UI page. In this case, it makes sense for us to do some of our heavy-lifting for populating the groups in the slushbucket and creating group approval records at the server. The client scripts in the UI page make GlideAjax calls to the functions in a script include. The script include performs the query and returns an XML response back to the client so that it can continue.

var GroupSelectAjax = Class.create();

GroupSelectAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
   //Get and return a list of groups (name and sys_id)
   getGroups: function() {  
      var gr = new GlideRecord("sys_user_group");
      gr.orderBy('name');
      gr.addQuery('active', true);  
      gr.query(); 

      //Add the available groups to select from
      while (gr.next()) {
         var item = this.newItem();
         item.setAttribute('value', gr.getValue('sys_id'));
         item.setAttribute('text', gr.getValue('name'));
      }
   },

   //Take a taskID and group sys_id values and add 'sysapproval_group' records
   groupsAdd: function() {
      var taskID = this.getParameter('sysparm_taskID');
      var values = this.getParameter('sysparm_values').split(',');
      //Iterate through the group sys_id values
      for(x in values){
         var rec = new GlideRecord('sysapproval_group');
         rec.initialize();
         rec.parent = taskID;
         rec.assignment_group = values[x];
         rec.approval = 'requested';
         rec.insert();
      }    
   }
});

The post Creating a Custom Slushbucket Popup Dialog 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.

Now that we can search globally in an instance people are asking us to limit the results again in certain situations. While this modification is not for everyone, it does show a very non-intrusive method for creating separate search pages to limit the search scope on that particular search page to exactly what you want.

Let’s say you have a search group named ‘Tasks’ that you would like to use independently on its own search page. Users accessing your search page should only be able to search items defined within this specific search group. Here’s what my ‘Tasks’ search group looks like…

1Create a new UI Page by navigating to ‘System UI -> UI Pages’

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

<script language="JavaScript" src="scripts/text_search.jsx?v=${gs.getProperty('glide.builddate')}"/>
    <link href="styles/text_search.cssx?v=${gs.getProperty('glide.builddate')}" type="text/css" rel="stylesheet" />

	<j2:set var="jvar_found_exact_match" value="false"/>
	<!-- are search terms? --> 	
	<g2:evaluate jelly="true" var="jvar_search">
	    var answer = false;
		if (jelly['sysparm_search'] != undefined) {
		  var s = new String(jelly['sysparm_search']);
		  s = s.trim();
	      if (s.length != 0) 
		    answer = true;
	    }
		answer;  
	</g2:evaluate>

	<j2:if test="$[jvar_search]">
		<!-- save search terms for user and set unescaped_search jvar -->
		<g2:evaluate jelly="true" var="jvar_unescaped_search">
			var term = jelly.sysparm_search;
			if (jelly.sysparm_recent_search == 'true')
				term = Packages.java.net.URLDecoder.decode(jelly.sysparm_search);
				
			var gr = new GlideRecord('ts_query');
			gr.addQuery('user',gs.getUserID());
			gr.addQuery('search_term',term);
			gr.query();
			while (gr.next()) {
				gr.recent = "false";
				gr.update();
			}
			gr.initialize();
			gr.user.setValue(gs.getUserID());
			gr.search_term = term;
			gr.recent = "true";
			gr.insert();
			term;
		</g2:evaluate>
		
		<j:set var="sysparm_view" value="${gs.getProperty('glide.ui.text_search.view')}"/>
		<j2:if test="${gs.getPreference('ts.match','true') == 'true'}">
		    <g:inline template="search_match_redirect.xml" />
		</j2:if>
	</j2:if>
	<j2:if test="$[jvar_found_exact_match != 'true']">
		<g:inline template="custom_search_form" />
		<j2:if test="$[jvar_search]">
			<j:set var="jvar_list_only" value="true"/>
			<j2:set var="sysparm_query" value="123TEXTQUERY321=$[jvar_unescaped_search]" />
			<j2:set var="sysparm_force_row_count" value="${gs.getProperty('glide.ui.text_search.rowcount',10)}" />
			<j:set var="jvar_pos_link_msg" value="${gs.getMessage('Navigate to see all results for this table or try a different filter')}" />
			<j:set var="jvar_neg_link_msg" value="${gs.getMessage('Navigate to list for this table to try a different filter')}" />
			<j2:set var="jvar_query_orig" value="$[sysparm_query]"/>
			<j:if test="${sysparm_tsgroups == '' || !sysparm_tsgroups}">
				<!-- got here from ui macro, so get groups to search -->
				<g:evaluate var="sysparm_tsgroups">
					var ans = '';
					var tsgroups = new GlideRecord('ts_group');
                                        tsgroups.addQuery('name', 'Tasks'); 
					tsgroups.addActiveQuery();
					var qc = tsgroups.addQuery('group','');
					qc.addOrCondition('group',getMyGroups());
					qc.addOrCondition('group.manager',gs.getUserID());
					tsgroups.orderBy('order');
					tsgroups.query();
					while (tsgroups.next()) {
						if (gs.hasRole(tsgroups.roles)) {
							if (ans == '')
								ans = tsgroups.sys_id + '';
							else
								ans = ans + ',' + tsgroups.sys_id;
						}
					}
					ans;
				</g:evaluate>
			</j:if>
			<!-- jvar_this_tsparm has the sys_ids of the groups to be searched -->
	        <g2:evaluate>
                       if (typeof GlideIRQuerySummary != 'undefined')
                          var summarizer = GlideIRQuerySummary.get();
                       else
	                  var summarizer = Packages.com.glide.db.ir.IRQuerySummary.get();
	        </g2:evaluate>
			<g:tokenize var="jvar_this_tsparm" delim=",">${sysparm_tsgroups}</g:tokenize>
			<j:forEach var="jvar_ts_groupid" items="${jvar_this_tsparm}">
				<g2:evaluate>
					var seeGroup = gs.getPreference('ts.group.${jvar_ts_groupid}','true') == 'true';
				</g2:evaluate>
				<j2:if test="$[seeGroup]">
	               <g2:evaluate>
	                    summarizer.addGroup('${jvar_ts_groupid}', '$[jvar_query_orig]');
	               </g2:evaluate>
				</j2:if>
			</j:forEach>
			<g:tokenize var="jvar_this_tsparm" delim=",">${sysparm_tsgroups}</g:tokenize>
			<j:forEach var="jvar_ts_groupid" items="${jvar_this_tsparm}">
				<g2:evaluate>
					var seeGroup = gs.getPreference('ts.group.${jvar_ts_groupid}','true') == 'true';
				</g2:evaluate>
				<j2:if test="$[seeGroup]">
						<g:inline template="ts_group.xml"/>
				</j2:if>
			</j:forEach>
			<g:inline template="search_summary.xml"/>
		</j2:if>
		
		<script>
			if ("$[jvar_nosearch]" != "true") 
				if ("$[jvar_quicknav_text]" == "$[jvar_quicknav_text_orig]")
					document.getElementById('quicknav2').innerHTML = "${gs.getMessage('no_match_check_spelling')}";
				else {
					document.getElementById('quicknav2').innerHTML = "$[jvar_quicknav_text]";
					document.getElementById('additional').innerHTML = "$[jvar_additional_text]";
		        }
		        
			// stop the spinner
			hideLoading();
		   
			// update recent searches dropdowns
			adjustSearch();
			parent.adjustSearch();
	   
			function adjustSearch() {
				var ajax = new GlideAjax("TextSearchAjax");
				ajax.addParam("sysparm_name", "recent");
				ajax.getXML(adjustSearchResponse);
			}
	
			function adjustSearchResponse(request) {
				var answer =  request.responseXML.documentElement.getAttribute("answer");
				if (answer != null) {
					var gcm = new GwtContextMenu('context_searchform');
					gcm.clear();
					if (answer.indexOf("xyzzyx") != 0) {
						var db = answer.split("^");
						for (var i = 0; i != db.length; i++) {
							var u = new GlideURL('customtextsearch.do');
							u.addParam('sysparm_search',escape(db[i]));
							   u.addParam('sysparm_recent_search','true');
							gcm.addHref(db[i], "executeRecentSearch('"+escape(db[i])+"','"+u.getURL()+"')");
						}
					} else gcm.addLabel(answer.substr(6));
				}
			}
		</script>

2Create a new UI Macro by navigating to ‘System UI -> UI Macros’

<!--?xml version="1.0" encoding="utf-8" ?-->
<!-- called from customtextsearch UI page -->
<div><form id="customtextsearch" style="display: inline;" action="customtextsearch.do"><input id="sysparm_tsgroups" name="sysparm_tsgroups" type="hidden" value="" />
<div id="searchgroups" style="display: $[jvar_search_groups_display];">
<table>
<tbody>
<tr>
<td id="searchgroup_checkboxes"><!-- "select all" checkbox -->
<span id="ts_selectall" style="display: inline;"><input id="ts_all" name="ts_all" type="checkbox" /><label for="ts_all"><em>${gs.getMessage('Select all')}</em></label></span>
<!-- search group checkboxes -->

var tsgroups = new GlideRecord('ts_group');
tsgroups.addQuery('name', 'Tasks');
tsgroups.addActiveQuery();
var qc = tsgroups.addQuery('group','');
qc.addOrCondition('group',getMyGroups());
qc.addOrCondition('group.manager',gs.getUserID());
tsgroups.orderBy('order');
tsgroups.query();












<span style="margin-left: 4px;"><input id="ts_group_$[jvar_tsgroup]" title="$[jvar_desc]" checked="checked" name="ts_group_$[jvar_tsgroup]" type="checkbox" /></span>


<span style="margin-left: 4px;"><input id="ts_group_$[jvar_tsgroup]" title="$[jvar_desc]" name="ts_group_$[jvar_tsgroup]" type="checkbox" /></span>

<a class="searchgrouplink" title="$[jvar_edit_group_msg]">$[tsgroups.name]</a></td>
</tr>
</tbody>
</table>
</div>
<div id="searchBoxAndPrefs">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><!-- search box -->
<td style="background-color: white;" valign="top" nowrap="nowrap">
<div style="border: 1px solid #d5d5d5;"><input id="sysparm_tsgroups" name="sysparm_tsgroups" type="hidden" value="" />

var term1 = jelly.sysparm_search;
if (jelly.sysparm_recent_search == 'true')
term1 = Packages.java.net.URLDecoder.decode(term1);

<input id="sysparm_search" style="padding-left: 3px; border: solid 0px;" title="${gs.getMessage('Search')}" autocomplete="off" name="sysparm_search" size="45" type="text" value="$[term1]" />
<input class="searchGlass" style="vertical-align: middle;" title="${gs.getMessage('Search')}" alt="${gs.getMessage('Search')}" height="18" src="images/search_glass.gifx" type="image" width="14" />
<a style="margin-left: 4px;" title="${gs.getMessage('Recent searches')}">
<img id="imgText2" style="vertical-align: middle;" src="images/drop_down.gifx" alt="${gs.getMessage('Recent searches')}" width="9" height="18" border="0" /></a></div></td>
<td width="99%"></td>
<td align="right" valign="top" nowrap="nowrap"><a class="ts_adminlink" title="${gs.getMessage('Navigate to list of search groups for administration')}" href="ts_group_list.do">${gs.getMessage('Edit Search Groups')}</a></td>
</tr>
<tr>
<td id="quicknav2" colspan="2" width="99%"></td>
</tr>
</tbody>
</table>
</div>
<!-- focus in search box -->
<script>
            var l = gel('sysparm_search'); if (l) l.focus();
        </script>

</form>
<script>document.getElementById("ts_all").checked = true;</script>



<script>
            document.getElementById('quicknav2').innerHTML ="<em>${gs.getMessage('No search groups selected - please check at least one')}</em>";
            var e = document.getElementById("searchgroup_checkboxes");
            e.style.backgroundColor = "#ffffcc";
            e.style.borderWidth = "1px";
            e.style.borderStyle = "inset";
            document.getElementById("searchgroups").style.display = "block";
        </script>


<script>document.getElementById("ts_selectall").style.display = "none";</script>



<script>document.getElementById("ts_selectall").style.display = "none";
                document.getElementById("quicknav2").innerHTML = "<em>${gs.getMessage('No search groups available to you, contact your admin for details')}</em>";
        </script>

</div>

Now you can access your new search page ‘customtextsearch’ by navigating to ‘https://yourinstancename/customtextsearch.do’ (or creating a module or gauge that points to that location). Searching from this form will yield search results only from the ‘Tasks’ search group defined previously.

The post How to Create a Custom Global Search Page appeared first on ServiceNow Guru.