Home Community Uploads
image

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.

DISCLAIMER

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

2

Comments

  • 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

    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_CraigWendy_Craig Customer IT Monkey ✭
    That's perfect, thank you!
  • Adam_DzyackyAdam_Dzyacky Product Owner 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({
    
    ORIGINAL CODE FROM HERE 
    
    mousemove: function(e) {
                        $('.workitem-preview').css({
                            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 Product Owner 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 Product Owner 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) {

    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_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 ✭
    @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_BudyakVladimir_Budyak Customer IT Monkey ✭
    edited August 2017
    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_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

    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_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 Product Owner 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


  • Mika_KosunenMika_Kosunen Customer IT Monkey ✭
    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_StormarkKristoffer_Stormark Customer IT Monkey ✭
    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_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭
    edited December 2018
    @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_StormarkKristoffer_Stormark Customer IT Monkey ✭
    Perfect @Mikkel_Madsen
  • Adrian_MataiszAdrian_Mataisz Customer Advanced IT Monkey ✭✭✭

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

  • Wendy_CraigWendy_Craig Customer IT Monkey ✭

    It's still working for us on 9.3.9.2016.

  • Matt_OvertonMatt_Overton Customer Adept IT Monkey ✭✭

    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_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
    edited December 2020

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

    Thanks,

    Shane

  • Jeff_LangJeff_Lang Customer Ninja IT Monkey ✭✭✭✭
    edited May 2022

    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


    *edited to fix a typo

Sign In or Register to comment.