This is the widget "My Request" on Service Portal.
I want to display group name that person who opened Incident belong to next to the name. (The place I want to display is red square below.)
If the person belong to multiple groups, I'd like to display all group names.
How should I make it?
So looking at the HTML that is rendered through the following after angularjs runs:
<small class="text-muted">
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >INC0010019</span>
</div>
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >1 - High</span>
</div>
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >Avano Ishida</span>
</div>
<div>
<span>My Group Name</span>
</div>
</small>
What you are wanting to do is get the last two divs to be side by side rather than one above the other. There are a few ways to deal with that but I will show you a CSS only one.
// Added this class to the small html element. "<small class="text-muted secondary-wrapper">"
.secondary-wrapper {
// Use flexbox to order the elements to make it easiet to align the items
display: flex;
// Allows the elements to wrap to a new line
flex-wrap: wrap;
// Most elements should be max width so there is one on each line
div {
width: 100%;
}
// Second last and last element should share a line
div:nth-last-child(2), div:last-child {
width: unset;
}
// Add some distance between the second last and last element
div:last-child {
margin-left: 1em;
}
}
The result looks like:
Note that this will always make the second last and last lines in the small element share a line.
You will need to do two things:
- Get the group data from the server
- Display it in the HTML
Getting the group data
You can add the following script to get all the given users groups. They you just need to all the function later in the script.
function GetGroupsForUser(user) {
var gr = new GlideRecord('sys_user_grmember');
gr.addQuery('user', user);
gr.query();
var res = [];
while (gr.next()) {
res.push(gr.getDisplayValue('group'));
}
return res;
}
// Just before the record is pushed to the req_list
record.groups = GetGroupsForUser(gr.getValue('opened_by'));
HTML Template
You can then replace the secondary display code with the following:
<small class="text-muted">
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >{{::f.display_value}}</span>
</div>
<!-- New code is below -->
<div>
<span>{{::item.groups.join(',')}}</span>
</div>
<!-- End new code -->
</small>
That will make it now look like:
Then you can just change the CSS a bit to put it inline as you display in your image.
Please mark as correct if this solves your question.
