Custom WorkItem Preview on hover

Wendy_Craig

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_Blomgren

@Wendy_Craig, you can change which column you want to target by changing the code on line 74

from:

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

to:

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:
https://community.cireson.com/discussion/comment/9526/#Comment_9526

Wendy_Craig

That's perfect, thank you!

Adam_Dzyacky

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_Stormark

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({

ORIGINAL CODE FROM HERE 

mousemove: function(e) {
                    $('.workitem-preview').css({
                        left: e.pageX + 30
                    });
                },


.....

Aprox from line 74

Wendy_Craig

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_Blomgren

@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_Dzyacky

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_Blomgren

So we need to add a conditional test to see whether a comment is null or not before trying to add/escape it!

Adam_Dzyacky

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_Blomgren

Or perhaps a SMLets based connector

Never the less there should be a failsafe that checks whether a comment is null.

Ralph_Palmer

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_Hendricks

Tom_Hendricks said:

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) {

To:

$('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_Palmer

@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_Alhoranta

@Martin_Blomgren
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_Budyak

Hi,
I have a trouble in this function:

<div>// Get item via API</div><div>
$.getJSON('/api/V3/Projection/GetProjection',
   {&nbsp;
      "id": workItemId,
      "typeProjectionId": projectionTypeId
   },
   function(data) {
      var preview = createWorkItemPreviewHtml(data);
      $('body').append(preview);
      $('.workitem-preview').css({
         top: e.pageY - 300,
         left: e.pageX + 30
      });
<span style="background-color: transparent; color: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: inherit;">var el = document.getElementsByClassName('workitem-preview')[0];
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">var rect = el.getBoundingClientRect();
</span><span style="background-color: transparent; color: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: inherit;">var topPos = (rect.bottom > window.innerHeight) ? e.pageY - 300 - (rect.bottom - window.innerHeight) - 10 : e.pageY - 300;
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">topPos = (topPos < 0) ? -20 : topPos;
</span><span style="background-color: transparent; color: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: inherit;">$('.workitem-preview').css({
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">   top: topPos,
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">   left: e.pageX + 30
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">});
</span><span style="background-color: transparent; color: inherit; font-size: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;">});</span></div>

Error:

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_Luinge

Martin_Blomgren said:

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

Martin,

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_Blomgren

@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_Palmer

@Martin_Blomgren thanks, that fixed it.

Vladimir_Budyak

Martin_Blomgren said:

@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_Dzyacky

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

Mika_Kosunen

This is awesome, thanks for contributing!
Can anyone help me how to get this work with 2 languages? We are using 
our portal in English and Finnish.
Thank you very much,

- Mika

Kristoffer_Stormark

Using the icon mod, there is a line change after the id, any way to get rid of this 
I think this used to work, but in 8.11 we now have the id and icon on two lines regales of collum with 

 

Mikkel_Madsen

@Kristoffer_Stormark at line 88 you have to change your append code a bit - so it looks like this from line 83

<br>&nbsp;if (link.text().toUpperCase() === "ID") {<br>&nbsp;&nbsp;// add preview icon<br>&nbsp;&nbsp;$('tbody > tr').each(function (index2) {<br>&nbsp;&nbsp;&nbsp;var userDetailElem = $(this).children('td').eq(index);<br>&nbsp;&nbsp;&nbsp;if (userDetailElem.text() !== '') {<br>&nbsp;&nbsp;&nbsp;&nbsp;userDetailElem.append('<span class="pull-right"><a class="pull-right wiPreview" title=""><i class="fa fa-eye"></i></a></span>');<br>&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;});<br>&nbsp;&nbsp;return false;<br>&nbsp;}

Haven't testet it for 8.11 but changed it to this at upgrade for 8.9.5

Kristoffer_Stormark

Perfect @Mikkel_Madsen

Adrian_Mataisz

We are on Current Portal Version: 9.3.8 . Is this still working with latest versions?

Wendy_Craig

It's still working for us on 9.3.9.2016.

Matt_Overton

Thank you for this! Works like a charm for IRs, but for SRs the following is logged in the browser console:

VM13441:232 Uncaught TypeError: Cannot read property 'Name' of undefined

  at createWorkItemPreviewHtml (<anonymous>:232:74)

  at Object.success (<anonymous>:115:43)

  at u (jquery.min.js?v=9310:2)

  at Object.fireWith [as resolveWith] (jquery.min.js?v=9310:2)

  at k (jquery.min.js?v=9310:2)

  at XMLHttpRequest.<anonymous> (jquery.min.js?v=9310:2)

Does anyone have any ideas please?

Shane_White

@Martin_Blomgren

This was broken in the latest version of the portal due to changes made to the grid with the new Teams Integration, I made some changes to get this working, you are more than welcome to review:

I changed:

kendoGridElement.bind("dataBound", AddEventHandlers);

TO:

app.events.subscribe('gridBound', function(){

                AddEventHandlers();

            });

If anyone in the Community using this solution could test and confirm if this fixes the issue and/or breaks any other functionality that would be great.

custom_WorkItemPreview(ShaneEdit).zip

Thanks,

Shane

Jeff_Lang

had some issues with this one when upgrading to 11.6, here is one that works

have also added variables at the top for extra settings

ColumnNameToUse - sets the Column name to use to hover the mouse for a preview, or to add an icon for hovering over

usePreviewicon - when set to true it adds an "eye" icon to the column stated in the variable above, and only hovering over the eye shows the preview

WorkItemPreview.zip

*edited to fix a typo