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



  • Wendy_CraigWendy_Craig Customer IT Monkey ✭
    Is there an easy way to change the focal point for the hover? We have some analysts who love this feature, but others who feel they activate it inadvertently too frequently. Can the hover be set to a smaller column, like maybe the icon instead of the title?
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @Wendy_Craig, you can change which column you want to target by changing the code on line 74

    var indexTitle = $('thead > tr th[data-field=Title]').last().index();

    var indexTitle = $('thead > tr th[data-field=Icon]').last().index();

    assuming you are using the latest version I recently uploaded.

    Another way to solve it would be to introduce a new icon as @Tom_Hendricks did:

  • Wendy_CraigWendy_Craig Customer IT Monkey ✭
    That's perfect, thank you!
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    I've found an issue that I'm having trouble defining that looks as though exists throughout all versions of this...but to be clear, really unique/environmental in that I have a single PR record that I'm hovering over (the rest seem to work) but this one in particular can't generate the preview window. It isn't clear to me how the shape of this PR is different than other PRs.

    I set a breakpoint on 618 for the escapeHTML function and sure enough the "unsafe_str" variable passed in is null. This said, it isn't clear to me why this is even engaging in the first place and no less before Martin's function of GetEntryHTML.

  • Kristoffer_StormarkKristoffer_Stormark Customer IT Monkey ✭
    Hi @Wendy_Craig

    We have it working nicely with the eye icon 

    In the v03. this code block will make it happen 

    function AddEventHandlers() {
            var timer;
            var indexTitle = $('thead > tr th[data-field=Titel]').last().index();
    	$('thead > tr > th').each(function (index) {
    	var link = $(this).find('a').next('a');
    	if (link.text().toUpperCase() === "ID") {
    		// add preview icon
    		$('tbody > tr').each(function (index2) {
    			var userDetailElem = $(this).children('td').eq(index);
    			if (userDetailElem.text() !== '') {
    				userDetailElem.append('<a class="pull-right wiPreview" title=""><span class="fa fa-eye"></span></a>');
    		return false;
            $('tbody > tr').each(function(index, item) {	
                // on mouseover
                $('a.wiPreview', item).eq(indexTitle).on({
    mousemove: function(e) {
                            left: e.pageX + 30
    Aprox from line 74

  • Wendy_CraigWendy_Craig Customer IT Monkey ✭
    Thank you! So far, Martin's code (adjusted to hover on the icon) is working great for us in our Dev environment, but I'll need to get analyst feedback once we move it to Prod. It's always a constant battle between what some people like and others don't.
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @Adam_Dzyacky, there is one property missing in your PR which is is being handled (trying to escape with cireson global function) in the custom script and the only property being escaped is 'Description' of the WI.

    Could you please check if the 'Description' property returned from the '/api/V3/Projection/GetProjection?id=PRxxx&typeProjectionId=AA6D17AC-0ED8-5D86-D862-CFF4CD8792FA' api call is null or an empty string in your browser dev tools?
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    edited August 2017
    Yup - the projection def pulls the PR record and Description has a (string) value. Although I did just discover the Action Log has two comments that are null.
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    So we need to add a conditional test to see whether a comment is null or not before trying to add/escape it!
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    edited August 2017
    I actually just started heading down that path/blowing away these two bizarre log entries out of this PR. Not sure what inserted them (portal, outlook, console, stock exchange connector)
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    Or perhaps a SMLets based connector ;)

    Never the less there should be a failsafe that checks whether a comment is null.
  • Ralph_PalmerRalph_Palmer Customer IT Monkey ✭

    I have just tried v3 in our development environment and I get the following error, in the Chrome console log, when I hover on a work item

    GET http://s16-vm-app-t124/api/V3/Projection/GetProjection?id=R2014145 404 (Not Found)

    The details from the license settings screen are as follows

    Current Portal Version: 7.3.2012.1

    Management Pack Version: 7.7.2012.185

    Chrome Version 60.0.3112.90 (Official Build) (64-bit)

    Does this only work on SCSM 2016 ?
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Some of my users absolutely love this feature (I include myself in that group!) but I have another contingent of users who felt that it got in their way too much.

    I solved this by creating an icon in the ID column (pretty much stolen from @Martin_Blomgren's grid actions) and changing the behavior of the preview to show and hide when the icon is hovered over instead of the column(s).  Same idea, smaller target.


    Some quick (pseudo-) code, which would be placed at the top of AddEventHandlers():
    Adding the icon:
    //find column index with work Item ID
    $('thead > tr > th').each(function (index) {
    	var link = $(this).find('a').next('a');
    	if (link.text().toUpperCase() === "ID") {
    		// add preview icon
    		$('tbody > tr').each(function (index2) {
    			var userDetailElem = $(this).children('td').eq(index);
    			if (userDetailElem.text() !== '') {
    				userDetailElem.append('<a class="pull-right wiPreview" title="Work Item Preview\n(hover here for ticket details)"><span class="fa fa-eye"></span></a>');
    		return false;
    In case anyone is using this modification, I wanted to share an update that seems to have become necessary with portal 8.0/8.1.  Whenever a TH or TD element is targeted, it is important to make sure that you are not casting too wide of a net, because the code can start dropping these into calendar controls too!  In my example above, change:

    $('thead > tr > th').each(function (index) {


    $('div.k-grid:not(.k-widget.k-calendar) thead > tr > th').each(function (index) {

    This ensures that it is only added to grids that are not part of kendo calendar controls.  It is entirely possible that further refinements will be needed here, but this seems to have done the trick.  I also invite feedback if there is a more elegant way of accomplishing this, of course.
  • Ralph_PalmerRalph_Palmer Customer IT Monkey ✭
    @Martin_Blomgren not sure if you had seen my post of 11th August, would like to make some progress, if that is possible on the environment mentioned in the post.
  • Alex_AlhorantaAlex_Alhoranta Customer IT Monkey ✭
    I finally found the problem why this did not work with me (with some help).
    The problem was here:

     var workItemId = idElem.text();
                            var projectionTypeId;
                            if (workItemId.indexOf("IR") >= 0) {
                                projectionTypeId = "2d460edd-d5db-bc8c-5be7-45b050cba652";
                            } else if (workItemId.indexOf("SR") >= 0) {

    In our company the work items start with AI, and that was the reason why it could not find the work item. When i changed the "if (workItemId.indexOf("IR") >= 0) {" to look like "if (workItemId.indexOf("AI") >= 0) {" it started to work perfectly.

    This is just FYI if someone else has the same problem.
  • Vladimir_BudyakVladimir_Budyak Customer IT Monkey ✭
    edited August 2017
    I have a trouble in this function:
    // Get item via API
          "id": workItemId,
          "typeProjectionId": projectionTypeId
       function(data) {
          var preview = createWorkItemPreviewHtml(data);
             top: e.pageY - 300,
             left: e.pageX + 30
    var el = document.getElementsByClassName('workitem-preview')[0];
    var rect = el.getBoundingClientRect();
    var topPos = (rect.bottom > window.innerHeight) ? e.pageY - 300 - (rect.bottom - window.innerHeight) - 10 : e.pageY - 300;
    topPos = (topPos < 0) ? -20 : topPos;
       top: topPos,
       left: e.pageX + 30
    jquery.min.js?v=811:5 GET http://testserver/api/V3/Projection/GetProjection?id=CR5405&typeProjectionId=4C8F4F06-4C8F-A1B6-C104-89CFB7B593FA 500 (Internal Server Error)
    But if I try from server, script work fine.
    Please help resolve this issue.
  • Roelof_LuingeRoelof_Luinge Customer IT Monkey ✭
    New version (v0.3) with the following fixes:
    • Should work on all views regardless of column ordering and even searches.
    • Included color based WI type from @Adam_Dzyacky.
    • Added fix by @Leigh_Kilday where it wouldn't work on RA if there were no Reviewers.
    Tested on v7.2.2016.1, v7.4.2016.11 & v8.0.2016.6


    Verry usefull feature.. It works right out of the box, only have to rename the extensions. Maybe in a next release parameterise this in the first section of the file.

    Thanks and keep up the good work!

  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @Ralph_Palmer, have you changed the default prefix of the workitems? The script assumes that you use the OOTB ones (line 93-107).

    @Vladimir_Budyak, The http request url seems correct. What do you mean by "try from server"?
  • Ralph_PalmerRalph_Palmer Customer IT Monkey ✭
    @Martin_Blomgren thanks, that fixed it.
  • Vladimir_BudyakVladimir_Budyak Customer IT Monkey ✭
    @Ralph_Palmer, have you changed the default prefix of the workitems? The script assumes that you use the OOTB ones (line 93-107).

    @Vladimir_Budyak, The http request url seems correct. What do you mean by "try from server"?
    Martin thanks, all work fine.
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    Leveraging a ThumbnailPhoto class extension made to the user class whereby the base64 string is pulled from SCSM and then rendered as a photo on Work Item Hover. Inspired by the discussion @Silas_Sulser
    originally started and then @Jeff_Lang wrapped up via his thread

Sign In or Register to comment.