Hints on field labels - inserting line breaks

[Brian Broadhurs]

Hi,

does anybody know how to format a Hint associated with a field label? On an Incident form I want to display the Impact/Urgency/Priority matrix in the hint associated with the Impact and Urgency fields, but in order to do that I need to be able to insert line breaks.

Brian Broadhurst

[Mark Stanger]

I couldn't resist looking into this some more. I managed to find a CSS/javascript modification that I could modify to work with Service-now. You can try this out if you want. It allows you to put any html into the 'hint' field on the label table. This html gets rendered as a tooltip. This is definitely something that is being provided as-is and certainly isn't supported by Service-now. Any help you need with this will need to come from the forums or your own resources. It hasn't been tested extensively, but might serve as a good example of something you can do if you need to. You may find that it slows your form performance or simply isn't suitable. I already know that if you move the mouse around very quickly it can leave tooltips up. 🙂 I may continue to tweak this if I have time. Having said that, here's how you can implement it and try it out.

I've attached an image to this post so that you can see a sample of what you could do with this modification.

1) Navigate to 'System Definition', 'Upload File' and upload the following files (see attachments)
-nicetitle.txt (change the name of this to 'nicetitle.css' before you do anything else with it)
(you may want to modify this to point to whatever background image you are using --bluetooltip or greytooltip -- the image path should look like this... 'scs/bluetooltip.png')
-bluetooltip.png
-greytooltip.png

2) Navigate to 'System UI', 'UI scripts' and create a new UI script with the 'Global' checkbox checked and the following Script

addEvent(window, "load", makeNiceTitles);

var XHTMLNS = "http://www.w3.org/1999/xhtml";
var CURRENT_NICE_TITLE;
var browser = new Browser();
var delay;
var hideDelay;

function makeNiceTitles() {
loadcssfile();

if (!document.createElement || !document.getElementsByTagName) return;
// add namespace methods to HTML DOM; this makes the script work in both
// HTML and XML contexts.
if(!document.createElementNS){
document.createElementNS = function(ns,elt) {
return document.createElement(elt);
}
}

//Do processing for labels
var fieldLabels = document.getElementsByTagName("td");
for (var ti=0;ti<fieldLabels.length;ti++) {
var lnk = fieldLabels[ti];
if (lnk.title) {
lnk.setAttribute("nicetitle",lnk.title);
if(lnk.className == 'label_left'){
//Remove the title tag
lnk.removeAttribute("title");
}
//Check to see if the title is on an application label in the left nav
else if(lnk.parentNode.parentNode.parentNode.className == 'menutitle'){
//Remove the title tag
lnk.removeAttribute("title");
}
addEvent(lnk,"mouseover",showDelay);
addEvent(lnk,"mouseout",hideNiceTitle);
}
else if (lnk.getAttribute('type') == 'journal_input'){
if(lnk.className == 'label_left'){
//Remove the title tag
lnk.removeAttribute("title");
}
var parent = lnk.parentNode.parentNode.parentNode.parentNode;
if(parent.title){
lnk.setAttribute('nicetitle',parent.title);
parent.removeAttribute("title");
}
addEvent(lnk,"mouseover",showDelay);
addEvent(lnk,"mouseout",hideNiceTitle);
}
}

//Do processing for text within labels
var labels = document.getElementsByTagName("label");
if (labels) {
for (var ti=0;ti<labels.length;ti++) {
var label = labels[ti];
if (label.parentNode.title) {
label.setAttribute("nicetitle",label.parentNode.title);
label.removeAttribute("title");
label.parentNode.removeAttribute("title");
addEvent(label,"mouseover",showDelay);
addEvent(label,"mouseout",hideNiceTitle);
}
else if (label.parentNode.getAttribute('nicetitle')) {
//Do processing for long text fields
label.setAttribute("nicetitle",label.parentNode.getAttribute('nicetitle'));
addEvent(label,"mouseover",showDelay);
addEvent(label,"mouseout",hideNiceTitle);
}
}
}

//Do processing for list column headers
var cols = document.getElementsByClassName("column_head");
if (cols) {
for (var ti=0;ti<cols.length;ti++) {
var col = cols[ti];
if (col.title || col.parentNode.title) {
if(col.tagName == 'A'){
col.setAttribute("nicetitle",col.parentNode.title);
col.removeAttribute("title");
col.parentNode.removeAttribute("title");
}
else{
col.setAttribute("nicetitle",col.title);
}
addEvent(col,"mouseover",showDelay);
addEvent(col,"mouseout",hideNiceTitle);
}
}
}
}

