How to create a button to open the issue collector?

Dan Steffen October 7, 2015

We use at the moment confluence 5.5.3 and JIRA 6.3.7 in our company and we would like to create a button on a page so that the issue collector opens.

I already found this sources:

<script type="text/javascript" src="https://myjiraserver/s/en_US-tmk2k1-1988229788/6102/4/1.4.0-m3/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=62933b0b"></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS =  {
    "triggerFunction": function(showCollectorDialog) {
        //Requries that jQuery is available! 
        jQuery("#myCustomTrigger").click(function(e) {
            e.preventDefault();
            showCollectorDialog();
        });
    }};</script>
 
 
<input type="button"  style="color:green" id="myCustomTrigger" class="button" value="Raise A Bug for ADMIN!" />

but it don't works for me. Can please someone explain me what I am doing wrong? I enabled the HTML-Macro in confluence and a simple console.log works but the Dialog don't open.

I already spend 2 days with this problem and would be for every hint very thanksful.

best regards

Dan

 

8 answers

1 accepted

4 votes
Answer accepted
Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 20, 2015

Pardon my delayed response.

I've created a few different types of Issue Collectors for use in Confluence, and I will cover the steps I used to use them. I think this covers both types of usages, so hopefully you can follow one of these sets of instructions. Then, we can attempt to discover what is wrong, since it works for me but supposedly not for you.

None of these options will work on the Confluence Cloud offering, sorry. I am not going to coverage usage with User Macros. Now, we have the following assumptions – 

  • Create a JIRA Issue Collector
  • Use a Custom Trigger instead of the built-in options for Triggers
    An example of a built-in trigger is:
    • Instead I will use a Button in the header for my example:

 

We will attempt three different scenarios with Issue Collectors – 

  • Visible within all of Confluence
  • Visible only within a single Space
  • Visible only when on a single Page

 

All of Confluence

Confluence Administrators have access to the Custom HTML section of Confluence. This allows them to inject various HTML easily in the typical locations one would need to do so. This can be applied independent of custom themes and overrides spaces automatically.

  • As a Project Administrator, configure your Issue Collector and set it to use a custom trigger. You will use the code it provides in the At end of the BODY section in Custom HTML of Confluence. 
  • As a Confluence Administrator, navigate to Confluence Administration, General Administration, Custom HTML.
  • In the At end of the HEAD section, use something like this to generate the HTML for your button – 

    <script>
    AJS.toInit(function(){
        AJS.$('.aui-header-primary .aui-nav').append('<li><a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink">Bug Report</a></li>');
    });
    </script>
  • In the At end of the BODY section, paste the content the configured Issue Collector provided – 

    <script type="text/javascript" src="https://jira.example.com/s/79b3b8767086874764c0e633d4d3f1c2-T/en_USxto4uu/64019/67/1.4.25/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&amp;collectorId=3a44c071"></script>
    <script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
    	"triggerFunction": function(showCollectorDialog) {
    		//Requires that jQuery is available!
            //Use whatever ID you used on your Button/Trigger
            //In this case, I used id="myIssueTrigger" in the Button/<a> element
            //So I must use #myIssueTrigger here
    		jQuery("#myIssueTrigger").click(function(e) {
    			e.preventDefault();
    			showCollectorDialog();
    		});
    	}};</script>
  • tick Your Button will now be visible on all pages outside of the Admin panel (custom html isn't applied in the Admin panel)

 

One Space

Spaces don't have as easily of a maintainable way of injecting HTML. Instead, we are presented with Layouts, which we can leverage for this usage. You may have to reapply changes to this when you upgrade, as custom layouts are not supported!

  • As a Project Administrator, configure your Issue Collector and set it to use a custom trigger. You will use the code it provides in the Layout section in your Space Administration area of Confluence. 
  • As a Space Administrator, click Space Tools, and select Look and Feel.
  • Select the Layouts tab.
  • Click Create Custom under the Main Layout
  • It's important to remember, we have access to all the same areas as before. We need to input our code to append a button at the end of head, and code with the javascript function at the end of body.
  • Look for the </head> tag. Please note that I specifically noted the END HEAD tag. This is where our button code belongs – 

    <script>
    AJS.toInit(function(){
        AJS.$('.aui-header-primary .aui-nav').append('<li><a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink">Bug Report</a></li>');
    });
    </script>
  • Look for the </body> tag. Please note, again, this is the END BODY tag. This is where our javascript function belongs – 

    <script type="text/javascript" src="https://jira.example.com/s/79b3b8767086874764c0e633d4d3f1c2-T/en_USxto4uu/64019/67/1.4.25/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&amp;collectorId=3a44c071"></script>
    <script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
    	"triggerFunction": function(showCollectorDialog) {
    		//Requires that jQuery is available!
            //Use whatever ID you used on your Button/Trigger
            //In this case, I used id="myIssueTrigger" in the Button/<a> element
            //So I must use #myIssueTrigger here
    		jQuery("#myIssueTrigger").click(function(e) {
    			e.preventDefault();
    			showCollectorDialog();
    		});
    	}};</script>
  • Press Save
  • tick Your Button will now be visible on all pages within the Space

 

One Page

We must use the {html} macro. This is not enabled by default and must be enabled under Add-Ons.

  • As a User, edit a page.
  • Add all the code into one macro.

    {html}
        <script>
        AJS.toInit(function(){
        AJS.$('.aui-header-primary .aui-nav').append('<li><a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink">Bug Report</a></li>');
        });
        </script>
    
        <script type="text/javascript" src="https://jira.example.com/s/79b3b8767086874764c0e633d4d3f1c2-T/en_USxto4uu/64019/67/1.4.25/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&amp;collectorId=3a44c071"></script>
        <script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
    	    "triggerFunction": function(showCollectorDialog) {
    		//Requires that jQuery is available!
            //Use whatever ID you used on your Button/Trigger
            //In this case, I used id="myIssueTrigger" in the Button/<a> element
            //So I must use #myIssueTrigger here
    		    jQuery("#myIssueTrigger").click(function(e) {
    			e.preventDefault();
    			showCollectorDialog();
    		});
    	}};</script>
    {html}
  • tick Your Button will now be visible on the one page.

 

Dan Steffen October 23, 2015

thanks for you detailed reply that helps me a lot and your explanation for the definition of a trigger in the whole confluence and one space works for me just fine. But I couldn't define a Trigger for just one page, maybe I used the wrong HTML-Macro-Plugin? I try it with the Confluence HTML Macros-Addon but this create a HTML-"Frame" in my Article and i don't find out how to use the {html}-Tags or there are just to define which part I need to copy?

Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 19, 2015

Dan, let me know if you're still having issues here. I never saw this comment.

0 votes
Stan Ry
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 17, 2019

Howdy,

Thanks for the detailed description of customizing trigger button for the Jira Issue Plugin.

