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 window not opening from custom trigger Edited

We would like to standardize and collect feedback from our users when they use our site, so we implemented the Jira Issue Collector.  Initially, I tried some of the default options, and while they did work, we had concerns about the way they interfered with the layout of our site.  Therefore, I tried the custom approach.  Unfortunately, the custom trigger does not appear to be working.  While the default buttons do stop being injected into the site, it appears that the trigger function is never utilized by the Atlassian JS.

Project information:

We use the React JS library, version 16.9.  We are migrating away from React Native Web currently.  We don't normally use jQuery, but for the sake of making the JIC work, I included it.

Things I have tried:

The Jira admin has given me two code snippets to try: one for HTML, and one for JavaScript.  I've noticed that, while they have the same `collectorId` value,  they apparently grab different scripts.  The HTML one generates a default button.  The JavaScript one appears to do nothing.

Some searching on the internet has led me to a jsFiddle with a working example of the JIC using a custom trigger.  (http://jsfiddle.net/gustaff_weldon/kpLvakmr/)  Substituting the JS source from the HTML code snippet causes one of the default buttons to be injected.  Substituting the JS source from the JS code snippet does nothing.  I'm not sure what else is required for it to work, but it is not a good sign to me.

Code:

This code is present in all views after authentication.  The below is a .tsx file:

import React from 'react';
import styled from 'styled-components';
import { Portal } from "@material-ui/core";
import jQuery from 'jquery';

const FeedbackButton = styled.a`
...
`;

const ELEMENT_ID = 'jira-feedback-button';
const WINDOW_VAR_NAME = 'jiraIssueCollector';

window['ATL_JQ_PAGE_PROPS'] = {
"triggerFunction": function(showCollectorDialog) {
// Requires that jQuery is available!
jQuery(`#${ELEMENT_ID}`).click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};

const JIRAIssueCollector = () => {

const setCollector = () => {
const appElement = document.querySelector('body');
if (appElement) {
const snippet = document.createElement('script');
// snippet.async = true;
snippet.type = 'text/javascript';
snippet.src = 'https://foobar.atlassian.net/...';
appElement.appendChild(snippet);
}
};

if (!window[WINDOW_VAR_NAME]) {
setCollector();
window[WINDOW_VAR_NAME] = this;
}

return (
<Portal>
<FeedbackButton href="#" id={ELEMENT_ID}>
Provide Feedback
</FeedbackButton>
</Portal>
);
};

export default JIRAIssueCollector;

 

What am I doing wrong?  Is it a problem with my code?  Or is it a legitimate issue with the downloaded script?  And is it possible to integrate the custom trigger JIC without jQuery?

 

EDIT: The HTML code snippet suddenly started working to our expectations.  I want to say that there was something we did on our end that got it to finally work, but unfortunately I don't know what it was.  This issue can be considered closed.

0 answers

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What project did you transition or start on Confluence with the shift to remote work?

It’s been great to hear from fellow users over the last few weeks about the best tips and fun moments you’ve had working on Confluence since the transition to working remote. I’d love to keep the c...

32 views 2 4
Join discussion

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