Needing help with JIRA Issue Collector inside an angular application.

[Misty Ramsdell]

The button, to pull up the issue collector, needs to be clicked twice in order for the collector to pop up. 

running jQuery version 1.12.4 

Current code:

In html file:

<button id="nameOfButton" (click)="nameOfButton">Name of Button</button>

In ts file:

import * as jQuery from 'jquery';

declare global { 
   interface Window { 
     ALT_JQ_PAGE_PROPS: any; 
   } 
}

window.ALT_JQ_PAGE_PROPS = window.ALT_JQ_PAGE_PROPS || {};

@Component({ })

nameOfButton() {
    jQuery.ajax({url: 'https://url/plugins/servlet/issueCollectorBootstrap.js?collectorId=numberid&locale=en_US',
       type: 'get',
       cache: true,
       dataType: 'script',
     })

   window.ATL_JQ_PAGE_PROPS = {

      triggerFunction: function (showCollectorDialog: any) {

        //Requires that jQuery is available!

        jQuery('#nameOfButton').on('click', function (e) {

          e.preventDefault();

          showCollectorDialog();

          e.stopImmediatePropagation();     <- this is added by us to stop overlapping->

        });

      },

    };

  }

Is there a solution to fix the call to the issue collector and have it display without having to click the button a second time?

It would be nice if Atlassian would take a hard look into the JIRA Issue Collector and map out a solution for those who are using Angular for building their applications. 

If by chance we have missed the directions for Angular using a custom collector, please comment where to find them.  

[Benji Darby]

The Issue Collector doesn't handle SPA lifecycle well — it injects global styles and doesn't clean up on route changes, which causes the problems you're seeing.

Two approaches that work better with Angular:

1. Use the Jira REST API directly with an Angular service — most control, but you have to build the UI and handle auth yourself

2. Use a widget that runs in Shadow DOM, which avoids the CSS conflict and cleanup issues entirely. IssueCapture takes this approach and has an Angular-specific setup.

For option 1, the key is using the Issue Create endpoint (/rest/api/3/issue) with OAuth 2.0 rather than trying to embed the collector script.

Disclosure: I work on IssueCapture.

[Brant Schroeder]

@Misty Ramsdell Welcome to the Atlassian community

We just used the API and integrated that into our support form.  This gave us more control of the information that we collected, and we do not have to rely on the issue collector.  The issue collector is an easy to use / implement solution, but you have less control over it since it uses Atlassian code.  The API give you full control since you build the frontend.