Rich Hover for Work Item

I have a viewlet that will show a list of work items.

How would one add the Rich Hover for the work item similar to what is shown in other parts of RTC when the user hovers over a work item link?

I'm guessing that it's a call to a service in Javascript, but I'd like to see an example.

To be a bit more specific. I'd like to have the rich hover text appear the way it does on the links page in the Web UI. When the user hovers the mouse pointer over the work item link in the viewlet, I'd like the rich hover text display to pop up the way it does on the Links page. This function is available several places in the RTC Web UI.

Can anyone point me to a sample of this?


I've had some people contact me and ask if I've found this yet. A pointer might be all I need.

Thanks for any help you can give.

Assuming that you are building on top of the Jazz platform, all you need to do is use the jazz.app.ResourceLink widget (it is being moved to jazz.ui.ResourceLink in Foundation 3.0M7 Candidate, but you probably aren't on that code base yet). The API for the widget is documented in the code and is very simple. You basically create a link to the work item resource itself (not the web ui) and then pass it to the ResourceLink constructor as a reference node.

For example:

var link = dojo.create("a", {href: <work>, innerHTML: "My Work Item"});
new ResourceLink({}, link);

If you are not building on top of the Jazz platform, then you have to do a bit more legwork. You need to make a request to get the compact rendering document for the work item. This is an xml document that contains urls that can be placed inside an iframe to show the preview content you are after. You are then responsible for creating and managing an iframe and pointing it at the urls from the compact rendering document. ResourceLink is basically a widget that does all this for you. For more information on the spec and how to consume it without the use of ResourceLink, see the following wiki document:

https://jazz.net/wiki/bin/view/Main/LinkRendering

We are currently working on a solution to make ResourceLink available outside the Jazz platform, but the solution has not materialized yet. If you interested in this, we can keep you posted on the progress.

Adam Archer
Jazz Web UI Developer

Assuming that you are building on top of the Jazz platform, all you need to do is use the jazz.app.ResourceLink widget (it is being moved to jazz.ui.ResourceLink in Foundation 3.0M7 Candidate, but you probably aren't on that code base yet). The API for the widget is documented in the code and is very simple. You basically create a link to the work item resource itself (not the web ui) and then pass it to the ResourceLink constructor as a reference node.

For example:

var link = dojo.create("a", {href: <work>, innerHTML: "My Work Item"});
new ResourceLink({}, link);

If you are not building on top of the Jazz platform, then you have to do a bit more legwork. You need to make a request to get the compact rendering document for the work item. This is an xml document that contains urls that can be placed inside an iframe to show the preview content you are after. You are then responsible for creating and managing an iframe and pointing it at the urls from the compact rendering document. ResourceLink is basically a widget that does all this for you. For more information on the spec and how to consume it without the use of ResourceLink, see the following wiki document:

https://jazz.net/wiki/bin/view/Main/LinkRendering

We are currently working on a solution to make ResourceLink available outside the Jazz platform, but the solution has not materialized yet. If you interested in this, we can keep you posted on the progress.

Adam Archer
Jazz Web UI Developer

Thanks, Adam. We're using the Jazz platform, so we should be able to use the ResourceLink widget.

Hi Adam,

I have the same requirement, but I am not using the Jazz platform. The issue that I am having is I want to use the WorkItemCreationWidget to open a defect. In my HTML, I can create an iframe which loads the work item creation page, for example:

https://host:port/jazz/_ajax-modules/com.ibm.team.workitem.WICreationDialog?projectAreaName=MyProject&dc%3Atype=defect

However, how can I retrieve the # of the newly opened work item? I can't use javascript to walk the DOM tree of the iframe because it's from a different domain. And that's consider a security risk. Please shed some light on this.

Thanks, Jeff

I have the same requirement, but I am not using the Jazz platform. The
issue that I am having is I want to use the WorkItemCreationWidget to
open a defect. In my HTML, I can create an iframe which loads the
work item creation page, for example:

https://host:port/jazz/_ajax-modules/com.ibm.team.workitem.WICreationDialog?projectAreaName=MyProject&dc%3Atype=defect

However, how can I retrieve the # of the newly opened work item? I
can't use javascript to walk the DOM tree of the iframe because it's
from a different domain. And that's consider a security risk. Please
shed some light on this.

The API to get the created URL in this delegated UI case is documented in:

http://open-services.net/bin/view/Main/CmDelegatedResourceSelectionAndCreationV1
https://jazz.net/wiki/bin/view/Main/CalmFrameCommunicationProtocols


--
Regards,
Patrick
Jazz Work Item Team