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

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Jira issue collector for react app

Has anyone integrated Jira issue collector with the react application?

Please guide.

Thanks

 

 

3 answers

I got it to work on react no need for jquery

On you index.html

 

<script type="text/javascript" src="https://jira..."/>

<script>

  window.ATL_JQ_PAGE_PROPS = {

    "triggerFunction": function(showCollectorDialog) {

        window.showCollectorDialog = showCollectorDialog;

}}

<script>

 

On your react component:

 

<FeedbackButton onClick={()=>window.showCollectorDialog()}  > </FeedbackButton>

Working for me also but with jquery only,  jquery is required for the issue collector functions getting the error without it.

I added the script in  componentDidMount

componentDidMount() { window.jQuery = jQuery; const script = document.createElement('script'); script.src = 'https://jira.{corp}.com/jira/.....'; script.async = true; document.body.appendChild(script); }

 

Thanks for your help.

Where did you set window.ATL_JQ_PAGE_PROPS? on the  componentDidMount too?

I have removed it, not using a custom trigger now.

Hello,

I tried your solution @u691307 and it works, I can now open a "Report a bug" Atlassian window but I can't select any fields to write in.

After some tests, I think the problem is Material-UI. If I call the trigger inside a Material-UI component the dialog window appears and I can't write in the fields. But If I call the trigger in a <a> outside Material-UI components it works.

Can any of you share your code? I tried but without success

Like elaine-wow likes this

I was able to use jira issue colector with react using these ways:

<Button
onClick={() => {
let blankWindow = window.open('about:blank');
let document = blankWindow?.document;
document?.open();
document?.write(`
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>your jira collector url...</script>
<script>your jira collector url...</script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function (showCollectorDialog) {
jQuery(document).ready(function () {
setTimeout(function () {
showCollectorDialog();
}, 50);
});
}
};</script>
</head>
<body>
</body>
</html>
`);
document?.close();
}}
>
Collector Button
</Button>

or..

import the collector script in your tsx/jsx with the below content:

window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#feedback-button").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};

set in your useEffect or componentDidMount

const script = document.createElement('script');
const script2 = document.createElement('script');

script.type = 'text/javascript';
script.src='your jira collector url'
script.async = true;
script2.type = 'text/javascript';
script2.src='your jira collector url'
script2.async = true;

document.head.append(script);
document.head.append(script2);

and create the button with the correct id

<Button id="feedback-button">Collector</Button>

0 votes

I included the jira scipts in the index.html (sorry for the terrible formatting)

<script type="text/javascript"  src="jirascript.js"></script>    

<script type="text/javascript">    
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {        
triggerFunctionfunction (showCollectorDialog) {          $('#giveFeedback').on('click'function (e) {            e.preventDefault();            showCollectorDialog();          });        },      });    
</script>

  Declared in my component:

<a href="#" id="giveFeedback">Give feedback</a>

However, if you are using Material UI, and say want to put this in a popup or dialog, you may run into issues that one of the users previously mentioned where the text fields are not clickable. There's a z-index issue, so I just targeted the id in my CSS, and make sure it's marked as important or it will not override the default z-index that is set:

#user-settings {z-index200000000000 !important;}

Hope this helps. 

Suggest an answer

Log in or Sign up to answer
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you