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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
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.
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.
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.
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.
I tried to, but the trigger won't work. I used the example here:
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.