I am trying to place the button inside the likes section (the #likes-section ID). I am doing it like this:

 


<script>
setTimeout(function(){
$('#likes-and-labels-container').append('<div id="feedback-section" style="margin-top: 25px;"><a href="#" id="myIssueTrigger" class="aui-button aui-button-primary">Leave a feedback</a></div>');
},80);
</script>

<script type="text/javascript" src="https://example.net/jira/s/9513b004b8a6dcfc358427f3364b533d-T/-786kzr/
76010/be09033ea7858348cd8d5cdeb793189a/2.0.27/_/download/batch/
com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/
com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?
locale=en-US&collectorId=630a5ef8"></script>

<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
jQuery("#myIssueTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};
</script>

However, this way the Leave a feedback button does not appear all the time. It seem that in some cases the button gets hidden by the commentary section.

In my theory (which, however, doesn't prove itself) the page should look like this:

chrome_2019-01-17_17-08-04.png

 

Most of the times, the page renders without the Leave a feedback button:

chrome_2019-01-17_17-08-23.png

Could somebody please hint on how this could be fixed?

Thank you.

0 votes
Sachin Ramaprasad October 18, 2018

@Steven F Behnke , I'm trying to use this on a single page. I followed exactly as you stated above , but the result on the page what i'm getting is just this --> {html} {html} I don't see any button. Can you tell me how to exactly configure this for just on a singe page ?

 

Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 18, 2018

Please consider opening NEW questions. This original question is now three years old.

To answer your question -- Enabling the HTML Macro (which requires System Administrator permissions) is REQUIRED before the Macro approach can be utilized. This is implied in the opening question -- 

I enabled the HTML-Macro in confluence and a simple console.log works but the Dialog don't open.

Janakiraman S November 29, 2018

Hi Steven,

I followed the input you have shared for adding a button into a Space existing in Confluence v5.10.8. When I save the layout, the Issue Collector works for few clicks. But later, i get a deprecated method warning in the JS (in IE, Chrome & FF) and the Issue collector stops functioning. Any ideas for a fix is welcome. 

Best Regards,

Janaki.

Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 29, 2018

Open a new question, @mention me, and include the actual text in the error.

0 votes
Jeremy Schrecengost February 26, 2016

@Steven Behnke I am looking to add an Issue Collector to my Confluence Page (single page), I am running Confluence 3.5.11 and JIRA 6.3.12.

 

The issue collector is set up for custom and I went to my confluence page and inserted the HTML macro you pasted above (replacing my url for src) 

 

{html}
    &lt;script&gt;
    AJS.toInit(function(){
    AJS.$('.aui-header-primary .aui-nav').append('&lt;li&gt;&lt;a href="#" id="myIssueTrigger" class="aui-button aui-style aui-button-primary aui-nav-imagelink"&gt;Bug Report&lt;/a&gt;&lt;/li&gt;');
    });
    &lt;/script&gt;
 
    &lt;script type="text/javascript" src="http://jira/s/0c13895773c11edccb53ae66c985466f-T/en_US83oybm/6343/12/1.4.16/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js&amp;collectorId=8f47a897"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;window.ATL_JQ_PAGE_PROPS = {
        "triggerFunction": function(showCollectorDialog) {
        //Requires that jQuery is available!
        //Use whatever ID you used on your Button/Trigger
        //In this case, I used id="myIssueTrigger" in the Button/&lt;a&gt; element
        //So I must use #myIssueTrigger here
            jQuery("#myIssueTrigger").click(function(e) {
            e.preventDefault();
            showCollectorDialog();
        });
    }};&lt;/script&gt;
{html}

After I save I see nothing on the page that is different. I have attached a photo (I had to color out the tree for this page on the left and our logo) but I am not sure where I should see this button.

 

I have tried using the method described in the wiki from Atlassian and I did not see the button either. 

Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 26, 2016

Howdy! Could you ask a separate question? Feel free to mention me there too. I'd be more than willing to help but we're going to spam all previous people on this Question if we talk here.

Edit: The new question was asked here: https://community.atlassian.com/t5/Confluence-questions/Issue-Collector-button-is-not-appearing/qaq-p/374701

0 votes
Dan Steffen October 11, 2015

I create a new namespace with the purpose when the user visited the startsite of this namespace and only this namespace the issue collector should show up.

 

Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 11, 2015

Okay. It's late here but I'll write up something more clear in the morning unless someone beats me to it.

Dan Steffen October 19, 2015

can I hope you write something in the following days?

0 votes
Dan Steffen October 11, 2015

I thanks for your reply I use a HTML Macro of confluence and put now at the end of the Startside and I get in the console the message: "iframe created" but the Issue Collector don't show up. And at the moment I have no idea why i don't work, maybe you could me help again? I would be very thanksful

Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 11, 2015

Okay, before I give a more detailed answer, I want to know what we're _really_ trying to do. Are you trying to get this to show up on *certain pages* or *all pages*?

0 votes
Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 9, 2015

In Custom HTML, I specifically put the "button" in AT THE END OF HEAD and I put the "script" in AT THE END OF BODY.

0 votes
Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 9, 2015

Where'd you put this? I just added one successfully using Confluence 5.4.4 and JIRA 6.4.3.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events