Issue Collector

What is an Issue Collector?

An Issue collector basically allows you to embed Jira feedback into a website. This can be embedded via HTML or Javascript. This form is typically accessed by clicking a 'trigger' tab exposed along the edge of pages in your web site. Visitors on your website do not require a Jira account to be able to use the forms on an Issue collector. Then watch the feedback appear in the form of Jira Issues!

How to Create an Issue Collector?

You will require either a site-admin or Jira-administrator permission to be able to access the “Issue Collector” tab from the Jira Settings > System > Issue Collector

To create an Issue Collector, go to your Project Settings > Issue Collector click on "+ Add issue collector". Fill up the configuration form according to your requirements.

issue-collector main.png

Triggers

A trigger helps the visitor of your website to be able to click on the form, fill it up and submit the form. The trigger uses a pre-defined set of Javascript that has been programmed to behave in a certain way. There are various types of trigger style as well as a custom trigger.

Using Custom Triggers

A 'custom trigger style' allows you to define a Javascript function to customize trigger behaviour. The code snippet below must be included with the issue collector snippet on your web page.

You can customize the body of the 'triggerFunction'. This function always has to attach the passed in 'showCollectorDialog' to an element's event. You will most likely want to replace the id 'myCustomTrigger' with the id of the element you want to launch the issue collector.

Example of a custom trigger in Javascript

<script type="text/javascript"> 
window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) { jQuery("#myCustomTrigger").click(function(e) { e.preventDefault(); showCollectorDialog(); }); } };

</script>

Issue Collector Form

An Issue collector form is basically a template that is rendered by the Issue collector. When the issue collector script or code is embed on a website or webApp, it calls either a pre-defined form or a custom form based on the one that is selected during the issue collector configuration.

Using a custom Form

By selecting the ‘Custom’ radio button on the Issue Collector form (Template) it gives you access to your custom fields. Therefore you can be able to create different form templates using custom fields. You can work on a more advanced form by associating your custom fields, issuetype screen schemes and field configurations together to achieve a Form that is more complex.

Advanced Form Customization

To create an advanced form, you will need to know what type of fields you require on the Issue Collector Form. Having a rough idea of what kind of data should be collected on the form, would determine what you require. you might be asking yourself, what type of forms should I use? Below is some examples based on what data you require.

  1. If you are looking to provide a user a list of options, then you should use the (Select List) field type on your custom fields. Please take note that there are single or multiple choice or cascading for this field type.

  2. Use the “Number field” field type for numbers data or you can use a text field.

  3. Use the “URL field” for capture URL data

  4. If you require a sort of Calendar, use the “date time picker” field type.

  5. If you require an arbitrary labels, use the “labels” field type.

All these are done by going to the Jira Settings  > Issues > Custom fields and choose “Add custom fields”

Step-by-Step Guide

Making an Advanced Issue Collector Form using custom fields.

Question. How to make the name and email field required?

  • First of all go to your custom fields create two new custom fields using the text field (single line) field type. you can name it Name (Issue collector) and Email (Issue collector) for easier reference.

  • After that is done, go to your Jira Settings > Issues > Issue type Screen Scheme

  • Locate your project <NAME> the one you want this Issue Collector associated to and click on "configure" Then click on the appropriate issuetype “Screen Scheme” link

  • After that, click on the appropriate Screen.

  • Add the two new custom fields you just created

  • Then click on the field configuration locate these two fields and click on "Required" link.

  • Once the above is done, you can go to your Issue Collector scroll down to the Custom field and tick the two new fields to be added to the Template preview.

  • Rename the previous "Name and Email" fields to "optional info and optional details" then Edit the "Name (Issue Collector) and Email (Issue Collector)" to "Name and Email"

  • Update to save changes and test out the fields.

issue-collector.pngissue-collector-2.pngIf done successfully, the end result should look like the below, once the form has been raised.

test-creation.png

Embedding an Issue Collector to a Web Page

Embedding the configured issue collector is done by copying the code or snippet from the configuration page of the Issue collector after it has been saved. It is either you embed in HTML or Javascript.

Embedding in HTML - requires you place the code in between the <body> </body> HTML tag, although you can place it after but it’s advisable to place the code before the </body> section of an HTML element.

<html> 
<head>...</head>
<body>

<h1>Hello World!</h1> Insert collector source here
</body>
</html>

 Embedding in Javascript - Embed the code below in an existing JavaScript resource of the target website. This option requires jQuery. so please ensure that jQuery is included before the collector snippet.you can either paste this at the <head> </head> tag or after the </body> but in a <script> </script> tag.

<html> 
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script> Insert collector source here </script> </head>
<body>
<h1>Hello World!</h1>
</body>
<!-- OR --> <script> Insert collector source here </script>

</html>

 Please take note that, the Issue collector might not work for an Issue type if has a required System Field. e.g. Epic Issue Type has “Epic Name” required by default as a system field. This might cause Any Issue Collector not to work even though it’s not added on Screen but exist in the Field Configuration.

Testing out an Issue Collector using a HTML Tester

One is available via W3Schools HTML Tester, copy the Issue collector code and paste it on the left HTML panel then click the “RUN” button.

 

3 comments

Kristján Geir Mathiesen
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
January 29, 2021

Thank you @Prince Nyeche for a great article!

Mohsen Bakhshi Zadeh
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
January 19, 2022

Hello

Quick question. Is there any way to send a copy of Jira feedback/request to sender after submission? 

Dave Symonds
Contributor
August 8, 2024

Trying the W3 HTML tester and no luck - same on a few others - just copying the Jira IC html code into the body and nothing??  any ideas?

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events