The Solution…

There’s no way to get at the back-end code that controls the gear menu popup so our only option is to manipulate the UI using client scripting. Since this is a global issue independent of any specific table or form, we can use a UI script to target the Update Set picker element and move it to a different location on the page. The following script does just that, just make sure to remember to check the ‘Global’ checkbox on the UI script record. Enjoy!

addLoadEvent(moveUpdateSetPicker);function moveUpdateSetPicker(){
try{
//Only run if UI14
if($('navpage_header_control_button')){
//Fix Fuji styling
$('update_set_picker_select').className = '';
if($('update_set_picker').select('li')[0]){
$('update_set_picker').select('ul')[0].style.marginBottom = "0px";
$('update_set_picker').select('li')[0].className = '';
$('update_set_picker').select('li')[0].style.paddingRight="5px";
$('update_set_picker').select('li')[0].style.listStyleType ="none";
$('update_set_picker').select('li')[0].select('a')[0].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[0].style.border ="none";
$('update_set_picker').select('li')[0].select('a')[1].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[1].style.border ="none";
$('update_set_picker').select('li')[0].select('a')[2].style.color ="#FFF";
$('update_set_picker').select('li')[0].select('a')[2].style.border ="none";
$('update_set_picker_select').style.color ="#000";$$('.btn-icon').each(function(d){
d.style.lineHeight = 'inherit';
});
}
if($('update_set_picker').select('legend')[0]){
$('update_set_picker').select('legend')[0].remove();
}
//Move the update set picker from under the gear icon to the header
$('nav_header_stripe_decorations').insert({
top: $('update_set_picker')
});
//Make sure that UI14 doesn't change styling
$('update_set_picker').id = 'update_set_picker_new';
}
}catch(e){}
}

Moving the Home icon…

I’ve had a few people ask about moving the home icon back as well. This one is a bit more difficult because of the lack of a decent ID to target, not to mention the old-style icon. In this case, I think it’s probably easier just to create a new icon in the header. The following code could be placed inside of the ‘if’ statement in the update set picker code above to also add a ‘home’ icon in the header.

//Create a home icon in the header
$('navpage_header_control_button').insert({
before: '<button id="navpage_header_home_button" class="nav_header_button icon-home" style="display: inline; visibility: visible;" title="Home" aria-label="Home"></button>'
});

The post Bringing the Update Set Picker back from the UI14 Gear Menu appeared first on ServiceNow Guru.

There’s another use for UI notifications. In addition to refreshing the left navigator, the object can also be used to display informational messages. You’ve probably already seen these in your own instance. When you change update sets, the system reminds you by using a UI Notification similar to the one shown below:

If you’re like me, you may have wondered how these notifications are created. Displaying a custom UI notification is slightly more complex than using the addInfoMessage() method provided by the GlideSystem (server) and GlideForm (client) classes. In return, it gives you some capabilities that aren’t otherwise available. These include options to set fade-in and fade-out effects and the ability to make the notification persistent or to close it after a user-specified interval. If you want to learn more about the various types of notifications available in ServiceNow, check out our UI Info and Error Message Cheat Sheet.

The example below uses the UINotification object to display a list of all fields that have been changed on an incident. I’d like to take credit for this solution, but it was actually my colleague Jim Coyne who did the heavy lifting. I’m most especially indebted to him for compiling the all-important list of option properties that determine how the notification behaves.

Creating The Notification

To create the UI Notification and its options, use a global UI Script:

//Ensure that the CustomEvent object exists
var intervalTest = setInterval(function(){
   if(typeof CustomEvent != 'undefined'){
      clearInterval(intervalTest);
      setCustomEvents();
   }
},500);

//Add the UI Notification to the DOM using the CustomEvent object
function setCustomEvents(){
   //Set the name of the notification
   var notifName = "demo_notification";
   CustomEvent.observe('glide:ui_notification.' + notifName,
   function(notification){
      var msgText = notification.getAttribute('text1'); //get the message text from the attribute passed in by the business rule
      var options = {}; //create a new object to store all of the message attributes.
      options.text = "<span style='color:red;'>" + msgText + "</span>";
      options.sticky = true;
      options.closeDelay = 5000;
      options.fadeIn = 500;
      options.fadeOut = 500;
      new NotificationMessage(options); //display the UI Notification
   });
}

The CustomEvent object takes two arguments:

1. The ‘glide:ui_notification.‘ object. This object includes a mandatory property that defines its name. In our example we’ve used a variable to store the name, but it could also be added to the object as an explicit value. In that case, it would be written ‘glide:ui_notification.demo_notification’ (including the quotes).
2. A function that defines the notification’s contents and display options. The display options determine how the notification will behave. The options should be defined as properties in their own options object within the function. Available options properties include:
   text: Required. The text of the message. You can include rich text formatting via standard HTML tags.
   sticky: Optional. If true, the notification persists until the user closes it by clicking the [x] icon. If false or omitted, the notification automatically closes after the specified closeDelay.
   closeDelay: Optional. Automatically closes the message after this number of milliseconds. If omitted, the message closes after about three seconds. If the sticky property is true, this option is ignored.
   fadeIn: Optional: Sets the fade-in time for the notification in milliseconds
   fadeOut: Optional: Sets the fade-out time for the notification in milliseconds if the sticky property is false/omitted. If the sticky property is true, this option is ignored.

The function uses the getAttribute() method to retrieve the information passed in from the server-side script which triggers the notification. If multiple attributes have been set in the server-side script, the UI Script will need additional getAttribute() method calls to retrieve each one.

Displaying the Notification

To display the notification, we simply instantiate, (create a new instance of) the UINotification object in a Business Rule (it may work in other server-side scripts but I haven’t tested that). For our example we’ll use a business rule that runs after the incident has been updated. Our script borrows code from a previous post about checking for modified fields on forms or records.

//First, get an ArrayList of all fields changed on the record
if (typeof GlideScriptRecordUtil != 'undefined') {
   var gru = GlideScriptRecordUtil.get(current);
} else {
   var gru = Packages.com.glide.script.GlideRecordUtil.get(current);
}

var changedFields = gru.getChangedFields(); //Get changed fields with friendly names

//Next, pass the values into the UI Notification we defined in the UI Script
var notification;
if(typeof UINotification != 'undefined') {
   notification = new UINotification('demo_notification'); //Calgary and later releases use the UINotification object call
} else {
   notification = new Packages.com.glide.ui.UINotification('demo_notification'); //For pre-Calgary releases, use the Java Package call
}

//create the message to be displayed
var messageText = gs.getUser().getDisplayName();
messageText += ' modified the following fields on : ';
messageText += current.number;

/*
Assign the message text to the 'text1' attribute. Additional attributes can be passed into the UI notification. Just be sure each one is accounted for in the UI Script via getAttribute() method calls.
*/
notification.setAttribute('text1', messageText + changedFields);
notification.send();

The key items in the business rule’s script are:

• The new UINotification object call that specifies the object we defined in the UI Script (‘demo_notification’)
• The setAttribute() method that passes specific information into the notification
• The send() method that triggers the actual display of the notification.

To see the notification, open any Incident and modify one or more fields, then Save or Update it.

Once the UI Script is defined, it can be reused as many times as needed. Just call it from any business rule and pass information to it using the setAttribute() method.

The post Display Messages With UI Notifications appeared first on ServiceNow Guru.

Navigation Frame

The navigation frame can be hidden, shown, or toggled using the following functions…

//Hide the left nav
hideNav();

//Show the left nav
showNav();

//Toggle the left nav
toggleNav();

Here’s an example global UI script that you could use to hide the left nav from end-users

addLoadEvent(hideLeftNav);function hideLeftNav(){
try{
//If the user has no roles
if(!g_user.hasRoles()){
//Hide the left nav
hideNav();
//Hide the toggle image (optional)
//$('navToggleImage').hide();
}
}catch(e){}
}

Header/Banner Frame

The banner doesn’t have as many functions available to it, but you can still toggle the banner like this…

//Toggle the header/banner
toggleBanner();

The post Collapse Navigation and Header Frames via Script appeared first on ServiceNow Guru.

Here’s a quick tip for a Monday. This post comes in response to a question on the ServiceNow forums asking if it is possible to change the label of a field dynamically based on some record criteria (such as record type). It is possible, and this post will show you how it can be done.


First, you should know that you can right-click any field and personalize the label for that field. For extended tables (such as incident) you can override the label for a higher-level table (such as task) just by changing the table name on the label record and doing an ‘Insert’ rather than a save. The question that I’ll address in this post is different than both of those scenarios though. What if you have a label that you want to change based on the user viewing the record? What if you need to change the label based on some criteria unique to that table (such as change type or incident priority)? In that case, you can’t simply modify the label record because you’ve got a narrower scope within that table that you need to work with.

