How to dynamically set the help text on Hover Over of the Users in Approval Related list in ServiceNow

[Vidya Lakshmi]

Hello Guys,

I have a requirement where, on Hover over of the Approver User in the Change Request Related list, A message has to be displayed based on the Title field stored in the User Record.

Each user has different roles they perform. The roles are stored in Title field of the User table.

Is there any way I can show the title on hover over of the Approver name.

[Paul38 · Accepted solution]

Hello,

One solution for this would be to use and onLoad script that gets the info for all the rows in the related list and for each entry add an element with the required value.

What I have done is to use a Script Include to build an array with the sys_id of each related record and the necessary info (the sys_ids are necessary to get the GlideList elements):

var getRelatedRows = Class.create();
getRelatedRows.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    getRowIds: function() {

        var parent = this.getParameter("parent").toString();
		var table = this.getParameter("table").toString();
        var rows = [];

        var related = new GlideRecord(table);
        related.addQuery("parent", parent);
        related.query();
        while (related.next()) {
			
			var obj = {};
			obj.sys_id = related.getUniqueValue().toString();
			obj.info = related.short_description.toString();
			
            rows.push(obj);
        }

		return JSON.stringify(rows);
		
    },

    type: 'getRelatedRows'
});

Then call the script include in the onLoad script and for each item in the array append a hidden div with the text value. Afterwards I have added event listeners to handle the mouse events. In order for this to work you must set the Isolate script value to false on the onLoad script since we are manipulating the DOM. 

function onLoad() {
    //Type appropriate comment here, and begin script below

    var ga = new GlideAjax("getRelatedRows");
    ga.addParam("sysparm_name", "getRowIds");
    ga.addParam("parent", g_form.getUniqueValue());
    ga.addParam("table", "vtb_task");
    ga.getXML(handleResponse);

    function handleResponse(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
		answer = answer.evalJSON();
// Make sure the related list is loaded before trying to append elements		
        setTimeout(function() {
            answer.forEach(function(item) {

// The name of the related list is build from the current table + the related table + the referencing field
// getCell() parameters: sys_id of the row, name of the column

                var element = GlideList2.getByName("u_onboarding_training.vtb_task.parent").getCell(item.sys_id, "number");

                var newDiv = document.createElement("div");
                var newContent = document.createTextNode(item.info);
                newDiv.appendChild(newContent);
				
                newDiv.style.display = "none";
                newDiv.style.position = "absolute";
                newDiv.style.top = "10%";
                newDiv.style.left = "50%";
                newDiv.style.height = "40px";
                newDiv.style.width = "150px";
				newDiv.style.zIndex = "1060";
				newDiv.style.padding = "3px;";
				newDiv.style.backgroundClip = "padding-box";
				newDiv.style.boxShadow = "0 5px 10px rgba(0, 0, 0, 0.2)";
                newDiv.style.backgroundColor = "#ffffff";
                newDiv.style.border = "1px solid #ccc;";
                newDiv.style.borderRadius = "3px";
                newDiv.style.textAlign = "center";
				
                newDiv.setAttribute("id", item.sys_id);			

                element.appendChild(newDiv);

                element.addEventListener("mouseover", function() {
                    document.getElementById(item.sys_id).style.display = "block";
                });

                element.addEventListener("mouseleave", function() {
                    document.getElementById(item.sys_id).style.display = "none";
                });

            });
        }, 5000);

    }


}

The result:

Let me know if this was helpful or if you have any other questions.

Regards,

Paul

[Vidya Lakshmi]

Hey Paul,

This worked like a charm! Kudos to you.

Thank you for the help.

[Vidya Lakshmi]

Hello Paul,

A small doubt, is there any function where on hover over of the cell, the text appears? Right now it works on the click of the required cell.

Though this method works really well, wanted to know if on hover over of the cell , is there any way where it will work?

[Paul38]

Hello Vidya,

A small correction to the script, I've added the below line right after defining the element variable, so that the new div would position itself relative to the parent (more info here😞

element.style.position = "relative";

As for the behavior, you can see from below that in my case it is working as expected, so would you kindly let me know on what browser did you test this and are the related list loading with the form, after or on-demand?

Thanks,

Paul