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.

In this article I’ll show you how you can reclaim some of that Service Catalog screen real estate by modifying the size of a list collector variable using a catalog client script.

The script is pretty simple. All you need to do is give it the name of the list collector variable you would like to resize, along with the width and height. In my testing I’ve found that the look of the variable can start to get kind of messy if you set a width less than 250 so I wouldn’t go any smaller than that.

function onLoad(){
	var varName = 'YOUR_VARIABLE_NAME_HERE';
	var height = '100'; //Optional
	var width = '250'; //Optional
	try{
		//Get the left and right bucket input elements
		var leftBucket = $(varName + '_select_0');
		var rightBucket = $(varName + '_select_1');
		
		//If the element exists
		if(leftBucket){
			//Adjust the bucket height (default is 300px)
			if(height){
				leftBucket.style.height = height + 'px';
				rightBucket.style.height = height + 'px';
			}
			
			if(width){
				//Adjust the bucket width (default is 340px)
				leftBucket.style.width = width + 'px';
				rightBucket.style.width = width + 'px';
                                //Fix Fuji/Geneva width issue
                                leftBucket.up('.slushbucket').style.width = width*2 + 100 + 'px';
			}
			
			//Fix the expanding item preview issue
			$(varName + 'recordpreview').up('td').setAttribute('colSpan', '3');
		}
	}catch(e){}
}

Here’s the result!

The post Change the Size of a List Collector Slushbucket Variable appeared first on ServiceNow Guru.

//Name of variable to move options from
var varName = 'YOUR_VARIABLE_NAME_HERE';
var leftBucket = gel(varName + '_select_0');
var rightBucket = gel(varName + '_select_1');
var selectedOptions = rightBucket.options;

//Get an array of all option IDs to move
var selectedIDs = new Array();
var index = 0;
for(var i = 0; i < selectedOptions.length; i++){
   selectedIDs[index] = i;
   index++;
}

//Move all returned options from right to left bucket and sort the results
//Switch 'rightBucket' and 'leftBucket' to move from left to right
moveSelectedOptions(selectedIDs, rightBucket, leftBucket, '--None--');
//Sort the resultant options in the left bucket
sortSelect(leftBucket);

The post Move List Collector Options appeared first on ServiceNow Guru.

• The popup window view that you see when you click the ‘Edit’ button from a related list at the bottom of a form.
• The interface used to display any ‘List collector’ service catalog variable

A question that comes up pretty often is “Can I customize the slushbucket to display more information about the items shown?”. The answer to this is ‘YES’ but it might not work exactly like you think it should. Currently, you only have control over the field values shown below the slushbucket when you click on any item to highlight it. The actual values shown in the slushbucket are determined by the ‘display’ field on the dictionary entry for the referenced table. Most people would like to display multiple columns worth of data for items within the slushbucket itself, but this is not possible yet.

Adding additional fields below the slushbucket is a very simple customization though. All you have to do is personalize the ‘sys_ref_list’ list view view for the table being displayed in the slushbucket.

So, if I was displaying a slushbucket with records from the ‘Group’ (‘sys_user_group’) table would need to personalize the ‘sys_ref_list’ list view for that table. There are a couple of ways you could do this, but the way I’ll show here ensures that your updates get captured correctly so they can be migrated to another instance if necessary.

For the ‘Group’ (‘sys_user_group’) table navigate to the following URL in your browser…

https://[YOUR_INSTANCE_URL]/sys_user_group_list.do?sysparm_view=sys_ref_list

This same convention can be used for any table in your system. Simply replace ‘sys_user_group’ with the table you want to personalize. Once you’re there, just right-click the list header and personalize the list.

Any columns you add to the personalized ‘sys_ref_list’ view for a given table will be displayed below any slushbucket for that table.

The post Customizing the Slushbucket appeared first on ServiceNow Guru.