The answer is client scripting. With a client script you can target any field on the form and modify its label. I’ve created a ‘changeFieldLabel’ function for this purpose. The function takes 4 possible parameters to allow for changing of the label text, color, and font weight.

Here’s an example that you could use in an ‘onLoad’ client script to change the ‘Description’ field label on a Change request form…

function onLoad() {
//Change the description label to 'My New Label' with bold red text
changeFieldLabel('description', 'My New Label', 'red', 'bold');
}

function changeFieldLabel(field, label, color, weight){
try{
var labelElement = $('label.' + g_form.getControl(field).id);
labelElement.select('.label-text').each(function(elmt) {
elmt.innerHTML = label + ':';
if(color)
elmt.style.color = color;
if(weight)
elmt.style.fontWeight = weight;
});
}catch(e){};
}

Of course, this is much more accessible if you include it in a global UI script. If you’re going to use this a lot I recommend setting up a global UI script with the following function…

function changeFieldLabel(field, label, color, weight){
try{
var labelElement = $('label.' + g_form.getControl(field).id);
labelElement.select('.label-text').each(function(elmt) {
elmt.innerHTML = label + ':';
if(color)
elmt.style.color = color;
if(weight)
elmt.style.fontWeight = weight;
});
}catch(e){};
}

Then you can invoke the function from any form with a single line.

If I wanted to change the label of the ‘description’ field to ‘My New Label’ I could do it like this…

changeFieldLabel('description', 'My New Label');

If I wanted to change the label to a bold green color I could do it like this…

changeFieldLabel('description', 'My New Label', 'green', 'bold');

Changing the label of a catalog variable

The principles described above can also be applied to catalog variables using catalog client scripts. The primary difference is in the way the elements need to be selected from the DOM. Here’s an example script…

function onLoad() {
//Change the description label to 'My New Label' with bold red text
changeFieldLabel('description', 'My New Label', 'red', 'bold');
}

function changeFieldLabel(field, label, color, weight){
try{
var labelElement = $('label_' + g_form.getControl(field).id);
labelElement.select('.sn-tooltip-basic').each(function(elmt) {
elmt.innerHTML = label;
if(color)
elmt.style.color = color;
if(weight)
elmt.style.fontWeight = weight;
});
}catch(e){};
}

The post Modifying the Label of Form Fields With Client Scripts appeared first on ServiceNow Guru.

This customization obviously isn’t for everybody, but I think it does demonstrate a good use of UI scripts. The script below needs to be set up as a Global UI script so that it will run throughout the user session. Within the script I check to see if the navigation pane is being loaded or not so we can cut down on a lot of the unnecessary code when the main frame is loading content. If the script finds the navigation pane it attaches an event to each menu item. This event is triggered when the item is clicked and it adds the highlight color to that item. In addition, it removes the highlight color from the previously-selected menu item.

You can change the highlight color by modifying the ‘lightskyblue’ text below to whatever color you want!

var lastAppLinkColor;
var menuCheckCount = 0;

addLoadEvent( function() {
   //Attach an event to the click of any nav menu item
   var menuCheckInterval = setInterval(function(){checkMenu()},1000);
   function checkMenu(){
      try{
         if(window.frames[1]){
            var menuItems = window.frames[1].document.getElementsByTagName('a');
            if (menuItems.length != 0 || menuCheckCount > 10) {
               clearInterval(menuCheckInterval);
               setHighlight(menuItems);
            }
            else{
               menuCheckCount++;
            }
         }
      }catch(e){}
   }
   function setHighlight(menuItems){
      for (i=0; i < menuItems.length; i++) {
         if(menuItems[i].className == 'menu'){
            Event.observe(menuItems[i], 'click', function(event) {
               //Remove the highlight from the previously-highlighted menu item
               if (lastAppLinkColor) {
                  lastAppLinkColor.style.backgroundColor = "";
               }
               //Get the parent table row of the link clicked
               var elt = Event.findElement(event, 'div'); //If UI11 target 'tr' instead of 'div'
               if (elt != document) {
                  //Add the highlight color
                  $(elt).style.backgroundColor = "lightskyblue";
                  lastAppLinkColor = elt;
               }
            });
         }
      }
   }
});

The post Highlight Selected Navigation Module appeared first on ServiceNow Guru.

The simplest way to add this functionality is to create a clickable image that will end the user impersonation and add it to the page header. The challenge is to do this without hacking the out-of-box UI macro and breaking upgrades to the impersonate functionality in the future. Fortunately this can all be accomplished with the creation of a global UI script! Here’s how you can set it up.