function showDelay(e){
if (window.event &amp;&amp; window.event.srcElement){
lnk = window.event.srcElement;
}
else if (e &amp;&amp; e.target){
lnk = e.target;
}
if (!lnk) return;
delay = setTimeout("showNiceTitle(lnk)", 500);
}

function showNiceTitle(e) {
//clearTimeout(hideDelay);
if (CURRENT_NICE_TITLE) hideNiceTitle(CURRENT_NICE_TITLE);
if (!document.getElementsByTagName) return;
if (window.event &amp;&amp; window.event.srcElement){
lnk = window.event.srcElement;
}
else if (e &amp;&amp; e.target) {
lnk = e.target;
}
if (!lnk || !lnk.hasAttributes()) return;
if (lnk.getAttribute("nicetitle")){
var nicetitle = lnk.getAttribute("nicetitle");
var d = document.createElementNS(XHTMLNS,"div");
d.className = "nicetitle";
pat = document.createElementNS(XHTMLNS,"p");
pat.className = "titletext";
pat.innerHTML = nicetitle;
d.appendChild(pat);
if (lnk.href) {
tnd = document.createTextNode(lnk.href);
pad = document.createElementNS(XHTMLNS,"p");
pad.className = "destination";
pad.appendChild(tnd);
d.appendChild(pad);
}

// Determine tooltip width
var STD_WIDTH = 200;
var w = STD_WIDTH;

if (nicetitle.length > STD_WIDTH){
d.style.width = 'auto';
}
else {
d.style.width = w + 'px';
}

// Get mouse position and offsets
var mpos = findPosition(lnk);
var mx = mpos[0];
var my = mpos[1];
d.style.left = (mx+15) + 'px';
d.style.top = (my+30) + 'px';

document.getElementsByTagName("body")[0].appendChild(d);
CURRENT_NICE_TITLE = d;
//hideDelay = setTimeout("hideNiceTitle(lnk)",5000);
}
}

function hideNiceTitle(e) {
clearTimeout(delay);
if (!document.getElementsByTagName) return;
if (CURRENT_NICE_TITLE) {
document.getElementsByTagName("body")[0].removeChild(CURRENT_NICE_TITLE);
CURRENT_NICE_TITLE = null;
}
}

function findPosition( oLink ) {
if(oLink.tagName.toUpperCase() == 'LABEL'){
oLink = oLink.parentNode;
}
if( oLink.offsetParent ) {
for( var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent ) {
posX += oLink.offsetLeft;
posY += oLink.offsetTop;
}
return [ posX, posY ];
} else {
return [ oLink.x, oLink.y ];
}
}

// Add an eventListener to browsers that can do it.
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 &amp;&amp; el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}

function getMousePosition(event) {
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
return [x,y];
}

// Determine browser and version.
function Browser() {
// Detect browser version for mouse positioning
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

function loadcssfile(filename){
var newSS=document.createElement('link');
newSS.rel="stylesheet";
newSS.type="text/css";
newSS.href="scs/nicetitle.css";
document.getElementsByTagName("head")[0].appendChild(newSS);
document.onclick = function() {hideNiceTitle();}
}

3) You may choose to personalize the dictionary for the 'Hint' field on the 'Label' table and change the field type to 'html' and increase the character limit to 1000 or so for the field. This way you can use the WYSIWYG editor to modify your labels html code. I wouldn't do this unless you're positive that it's what you want to do though.

[CapaJC]

From what I've been able to find out, the browser sets the duration. Firefox only recently (3.5 or 3.6) made them last until you moved your mouse, before that they had a max of 5 seconds. IE is 5 seconds and not configurable.

[Brian Broadhurs]

This should help me to get around another issue I have come across. One of my clients wants to use a cut-down version of the Incident form for self-service users, and would like the hint to be different for ESS users than for ITIL users. I would also like to be able to modify the field label text, so if someone could tell me the attribute name for that, I would be grateful.

It would be nice if Service-now let you make the Label details dependent on the View, but at the moment it doesn't.

Brian Broadhurst

[john_roberts]

If you use a record producer you can call set the labels of variables to whatever you want ESS users to see. Just set the variable names to match the field name and the values will automatically be passed to the new incident.

[Brian Broadhurs]

Thanks John. Using a record producer was one of my options, and I have used them many times - including for the same client in other parts of their customer portal - but there were reasons why we decided to go for an ESS view of the Incident form in this instance.