Way to make jira issues macro table display URL fields as clickable (anchors)?

[Joakim Sarnelid]

Hi,

My problem:

I have a table in concluence generated by the jira issues macro that displays a number of issues with a custom field of type "URL Field". These fields contain links to specs also in confluence. Since the field values are URLs I would like them to be clickable.

It would be nice if the macro automatically identified fields of type URL and created the link for me. I realize this is not supported today and I'm therefore wondering if someone could recommend a workaround. For instance, would it be reasonably straight forward for me to modify the macro code to support this, and if so, where do I find the code?

Thank you!
/Joakim

[CharlesH · Accepted solution]

I'd suggest trying jQuery to tackle this problem. You could find table cells starting with the text "http" and then introduce a HTML tag around the complete text of that cell. Here's some info on how to introduce the link: http://stackoverflow.com/questions/4280225/jquery-add-link-to-text For the selector you should start with elements of class confluenceTable, but the selector needs to go finer than this and pinpoint each cell containing "http" (at the start). This may help you: http://stackoverflow.com/questions/6135665/jquery-find-table-row-containing-table-cell-containing-specific-text Regards, Charles

[Joakim Sarnelid]

Thanks! I did get this approach to work, but it's not exactly pretty :-S

In case someone is interested, this is what I ended up doing (using the plain HTML macro in the page with the jira issue table)

{html}
<script>
AJS.$(document).bind(AppLinks.Event.READY, function() {
	setTimeout(addAnchor, 1000)
});
function addAnchor() {
	AJS.$("table td div:contains('https://')").wrap(
		function() { 
			return '<a href="' + AJS.$(this).text() + '" />';
		}
	);
}
</script>
{html}

The ugliest part is that I could not find any event to hook the code on that fires after the table has been rendered. Hence the timeout. Any ideas on how to clean this up is of course most welcome.

[CharlesH]

Hi Joakim,

I think I can see why you've implemented a timeout mechansim, as you're dealing with multiple DOM objects returned by the jQuery selector, and need to process each one. A more efficient way of doing this would be to use the each() or possibly the map() method. The code would be along these lines:

jQuery("table td div:contains('https://')").each(function(){

    jQuery(this).wrap(function() { return "a href='" + jQuery(this).text() + "' />"; }

}

This approach here is to process each element in turn (since the 1st selector call got them all), without the need to go back and run the selector again and again.

Regards,

Charles

[Joakim Sarnelid]

Actually, the timeout is due to the fact that the table content is loaded asyncronously after the rest of the DOM has finished loading. Since I could not find any event equivelent to $(document).ready() for signalling when the table had finished rendering I resorted to using a timeout.

The each approach works nicely if I tell the JIRA issues plugin to render the table statically (in the issue macro settings):

// For static tables
AJS.$(document).ready(function() {
   AJS.$("table td:contains('https://')").each(function() {
      AJS.$(this).html('<a href="' + AJS.$(this).text() + '">' + AJS.$(this).text() + '</a>');
   });
});

However, static redering of the table leaves out some nice functionality.

[CharlesH]

jQuery offers a mechanism for binding events to DOM elements, so as to trigger execution of other functions. I've not used this extensively, but perhaps it may help deal with the asynchronous loading of the jira issues data.

http://scriptble.com/2009/05/custom-events-with-jquery/

Regards,

Charles

[Joakim Sarnelid]

Thanks, I'll take a look at that!