Uploaded image for project: 'Jira Software Data Center'
  1. Jira Software Data Center
  2. JSWSERVER-5517

As a JIRA plugin developer, I would like to add another tab to the issue preview panel

    • We collect Jira feedback from various sources, and we evaluate what we've collected when planning our product roadmap. To understand how this piece of feedback will be reviewed, see our Implementation of New Features Policy.

      We would like to improve integration of our plugin Structure with GreenHopper. One thing that the users ask from us frequently is "we don't see the context of a given issue on the Rapid Board" - meaning, that you can't see the issue's position in a structure without visiting the issue page.

      It would be great if GreenHopper provided an extension point that would allow us to add another tab on the issue preview panel. We would place a structure widget on that tab so the user can switch and see the structure pertaining to that issue without leaving Rapid Board.

            [JSWSERVER-5517] As a JIRA plugin developer, I would like to add another tab to the issue preview panel

            Deniz Oguz added a comment -

            Hi,
            It seems that giving "atl.gh.issue.details.tab" as web panel location does not work for jira software (JIRA 7). My plugin "Issue Reminders" was working fine, now my customers are reporting reminders are not shown on issue detail pane. I have tried myself and "reminders panel" really not shown in issue detail page of boards.
            I have also check which location it is with "Web Fragment Finder" plugin but it can't find required location.

            Deniz Oguz added a comment - Hi, It seems that giving "atl.gh.issue.details.tab" as web panel location does not work for jira software (JIRA 7). My plugin "Issue Reminders" was working fine, now my customers are reporting reminders are not shown on issue detail pane. I have tried myself and "reminders panel" really not shown in issue detail page of boards. I have also check which location it is with "Web Fragment Finder" plugin but it can't find required location.

            Thank you Shaun for this useful guide, even without an example I've been able to add my own plug-in panel and capture the GH.DetailView.update.

            But I would say that the instructions are incomplete: how to get the current selected issue from the GH.DetailView.updated event?

            Pablo Beltran added a comment - Thank you Shaun for this useful guide, even without an example I've been able to add my own plug-in panel and capture the GH.DetailView.update. But I would say that the instructions are incomplete: how to get the current selected issue from the GH.DetailView.updated event?

            Hi Shaun,

            Does the attached greenhopper-client.zip file contain the full code? I've downloaded it and it has a pom.xml only and a empty src folder...

            Thanks,
            Pablo.

            Pablo Beltran added a comment - Hi Shaun, Does the attached greenhopper-client.zip file contain the full code? I've downloaded it and it has a pom.xml only and a empty src folder... Thanks, Pablo.

            Hi Shaun,

            Awesome, thanks! We'll try it right away and include integration in the next release of the plugin.

            What the earliest GH version that has (will have) this available?

            Igor

            Igor Sereda [ALM Works] added a comment - Hi Shaun, Awesome, thanks! We'll try it right away and include integration in the next release of the plugin. What the earliest GH version that has (will have) this available? Igor

            Hi Igor,

            This is now possible. Here are instructions from bbaker@atlassian.com:

            Adding a tab to GH is done via WebPanels.

            https://developer.atlassian.com/display/JIRADEV/Web+Panel+Plugin+Module

            The following examples come from our test client plugin that we use in GH testing.

            First in atlassian-plugin.xml add your web panel into the well know section - atl.gh.issue.details.tab

               <web-panel key="greenhopper-reference-third-party-tab-1" location="atl.gh.issue.details.tab" weight="99">
            
                    <resource name="view" type="velocity" location="templates/reference-gh-issue-details-panel-1.vm" />
            
                    <context-provider class="com.atlassian.greenhopper.client.web.contextprovider.ReferencePluginContextProvider">
                        <param name="itemCount" value="4"/>
                    </context-provider>
            
                    <label key="gh.issue.panel.reference" />
                    <tooltip key="gh.issue.panel.reference.tooltip" />
                    <resource type="download" name="icon.png" location="includes/images/gun.png" />
                </web-panel>
            

            The HTML that is delivered in the web panel becomes the contents of the tab panel.

            The icon image itself should be in about 14x14 to look any good.

            In order to provide a "number" on the tab indicator itself you need to provide a ContextProvider that sets a well known variable - atl.gh.issue.details.tab.count

            public class ReferencePluginContextProvider implements ContextProvider
            {
                private Long itemCount = 4L;
            
                  public Map<String, Object> getContextMap(Map context)
                {
                    return MapBuilder.<String, Object>newBuilder()
                            .add("atl.gh.issue.details.tab.count", itemCount).toMap();
                }
            }
            

            The context map is how you can populate variables (context) to the Velocity template.

            GH will raise JavaScript a "GH.DetailView.updated" event when the details on the board change. This allows you to update the contents of the tab as the selected issue changes.

            The plugin can cause GH to reload the board if you have made changes that should be reflected on the board. You should trigger a "GH.RapidBoard.causeBoardReload" event

            Here is some sample code of bi directional JS that attaches handlers when the board details changes and can then cause it to be refreshed when a button is pressed

            AJS.$(function () {
                // the API event for saying the board is updated
                var installButtonHandlers = function() {
            
                    AJS.$('button.pulpfiction').bind('click', function () {
                        // ok cause the board to reload via another API event
                        JIRA.trigger('GH.RapidBoard.causeBoardReload');
                    });
                };
                JIRA.bind('GH.DetailView.updated', installButtonHandlers)
            });
            

            I have attached the source for our test plugin to see all this in action.

            Shaun Clowes (Inactive) added a comment - Hi Igor, This is now possible. Here are instructions from bbaker@atlassian.com : Adding a tab to GH is done via WebPanels. https://developer.atlassian.com/display/JIRADEV/Web+Panel+Plugin+Module The following examples come from our test client plugin that we use in GH testing. First in atlassian-plugin.xml add your web panel into the well know section - atl.gh.issue.details.tab <web-panel key= "greenhopper-reference-third-party-tab-1" location= "atl.gh.issue.details.tab" weight= "99" > <resource name= "view" type= "velocity" location= "templates/reference-gh-issue-details-panel-1.vm" /> <context-provider class= "com.atlassian.greenhopper.client.web.contextprovider.ReferencePluginContextProvider" > <param name= "itemCount" value= "4" /> </context-provider> <label key= "gh.issue.panel.reference" /> <tooltip key= "gh.issue.panel.reference.tooltip" /> <resource type= "download" name= "icon.png" location= "includes/images/gun.png" /> </web-panel> The HTML that is delivered in the web panel becomes the contents of the tab panel. The icon image itself should be in about 14x14 to look any good. In order to provide a "number" on the tab indicator itself you need to provide a ContextProvider that sets a well known variable - atl.gh.issue.details.tab.count public class ReferencePluginContextProvider implements ContextProvider { private Long itemCount = 4L; public Map< String , Object > getContextMap(Map context) { return MapBuilder.< String , Object >newBuilder() .add( "atl.gh.issue.details.tab.count" , itemCount).toMap(); } } The context map is how you can populate variables (context) to the Velocity template. GH will raise JavaScript a "GH.DetailView.updated" event when the details on the board change. This allows you to update the contents of the tab as the selected issue changes. The plugin can cause GH to reload the board if you have made changes that should be reflected on the board. You should trigger a "GH.RapidBoard.causeBoardReload" event Here is some sample code of bi directional JS that attaches handlers when the board details changes and can then cause it to be refreshed when a button is pressed AJS.$(function () { // the API event for saying the board is updated var installButtonHandlers = function() { AJS.$( 'button.pulpfiction' ).bind( 'click' , function () { // ok cause the board to reload via another API event JIRA.trigger( 'GH.RapidBoard.causeBoardReload' ); }); }; JIRA.bind( 'GH.DetailView.updated' , installButtonHandlers) }); I have attached the source for our test plugin to see all this in action.

              Unassigned Unassigned
              bbf762edcc79 Igor Sereda [ALM Works]
              Votes:
              5 Vote for this issue
              Watchers:
              10 Start watching this issue

                Created:
                Updated:
                Resolved: