Skip to content

JIRA Admin: Render Links from Custom Field Value

by on July 9, 2013

For our JIRA issue tracking we have a custom field which holds IDs which shall be rendered as links when the issue is viewed. In here you will find a solution which uses JIRA’s Announcement Banner to inject some JavaScript (based on jQuery) to do the rendering.

Starting Situation

  • JIRA 5 (to be more specific: 5.0.6) installation.
    Of course we might expect to require to update the solution as soon as we update JIRA as this is actually a hack.
  • There is a custom text field with ID 12345.
    You can find the ID for example in the link to edit the custom field or in the HTML source when the field value is rendered.
  • Values of this text field are comma-separated numeric IDs.
  • URL-Scheme to resolve IDs is: http://lorem.ipsum/<ID>.

Announcement Banner

The central code we use for rendering uses especially jQuery’s ready()-Handler and html()– and text()-function. In Jira jQuery is hidden in AJS Helper: AJS.$(…). Here is the actual code which does the job:

AJS.$(document).ready(
 function() {
  AJS.$("#customfield_12345-val").html(
   function(){
    return AJS.$(this).text()
     .replace(/(\d+)/g,
       "<a href='http://lorem.ipsum/$1'>$1</a>");
    }
  );
 }
);

As soon as we use the announcement banner to inject JavaScript you will note an empty box in JIRA UI which would hold the announcement banner. To suppress this empty box we adjust the style for class alertHeader and add a note how to re-enable it if you really want to add an announcement.

Thus the complete announcement banner looks like this:

<!-- Hints:
To add a banner:
* Edit and uncomment the announcement at the bottom
* Place the alertHeader-Style into comments so that it is not hidden anymore.
* Choose if to make the announcement public or private.

To remove a banner:
* Place the announcement below in comments.
* Uncomment the alertHeader style which actually hides it.
* Set visibility level to Private.
-->
<script type="text/javascript">
<!--
  AJS.$(document).ready(
    function() {
      AJS.$("#customfield_12345-val").html(
        function(){
          return AJS.$(this).text().replace(
            /(\d+)/g,
            "<a href='http://lorem.ipsum/$1'>$1</a>"
          );
        }
      );
    }
  );
//-->
</script>

<style type="text/css">
.alertHeader{display:none;}
</style>
<!--
<div style="text-align:center;font-weight:bold;border:2px solid #CC0000;">
Place your Announcement Banner Text here...
</div>
-->

Some Notes

  • As we actually wanted to link to Zendesk Issues we could have used the Zendesk plugin. But the plugin did not match our use-case.
  • In a previous JIRA installation we used a two-custom-field approach: One custom field to hold the value when editing and another custom field which renders the value of the first one in view mode (using Velocity). Since our JIRA update from JIRA 4 we did not have this option anymore – and regarding administration efforts (field configurations, schemes etc.) the approach mentioned above is much easier to maintain.

Links

The following links helped me developing the small piece of code:

From → Tips & Tricks

2 Comments
  1. hi mark

    trying to get this to work in Jira cloud, but it always displays the entire HTML as the banned. Am I missing something?

    • Hi,

      JIRA has changed the way the announcement banner is rendered. While it was a box at the top of the JIRA main view before, an announcement banner now surrounds the whole content once activated. As visible effect you will see a padding around the complete content when an announcement banner is activated.

      So for JIRA 7.1.9 we changed the HTML part a little to match the new requirements:

      <script>
      // ... The rendering script.
      </script>
      <style type="text/css">
      .alertBox { text-align:center; }
      .alertBox > .alertTitle { font-weight:bold; padding:0.5em; }
      .alertBox > .alertContent { padding:0.5em; }
      .alertBox.alertNone { display:none; }
      .alertBox.alertInfo { border:2px solid #00CC00; background:#EEFFEE; }
      .alertBox.alertInfo > .alertTitle { background:#BBFFBB; }
      .alertBox.alertWarn { border:2px solid #CC9900; background:#FFFFEE; }
      .alertBox.alertWarn > .alertTitle { background:#FFFFBB; }
      /*
       * JIRA adds and removes this element depending if the announcement banner is empty or not.
       * Because of the Zendesk workaround this banner is always visible, so we "hide" the announcement-banner.
       * As a consequence, if you enable an announcement below it does not look like "JIRA meant it"... but it
       * is still ok to make the following setting the default.
       */
      #announcement-banner {
          border-bottom: none;
          padding: 0px;
      }
      </style>
      <!-- Choose type: alertNone, alertInfo, altertWarn -->
      <div class="alertBox alertNone">
      <div class="alertTitle">
      JIRA Outage on ...
      </div>
      <div class="alertContent">
      ... description of the outage ...
      </div>
      

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s