Not able to implement multiple issue collectors through button click in angular 9 (SPA)
1 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:
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://<JIRA_URL>/<bunch of random hashes and a issue collector details>&collectorId=<copy this part here>and then input that collector ID into the page props like this:
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
'<collectorId_1>' : {
triggerFunction:
// define trigger function
fieldValues: {
// define field values here
}
},
'<collectorId_2>' : {
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):
<html>
<style>
.button {
background-color: #0052CC; /* Blue background */
border: 1px solid blue; /* blue border */
color: white; /* White text */
padding: 10px 24px; /* Some padding Adjustment height and width of button arround text*/
text-align: center; /* align text 'left' 'right' 'center' */
text-decoration: none; /* none or text-decoration-line text-decoration-color text-decoration-style|initial|inherit; exe overline, line-through, underline + solid, wavy, dotted, dashed, double + color */
display: inline-block; /* none, inline, block, inline-block */
font-size: 16px; /* Self explanatory */
margin: 2px 4px; /* margins around button */
border-radius: 4px; /* rounded corners for button */
}
.button:hover {
background-color: #172B4D; /* Change button color on hover */
}
</style>
<head>HEADER</head>
<body>
<h1>Section 1</h1>
<div>
<script type="text/javascript" src="https://<BASE URL HERE>.atlassian.net/<all the issue collector variables in the URL truncated for space>&collectorId=b13152d7"></script>
<script type="text/javascript" src="https://<BASE URL HERE>.atlassian.net/<all the issue collector variables in the URL truncated for space>&collectorId=003c080b"></script>
<script> window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
'b13152d7' : {
triggerFunction: function(showCollectorDialog) {
jQuery("#Test1").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}
},
'003c080b' : {
triggerFunction: function(showCollectorDialog) {
jQuery("#Test2").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}
}
});
</script>
<h2>JIRA Issue Collector Demo</h2>
<h1>Buttons:</h1>
<a id='Test1' href="#"><button class="button">Test1</button></a>
<a id='Test2' href="#"><button class="button">Test2</button></a>
</div>
</body>
</html>
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.