Has anyone integrated Jira issue collector with the react application?
Please guide.
Thanks
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;
}}
On your react component:
<FeedbackButton onClick={()=>window.showCollectorDialog()} > </FeedbackButton>
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
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 componentDidMountcomponentDidMount() { 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.
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.
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;
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`.
It looks like you're new here. Sign in or register to get started.
