8 answers
1 accepted
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:
- 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>
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&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
- 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&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}- Your Button will now be visible on the one page.
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:
Most of the times, the page renders without the Leave a feedback button:
Could somebody please hint on how this could be fixed?
Thank you.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.