Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,459,312
Community Members
 
Community Events
176
Community Groups

Using Issue collector in React

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?

2 answers

1 accepted

0 votes
Answer accepted
Andy Heinzer Atlassian Team Jan 05, 2022

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;


 

Like Marc likes this

Thks Bruce it's working like a charm for me.

0 votes

Without using Jquery in a React environment :

document.getElementById(ELEMENT_ID).addEventListener('click', function (e) {
e.preventDefault();
showCollectorDialog();
});

Suggest an answer

Log in or Sign up to answer