Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.


All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Custom WorkItem Preview on hover

Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
edited February 20 in Community Uploads
The ability the get a quick glance of a workitem to see for example whether it's something I could act on or if the latest response from the end user is of any value without opening the workitem is something I think makes work easier and faster for the analyst.

Here is my custom solution where the analyst get a modal preview window with some quick info when hovering/mouseover on a workitem title in the grid.

Included is the ability to rename a service account to something else or disable all actionlog entries from a given service account.

Settings are at the top of the custom js file:
// Needed for both name change and ability to hide those entries
var serviceAccountName = "domain\workflow_svc";
// Hide all entries made from above service account, true/false
var hideServiceAccountEntries = false;
// Name to display instead of service account
var newServiceAccountName = "IT Service portal";

Tested with IE11, Chrome 55, Firefox 45 & Edge with portal 7.2.2016.1

I've attached the files needed in a zip archive. To install just drop the files in CustomSpace (merge custom.js if you have other stuff there already!)

EDIT: Please see updated version in a post below!


  • Leigh_KildayLeigh_Kilday Member Advanced IT Monkey ✭✭✭
    @Martin_Blomgren, you are amazing.
  • Brian_WiestBrian_Wiest Customer Ninja IT Monkey ✭✭✭✭
    How are any of us going to be able to pay you back. The awsome just keeps coming. I get the most positive feedback from your customizations. Thank you!
  • Leigh_KildayLeigh_Kilday Member Advanced IT Monkey ✭✭✭
    I have just implemented this in Test. This answers the question of "how do I know whether the user has updated the WI?", and with bonus style points.
  • Mark_WahlertMark_Wahlert Customer Advanced IT Monkey ✭✭✭
    Martin_Blomgren Nice work. I have a Feature Request for you :)

    If you could add all Activities and their status on that hover preview, or to start with those activities in progress, I will dedicate all my Likes to you!!

  • Tim_VottaTim_Votta Customer IT Monkey ✭
    Thank you a ton man.  When we moved over to SCSM/Cireson, we lost a feature similar to this from our old helpdesk.  This will make a bunch of technicians incredibly happy.
  • Tom_HendricksTom_Hendricks Customer Advanced IT Monkey ✭✭✭
    Thanks again, @Martin_Blomgren, and I like the addition, @Adam_Dzyacky!

    I am on my way to a meeting right now, but I was able to modify it to work on views as well, earlier.  (Most of my users look at custom views, and they don't have the same class applied to the title column of the grids). I will attempt to share that between meetings today.
  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    edited February 22
    Hi @Martin_Blomgren, checking this out in our test environment and loving it!! Curious to know, would it be possible to force the window to stay in position until the user clicks outside of the window instead of it closing as soon as you mouse off of the title? In addition, since some work items have a large amount of action log entries or long descriptions, is it possible to add a scroll bar to the right hand bar of the window to make it easy to actually interact with the window?

    This would be especially helpful for analysts that have smaller screens or for accessibility reasons need to use a lower resolution.

    Thanks again!
  • Magnus_Lundgren1Magnus_Lundgren1 Customer IT Monkey ✭
    This is just awsome!
    Would it be possible to do this for the calendar view?
    when you hover over an item in the calendar.
  • Tom_HendricksTom_Hendricks Customer Advanced IT Monkey ✭✭✭
    @Adam_Dzyacky: I loaded your update and noticed that it is affecting the alignment of the ID bubble because it removes one of @Martin_Blomgren's classes.  In the previewHTML text, replace:
    '<div class="'+ workItemColor + '">' +
    '<div class="modal-header ' + workItemColor + '">' +
    And then either comment out or remove the "!important"s from:
    addRule(".workitem-preview .modal-header .btn", {
    			"background-color": "#47a447 !important",
    			"border-color": "#398439 !important"
    That way, the original formatting is preserved but you can still make use of the ticket colors.
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    Most excellent. Thanks for righting me @Tom_Hendricks !
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    edited February 23
    If you've extended your Change Request and Manual Activity classes, it looks as though you can add this in order to get Support Group added into Martin_Blomgren's Preview Pane customization for said extensions:
    supportGroup = wi.SupportGroup.Name;
    into the areas for...

            // CHANGE REQUEST
            } else if (wi.ClassName == "System.WorkItem.ChangeRequest") {
                category = wi.Area.Name;
    supportGroup = wi.SupportGroup.Name;
                // get comments
                messages = GetEntryHtml(wi.AppliesToWorkItem);

            }  else if (wi.ClassName == "System.WorkItem.Activity.ManualActivity") {
    supportGroup = wi.SupportGroup.Name;
                // get notes
                if (wi.Notes) {
                    messages += '<ul class="chat"><p>' + wi.Notes + '</p></ul>';

  • Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
    edited March 1
    This is the kind of response I really like where everyone starts to extend and together trying to make a good custom solution even better!

    Agree with all modifications and suggestions and will, as soon as I have the time, try to upload a new version with both new and by others already added modifications.
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    edited March 23
    Open question to all here - has anyone else run into an issue where a mouse over renders fields off of the hover window? It goes without saying I'm still trying to understand the "shape" of this particular Work Item as it's the only one I've seen this issue on.

  • Leigh_KildayLeigh_Kilday Member Advanced IT Monkey ✭✭✭
    edited May 9
    @Martin_Blomgren, I've had a request to add the parent WI ID to the form. I'm not sure how to find the related object name and properties other than guessing. Would you, or anybody else with these wizard-like skills, please help me out?

    For info for others, I've added the Affected User's Business Phone property to the preview:

    ln 200:
    var affectedUserPh = wi.RequestedWorkItem ? wi.RequestedWorkItem.BusinessPhone : "-";

    ln 280:
    '<div class="row assigned-text"><small>' + localization.Phone + ':</small><br />' + affectedUserPh + '</div>'
  • Leigh_KildayLeigh_Kilday Member Advanced IT Monkey ✭✭✭
    Made a minor fix to the script.

    With the dev pane up, I had some RAs throw errors when there were no Reviewers or when it was a blank Reviewer.

    Replace the // REVIEW ACTIVITY section with this (excuse lack of tabs):

    } else if (wi.ClassName == "System.WorkItem.Activity.ReviewActivity") {
    if (wi.Reviewer != null) {
    for (i = 0; i < wi.Reviewer.length; i++) {
    if (wi.Reviewer[i].User != null) {
    assignedUser += wi.Reviewer[i].User.DisplayName;
    assignedUser += '<br>';
    // get notes
    if (wi.Notes) {
    messages += '<ul class="chat"><p>' + wi.Notes + '</p></ul>';
Sign In or Register to comment.