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.
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
