Community
Products
Jira Software
Questions
Jira issue collector for react app

Jira issue collector for react app

Has anyone integrated Jira issue collector with the react application?

Please guide.

Thanks

5 answers

1 accepted

1 vote

Answer accepted

I got it to work on react no need for jquery

On you index.html

window.ATL_JQ_PAGE_PROPS = {

"triggerFunction": function(showCollectorDialog) {

window.showCollectorDialog = showCollectorDialog;

}}

On your react component:

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hello,

I tried your solution @[deleted] 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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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>

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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>

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

If you're like me and stumbled on this while looking for how to properly add the Issue Collector / Jira Service Management widget to a Gatsby Page:

Create the file 'gatsby-ssr.js' if it does not already exist. Add the following to the file.

const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
    setHeadComponents([
        <script> YOUR WIDGET CODE </script>
    ])
}

if you're testing your dev environment locally, stop then restart the environment with `npm run develop`.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

To add onto u691307's response, If anyone comes across this and needs access to multiple widgets, simply change the variable name in the source and the corresponding onClick. Example:

window.showCollectorDialog = showCollectorDialog;
window.showCollectorDialog2 = showCollectorDialog;
window.showCollectorDialogBestWidgetEver = showCollectorDialog;

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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, {        
triggerFunction: function (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-index: 200000000000 !important;}

Hope this helps.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

I tried to, but the trigger won't work. I used the example here:

https://community.atlassian.com/t5/Confluence-questions/Jira-Issue-Collector-window-not-opening-from-custom-trigger/qaq-p/1160172

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Jira issue collector for react app

5 answers

1 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Community showcase

Atlassian Community Events

Ask a question

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Jira issue collector for react app

5 answers

1 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Community showcase

Atlassian Community Events