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

Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
edited February 2017 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<br>var serviceAccountName = "domain\workflow_svc";<br>// Hide all entries made from above service account, true/false<br>var hideServiceAccountEntries = false;<br>// Name to display instead of service account<br>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!
«13

Comments

  • Leigh_KildayLeigh_Kilday Member Ninja IT Monkey ✭✭✭✭
    @Martin_Blomgren, you are amazing.
  • Brian_WiestBrian_Wiest Customer Super 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 Ninja 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 Adept 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 Super 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 2017
    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 Adept 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 Super 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 + '">' +<br>
    with
    '<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 Product Owner Contributor Monkey ✭✭✭✭✭
    Most excellent. Thanks for righting me @Tom_Hendricks !
  • Adam_DzyackyAdam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭
    edited February 2017
    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);
    and

    // MANUAL ACTIVITY
            }  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 Ninja IT Monkey ✭✭✭✭
    edited March 2017
    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 Product Owner Contributor Monkey ✭✭✭✭✭
    edited March 2017
    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 Ninja IT Monkey ✭✭✭✭
    edited May 2017
    @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 Ninja 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>';
    }
  • Alex_AlhorantaAlex_Alhoranta Customer IT Monkey ✭
    Hello everyone! I'm new with the Cireson portal, and I'm not even a coder (the portal just fell on me by a mistake after the old wizard here left the company). I have found many good ideas from the community, and this one is one of the best i have found. I do have a problem to get this work, and i would be really happy if someone could help me.

    As i told earlier, I'n not a real coder, and that includes JS. I think that might be the reason why i can figure out vhat to do in this part:

    // Needed for both name change and ability to hide those entries<br>var serviceAccountName = "domain\workflow_svc";<br>// Hide all entries made from above service account, true/false<br>var hideServiceAccountEntries = false;<br>// Name to display instead of service account<br>var newServiceAccountName = "IT Service portal"<span>;</span>
    What am I supposed to change here, so it starts working? Are we talking about server named in domain, and in that case is it the Service Manager server, or Cireson Portal server? What is that workflow there? Can the workflow have many names?

    As you can see, I'm a real life noob in thees things.
  • Adam_DzyackyAdam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭
    We all start somewhere @Alex_Alhoranta.

    What you're looking for here is the Active Directory account that is responsible for running workflows for Service Manager. If you're not sure what this is, the quickest way to find it is through the SCSM console

    Administration -> Security -> Run as Accounts - > Workflow Account

    The account in the form of "domain\accountName" is what you'll need to put there. The newServiceAccountName is the friendly name you want to see when using this customization. This can be anything really, but as example you could make it "SCSM Workflows" or "Service Manager" or leave it as is. I think once you see where/how this display name is used will help you decide on how you want it to appear.


  • Alex_AlhorantaAlex_Alhoranta Customer IT Monkey ✭
    @Adam_Dzyacky
    Thank you!
    I made the changes as you told, but there is still no changes in the portal. I have tried to restart the server for portal, is there some jobs that i also should restart?
  • Adam_DzyackyAdam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭
    edited June 2017
    In my experience, to "force" a change from the CustomSpace directory I've occasionally had to perform one or all of the following:

    • Recycle IIS AppPool for the site
    • Restart the IIS Website for the Cireson Portal
    • Clear local browser cache

    It should be noted the last step you could quickly prove without doing it by opening up Internet Explorer in InPrivate mode or Chrome in Incognito mode. If these work, then it's a cache issue.
  • Alex_AlhorantaAlex_Alhoranta Customer IT Monkey ✭
    Hi again!
    I did all the things @Adam_Dzyacky said, but i cant get it work. I have tried a couple of the Service Manager account.
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @Alex_Alhoranta, It could be because you have changed the default column ordering.

    I have a later version in production which fetches the column index of the ID from the header and then use this instead of using a fixed position. Also it should work on any WI grid regardless searches, promoted views etc. Of course I've included all contributions made in this thread since the last version. Currently on vacation but will uploaded once I get back!
  • 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.

    I am still gathering feedback on this (it is not in my upper environments yet) , but it seems like a good compromise to me.

    What made me think about this is that I already had to solve for finding the ID column by text instead of position.  Maybe that will be helpful, or maybe you already have a better way in mind.

    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;
    	}
    });
    Updated events:
    Replace
    $('.grid-highlight-column-last').on({
     ...etc...
    With
    $('a.wiPreview').on({
    
    ...etc...

  • Leigh_KildayLeigh_Kilday Member Ninja IT Monkey ✭✭✭✭
    During my brief test of SCSM portal 8.0.2016.6, I noticed that this script wouldn't run on the My Work grid. Using the browser dev menu, no errors were reported.
  • Alex_AlhorantaAlex_Alhoranta Customer IT Monkey ✭
    @Martin_Blomgren I did see you comment just now, but I don't thing i have changed the order column order. But I'm waiting with eager to test your updated version.
    /Alex
  • Mikhail_ScherbakovMikhail_Scherbakov Customer Adept IT Monkey ✭✭
    @Leigh_Kilday It seems that they changed the model. I run it after changing AddEventHandlers() function.
    Replace
    var workItemId = $(that).prev().prev().text();
    With
    var workItemId = $(that).parent().text();

  • Leigh_KildayLeigh_Kilday Member Ninja IT Monkey ✭✭✭✭
    edited July 2017
    Thanks @Mikhail_Scherbakov. I'll try this today.
    Edit: That doesn't work for me. It stops the preview from working on the other grid views too.
Sign In or Register to comment.