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_Blomgren
Customer Ninja IT Monkey ✭✭✭✭
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:
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!
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!
15
Comments
Attached is an updated version where the position of the modal window gets calculated depending on window size and where in the grid the workitem is.
For example if hovering on a workitem in the bottom of the list the modal window will popup so that all content will fit except if there is more content then screen available then it will start at the top and display as much content as possible. The other way around if hovering on a workitem at the top and the modal window is placed above the height of the window it will be pushed down.
Included a bonus setting for those that have extended the SR class with your own Area, you are now able to specify a custom area at the top in the js file along with the other settings
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!!
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.
This would be especially helpful for analysts that have smaller screens or for accessibility reasons need to use a lower resolution.
Thanks again!
Would it be possible to do this for the calendar view?
when you hover over an item in the calendar.
with
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.into the areas for...
} 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>';
}
}
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.
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>'
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):
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:
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.
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.
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?
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.
I did all the things @Adam_Dzyacky said, but i cant get it work. I have tried a couple of the Service Manager account.
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!
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...
/Alex
Replace
With
Edit: That doesn't work for me. It stops the preview from working on the other grid views too.
- 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