Not able to implement multiple issue collectors through button click in angular 9 (SPA)

Question

Hi

I have created issues collector in two projects namely, BUGS & CLIENT FEEDBACK. I am trying to integrate the scripts, generated at the end of the creation process through project settings, in my application but only one script is running, the other is getting overridden by the first. As a result, the same form is opening for different functions in my application in the live environment.

How can I integrate two or more issue collectors in an Angular-based Single Page Application?

"Report a Bug" issue collector is created in the BUGS project
"Submit Your Feedback" issue collector is created in the Client Feedback project

Earl McCutcheon · Answer

Hello @Rishiraj Shukla , Thanks for reaching out, and I am not entirely sure how Angular is going to input this data but I believe what you are running into is an advanced formatting requirement for embedding multiple issue collectors into a single page. I found. the following resource on integrating Angular to Jira, that may help for Angular specific issues here: * https://stackoverflow.com/questions/55799885/ways-to-integrate-the-jira-issue-collector-with-an-angular-app But overall for what I believe you are hitting in the formatting can be found in the following Document respective to your platform noting, I added both platform docs in case anyone else runs into this thread with a similar question: * Jira Server / Data Center: "Advanced use of the Jira issue collector" * Jira Cloud: "Customize the Jira issue collector" In the Script URL that you have created for the issue collector, there will be a value for "collectorId", that you will want to pull out for the Page_Props script, that will be displayed in a format like this: https:///&collectorId= and then input that collector ID into the page props like this: window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, { '' : { triggerFunction: // define trigger function fieldValues: { // define field values here } }, '' : { triggerFunction: // define trigger function fieldValues: { //define field values here } } }); As a bare-bones example of a basic HTML to get two-issue collectors on the same page load as a set of buttons I threw together the following example noting the two issue collectors src values are heavily truncated but have collector ID's equal to "b13152d7" and "003c080b" for this example (modify as needed for Angular to accept the values): HEADER

Section 1

JIRA Issue Collector Demo

Buttons:

the above code will display like the following screenshot and on click of the Test1 button will load "CollectorID=b13152d7" and on click of the Test2 button will load "CollectorID=003c080b" from the same page: Hope this gets you on the right track. Regards, Earl