Let's say there is a need to show a list of groups (on Service Portal) in which the selected user (via Reference Variable) is either a member or manager. The records in that list should be clickable and they should redirect to a group record in a new tab.
Result
Below image is showing all groups in which Abel Tuter is either a member or a manager.
Scrolled down a bit to show other groups.
Below image is showing that Aileen Mottern is neither a member nor a manager of any group.
Below image is showing when no user is selected then the custom variable is not visible.
Result Verification
Groups of Abel Tuter
Below image is showing that Abel Tuter is member of 5 groups
Below image is showing that Abel Tuter is manager of 17 groups.
Groups of Aileen Mottern
Below image is showing that Aileen Mottern is not a member of any group.
Below image is showing that Aileen Mottern is not a manager of any group.
Implementation
- Create a custom widget with below details.
Body HTML template
<div>
<table>
<caption>{{data.caption}}</caption>
<tr>
<th>Member</th>
<th>Manager</th>
</tr>
<tr ng-if="!data.indexArray.length">
<td>
N/A
</td>
<td>
N/A
</td>
</tr>
<tr ng-repeat="item in data.indexArray">
<td>
<a ng-href="{{data.groupMember[item].url}}" target="_blank">
{{data.groupMember[item].name}}
</a>
</td>
<td>
<a ng-href="{{data.groupManager[item].url}}" target="_blank">
{{data.groupManager[item].name}}
</a>
</td>
</tr>
</table>
</div>
CSS
div {
height: 47rem;
overflow: auto;
}
table {
font-family: sans-serif;
border-collapse: separate;
width: 100%;
}
td {
width: 50%;
}
tr, td {
border: .1rem solid #293e40;
text-align: center;
padding: 1rem;
font-weight: bold;
font-size: medium;
}
caption {
text-align: center;
position: sticky;
top: 0;
background: #293e40;
color: white;
font-weight: 900;
font-size: xx-large;
}
th {
border: .1rem solid #293e40;
text-align: center;
position: sticky;
top: 6.2rem;
background: #5A7F71;
font-size: x-large;
font-weight: 900;
color: black;
}
tr:nth-child(even) {
background-color: #ddd;
}
tr:hover {
background-color: #cde7da;
}
Server Script
(function() {
// To store the caption of html table.
data.caption = "Groups of";
// To store value of User variable.
data.user = '';
// To store groups in which selected user is member.
data.groupMember = [];
// To store groups in which selected user is Manager.
data.groupManager = [];
// To set the caption of html table.
var grUser = new GlideRecord('sys_user');
if (grUser.get(input.user)) {
data.caption = data.caption + ' ' + grUser.getDisplayValue();
}
// To query Groups[sys_user_group] table and set the "data.groupMember" or "data.groupManager" array.
function getGroups(query) {
var grGrp = new GlideRecord('sys_user_group');
grGrp.addEncodedQuery(query);
grGrp.orderBy('name');
grGrp.query();
if (query.indexOf('manager=') > -1) {
updateManager(grGrp);
} else {
updateMember(grGrp);
}
}
// To set the "data.groupManager" array.
function updateManager(grGrp) {
while (grGrp.next()) {
group = {};
group.name = grGrp.getValue('name');
group.url = 'https://' + gs.getProperty('instance_name') + '.service-now.com/sys_user_group.do?sys_id=' + grGrp.getValue('sys_id');
data.groupManager.push(group);
}
}
// To set the "data.groupMember" array.
function updateMember(grGrp) {
while (grGrp.next()) {
group = {};
group.name = grGrp.getValue('name');
group.url = 'https://' + gs.getProperty('instance_name') + '.service-now.com/sys_user_group.do?sys_id=' + grGrp.getValue('sys_id');
data.groupMember.push(group);
}
}
if (input.user) {
// Query for groups in which selected user is member.
getGroups('sys_idIN' + gs.getUser().getUserByID(input.user).getMyGroups().toArray().join());
// Query for groups in which selected user is manager.
getGroups('manager=' + input.user);
}
// To append the empty elements when the length of "data.groupManager" and "data.groupMember" arrays are different.
// So that both arrays have same length which is then utilized in html table.
function setEqualArrayLength() {
var memberLength = data.groupMember.length;
var managerLength = data.groupManager.length;
if (memberLength > managerLength) {
for (var i = managerLength; i < memberLength; i++) {
data.groupManager.push('');
}
} else if (managerLength > memberLength) {
for (var j = memberLength; j < managerLength; j++) {
data.groupMember.push('');
}
}
// Creating an array of numbers/indexes which will be used in html table.
data.indexArray = [];
for (var k = 0; k < managerLength; k++) {
data.indexArray.push(k);
}
}
setEqualArrayLength();
})();
Client Script
api.controller = function($scope) {
var c = this;
$scope.$watch(function() {
return $scope.page.g_form.getValue('user');
}, function(newValue, oldValue) {
// To validate that newValue and oldValue are not same.
if (newValue != oldValue) {
c.data.user = newValue;
c.server.update();
}});
};
- Create a catalog item with 2 variables of Type Reference and Custom.
1st variable (Type = Reference) referencing User [sys_user] table.
2nd variable (Type = Custom) containing custom widget created above.
- Create a UI Policy to Show/Hide Custom/Widget variable based on User Variable.
Interested in reading my other articles, go through the below link.
Useful Implementation for Service Portal and Native UI
Always open to learn new things.
Happy Learning