addLoadEvent(addUnimpersonateButton);

function addUnimpersonateButton(){
	try{
		//Show un-impersonate icon if a user is being impersonated
		if($('impersonating_toggle_id').value != ''){
			//Insert the clickable icon in the dom
			$('impersonate_span').insert(
				'<span id="unimpersonate_span" class="icon-power" style="padding-left:5px; cursor:pointer;cursor:hand; font-size: 20px; visibility: visible" title="End impersonation" onclick="unimpersonateMe();" />'
			);
		}
	}catch(e){}
}

function unimpersonateMe(){
	//Return the user to their original session
	top.location.href = 'ui_page_process.do?sys_id=b071b5dc0a0a0a7900846d21db8e4db6&sys_user='+ $('impersonating_toggle_id').value;
}

The post Single Click Impersonation Return appeared first on ServiceNow Guru.

Here’s a screenshot showing the problem we’re trying to solve. We’ve got a nice published report that we would like to add a logo to…

The first option is to make use of the built-in navigation frames in Service-now

When you publish a report, the system shows you a URL like this…

https://demo.service-now.com/sys_report_display.do?sysparm_report_id=a19bd425c611227b00232a5dc90c99a2

A simple change to the URL (the addition of ‘nav_to.do?uri=’) adds navigation frames (and your instance logo) to the report.

https://demo.service-now.com/nav_to.do?uri=sys_report_display.do?sysparm_report_id=a19bd425c611227b00232a5dc90c99a2

By modifying the URL to include the navigation frames you can display your report like this…

The only problems with this method are that you can’t really control how that URL gets generated so you can’t always ensure that users will know about this trick, and the navigation frames won’t be included in the printable version so your logo will only be available when viewed in a browser.

The other option is a simple UI script to manipulate the report page itself

Usually when you’re dealing with non-standard forms in Service-now (like the report view page) the code can be found in a UI page or UI macro. In the case of the report pages however, the code is actually stored in back-end XML files. This makes it a bit harder to manipulate. I’ve written previously about a functionality I created to limit the reportable tables in Service-now. The technique I used to accomplish that modification is the same technique I’ll use here. It involves the creation of a global UI script that identifies when it is running on the report page and manipulates the page accordingly.

Here are the settings for the UI script you’ll need to create…

addLoadEvent(addPublicReportHeader);

function addPublicReportHeader(){
   if($('partialPage:theReport') && !$('reportform_control')){
      $('partialPage:theReport').insert({
         top: '<img src="http://www.sncguru.com/logo.png" class="chart"></img>'
      });
   }
}

The global UI script uses a couple of dom elements to identify whether or not it is running on the public report page. If it is, it simply adds the logo image. You can customize the ‘sncguru’ portion of the script to add the logo of your choosing. When you’re done, all of your public reports will display your logo at the top of the page like this…

The post Adding a Logo to Public Report Pages appeared first on ServiceNow Guru.

scripts in Service-now are one of those things that can be very useful but aren’t very well known.  They allow you to do a lot of client-side javascript manipulation of places in the form that you might not otherwise be able to get to.  One good example of this is setting the browser window title dynamically based off of the content of records being displayed.

You might just prefer to look at a different title every now and then :).  In my client’s case, they wanted to change the window title dynamically when they opened up a task ticket. They wanted to show the Number and Short description of the task being displayed. Otherwise, they wanted to show the default title. We accomplished this with the addition of a simple global UI script as outlined in the steps below…

1Navigate to ‘System UI -> UI scripts’ and create a new UI script

2Name the script ‘DynamicWindowTitle’ and check the ‘Global’ checkbox

3Use the following script in your UI script

addLoadEvent(setTitle);
function setTitle(){
try{
var num = g_form.getValue('number');
var sd = g_form.getValue('short_description');
var nme = g_form.getValue('name');

//Check if viewing a KB article
if($('kb_view')){
num = $('permalink').href.split('sysparm_article=')[1];
sd = $$('.kb_article_header_short_description')[0].innerHTML;
}
}catch(e){
//alert('Error getting title info.');
}
if(num && sd){
top.document.title = num + ' - ' + sd;
}
else if(nme){
top.document.title = nme;
}
else{
top.document.title='Service-now.com - IT Service Management Suite';
}
}

The post Dynamic browser window title script appeared first on ServiceNow Guru.