Using Javascript to set custom field values

New Plugin Under Development The Database Values JIRA Plugin will allow users to populate custom field with values extracted from a database.

JIRA 3.2 and onwards support the ability to enter arbitrary HTML (as opposed to raw text) as the 'description' of a custom field. Typically this is just used to format the description (eg. add some hyperlinks), but the description can be used to do more interesting things, like setting the custom field value.

Pre-determined text field values

For instance, say we have a 'Class Name' custom field, which must be populated with a hard-to-remember string (a real example here; recording a class name):

In our description, we can add a list of valid options, which when clicked will populate the text field:

To do this:

1. Go to Administration -> Issue Fields -> Custom Fields, and locate the custom field you wish to customize
2. Click "Edit" on the custom field you are interested in
3. Note the custom field ID in the URL. For example, the URL might include '/secure/admin/EditCustomField!default.jspa?id=10030', in which case the custom field ID is 10030.
4. Paste the following into the custom field description:

   <script type="text/javascript">
     function showOptions() {
           var listenersDiv = document.getElementById("presetValues");
           var listenersArrow = document.getElementById("presetValuesArrow");
           if (listenersDiv.style.display == 'none') {
             listenersDiv.style.display = '';
             listenersArrow.src='../images/icons/navigate_down.gif';
           } else {
             listenersDiv.style.display='none';
             listenersArrow.src='../images/icons/navigate_right.gif';
           }
     }
     function setPresetValue(clazz) {
           var classField = document.getElementById("customfield_10030");
           classField.value = clazz;
           classField.focus();
           return false;
     }
   </script>
   
   <img id="presetValuesArrow" src="../images/icons/navigate_right.gif" width=8 height=8 border=0>
   <a href="#"  onclick="showOptions(); return false;">Preset Options</a>
   
   <div id="presetValues" style="font-size: 90%; display: none">
   <ul>
     <li> <a href="#" onclick="return setPresetValue('com.atlassian.jira.service.services.export.ExportService');">Backup service</a> </li>
     <li> <a href="#" onclick="return setPresetValue('com.atlassian.jira.service.services.pop.PopService');">Create issues from POP</a> </li>
     <li> <a href="#" onclick="return setPresetValue('com.atlassian.jira.service.services.imap.ImapService');">Create issues from IMAP</a> </li>
     <li> <a href="#" onclick="return setPresetValue('com.atlassian.jira.service.services.file.FileService');">Create issues issues from local files</a> </li>
     <li> <a href="#" onclick="return setPresetValue('com.atlassian.jira.service.services.DebugService');">Debugging service</a> </li>
   </ul>
   </div>

5. In the pasted text, edit the line:

   var classField = document.getElementById("customfield_10030");

and change the ID to match that of your custom field.

1. Save the field, and try out the custom field on an issue.

Hidden extra fields

As another example, say we wish to hide some extra fields until a checkbox is ticked:

When ticked, an extra custom field displays:

This can be done with the following Javascript on the description of the bottom-most element (here, the 'Build Number' field):

<script type="text/javascript">
  checkbox = document.getElementById('customfield_10013_1');
  target = document.getElementById('customfield_10000FieldArea');
  // Hide the target field by default
  target.style.display = 'none';

  checkbox.onclick=function() {
    if (checkbox.checked) {
      target.style.display = '';
    } else {
      target.style.display='none';
    }
  };
</script>

Other possibilities

This is a fairly tame demonstration, but there are many more interesting possibilities.

• Display a set of images to pick from, as a graphical alternative to a select-list.
• Populate multiple fields at once.
• Display an image, and store the clicked coordinates. For instance, display a map, and store latitude and longitude in two custom fields.
• Using XMLHttpRequest and Ajax techniques, query a database to populate a list or trigger a field update.
• Load an applet (perhaps using widgets from JDNC to present extra info relating to a field.