“Alone we can do so little; together we can do so much.”
— Helen Keller
Last time, we tinkered with the Scripted Value Columns section of the SNH Data Table Widgets, and created an example Task list using an aggregation of labor hours as a demonstration of how you can include HTML with your returned value. Today we will have a look at another scripted column in that example, the Customer column.
There are quite a number of extensions to the core Task table in ServiceNow, all of which share the same core list of fields. One of those fields is called opened_by, and identifies the person who was signed on to the system when the task was initially opened. That person is not necessarily the customer, though. In the case of an Incident, for example, that is more likely to be a call center agent who took the call, not the person who is reporting the issue. There is no core table field to represent the customer. Each extension of the Task table has its own way of identifying the person awaiting the completion of the task. Using the scripted value column feature, though, you can create a “customer” column by looking at the type of task, and then grabbing the value of the field that is appropriate for that particular type.
getScriptedValue: function(item, config) {
var response = '';
var table = item.sys_class_name.value;
var field = 'opened_by';
if (table == 'incident') {
field = 'caller_id';
} else if (table == 'sc_request') {
field = 'requested_for';
} else if (table == 'sc_req_item') {
field = 'request.requested_for';
} else if (table == 'sc_task') {
field = 'request_item.request.requested_for';
} else if (table == 'change_request') {
field = 'requested_by';
}
var taskGR = new GlideRecord(table);
if (taskGR.get(item.sys_id)) {
if (taskGR.getValue(field) > '') {
response = taskGR.getDisplayValue(field);
}
}
return response;
}
This particular example handles incidents, catalog activity, and change requests, but could easily be modified to handle any number of other types of extensions to the core task table. This just returns the value, though. If you wanted to make the field a link to the user profile page, for example, you could do something like this.
getScriptedValue: function(item, config) {
var response = '';
var table = item.sys_class_name.value;
var field = 'opened_by';
if (table == 'incident') {
field = 'caller_id';
} else if (table == 'sc_request') {
field = 'requested_for';
} else if (table == 'sc_req_item') {
field = 'request.requested_for';
} else if (table == 'sc_task') {
field = 'request_item.request.requested_for';
} else if (table == 'change_request') {
field = 'requested_by';
}
var taskGR = new GlideRecord(table);
if (taskGR.get(item.sys_id)) {
if (taskGR.getValue(field) > '') {
var sysId = taskGR.getValue(field);
var name = taskGR.getDisplayValue(field);
response += '<a href="?id=user_profile&table=sys_user&sys_id=';
response += sysId;
response += '" aria-label="${Click for more on }';
response += name;
response += '">';
response += name;
response += '</a>\n';
}
}
return response;
}
That would provide an output such as this.
The one thing that the Customer column does not have that the Assigned to column, which is a standard SNH Data Table user reference, does have is the user avatar image. That’s easily done with the sn-avatar tag, but that tag is not simple HTML, and not processed using the ng-bind-html attribute. Theoretically, it can be processed using the sc-bind-html-compile attribute, but I have never had any luck in utilizing this component. I tried it, and couldn’t get it to work, so I gave up and went back to using the ng-bind-html attribute. So, there is no user avatar in this version. Maybe one day I will figure that out, but that day is not today.
Speaking of figuring things out one day, I still have not been able to get rid of that extra line that appears when there is an image available for the avatar. If you look at the example above, the lines with an avatar image are wider than the lines where that field is blank, or the initials are used in place of an image. This because there is an extra carriage return in there that expands the height of the line. Only when there is an actual image does this occur, but it shouldn’t occur at all. If there is some grand master CSS wizard out there who understands why this is happening and can explain it to me, or better yet, tell me what I can do to prevent it, I would be forever in your debt. I have not been able to figure that one out.
One other thing that you may have noticed in that image is that I got rid of the 0.00 value for tasks that had no hours charged to them. I like that better, and that was a pretty simple thing to do. I still want to have some kind of mouse-over display of who logged the hours, so maybe we will take a look at that next time out.
