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 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.

1 answer

Hi Aaron,

 

I am doing the same thing on my material/styled component react project.

Could you please share the react component code you used to do this?  

 

Thanks,

Jason

Suggest an answer

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

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

462 views 24 9
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