How to create a button to open the issue collector?

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

 

6 answers

1 accepted

1 vote
Steven Behnke Community Champion Oct 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&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 – 

    &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;
  • Look for the </body> tag. Please note, again, this is the END BODY tag. This is where our javascript function belongs – 

    &lt;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"&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;
  • 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}
        &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="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"&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}
  • tick Your Button will now be visible on the one page.

 

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 Behnke Community Champion Nov 19, 2015

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

0 vote
Steven Behnke Community Champion Oct 09, 2015

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

0 vote
Steven Behnke Community Champion Oct 09, 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.

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 Behnke Community Champion Oct 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*?

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 Behnke Community Champion Oct 11, 2015

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

can I hope you write something in the following days?

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

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

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jul 10, 2018 in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

902 views 23 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you