You're on your way to the next level! Join the Kudos program to earn points and save your progress.
Level 1: Seed
25 / 150 points
Next: Root
1 badge earned
Challenges come and go, but your rewards stay with you. Do more to earn more!
What goes around comes around! Share the love by gifting kudos to your peers.
Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!
Join now to unlock these features and more
The Atlassian Community can help you and your team get more value out of Atlassian products and practices.
I can get Jira issue collector to work in a Confluence page, but not in React. Can you tell me how to do it in React?
Hi Bruce,
I understand that you are building a react app and are wanting to include a Jira Issue collector within it. While I have not done this myself, I found another thread here is Community that appears to have a solution. Check out https://community.atlassian.com/t5/Jira-questions/Jira-issue-collector-for-react-app/qaq-p/1411911
That thread appears to contain a couple of different approaches to getting this to work.
I hope that helps.
Andy
That solution pops up the issue collector on a new window and I want it to pop-up on the current window because the new window doesn't close when the issue is submitted. I found a solution that does though as below.
import React from 'react';
import jQuery from 'jquery';
import {Row, Col, Button} from 'reactstrap'
const ELEMENT_ID = 'jira-feedback-button';
const WINDOW_VAR_NAME = 'jiraIssueCollector';
window['ATL_JQ_PAGE_PROPS'] = {
"triggerFunction": function(showCollectorDialog) {
jQuery(`#${ELEMENT_ID}`).click(function(e) {
console.log('triggerFunction')
e.preventDefault();
showCollectorDialog();
});
}};
const JIRAIssueCollector = () => {
const setCollector = () => {
const appElement = document.querySelector('body');
if (appElement) {
console.log('loading issue collector');
const snippet = document.createElement('script');
snippet.type = 'text/javascript';
snippet.src = "YOUR ISSUE COLLECTOR URL";
appElement.appendChild(snippet);
}
};
if (!window[WINDOW_VAR_NAME]) {
setCollector();
window[WINDOW_VAR_NAME] = this;
}
return (
<Row>
<Col>
<Button href="#" color="primary" id={ELEMENT_ID}>
Provide Feedback
</Button>
</Col>
</Row>
);
};
export default JIRAIssueCollector;
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Without using Jquery in a React environment :
document.getElementById(ELEMENT_ID).addEventListener('click', function (e) {
e.preventDefault();
showCollectorDialog();
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.