Adding a dropdown to an agile board

In this tutorial, you will add a new dropdown to your Jira Software Data Center app. This dropdown will appear in the top right corner of an Agile board, next to the Board dropdown. This is done via a plugin point (added in Jira Agile 6.6.50).

To add this new dropdown, you will be creating a new web-section. The location of the web-section will be jira.agile.board.tools.  You will then add a web-item or web-panel inside the web-section. That's it! See the screenshot below to see what it looks like.

Screenshot: Example web-section with a web-panel in jira.agile.board.tools.

Step 1. Create a web-section in your plugin.xml

Your web-section should look similar to this example:

1
2
<web-section location="jira.agile.board.tools" key="my.custom-board-tool-section" weight="10"> 
    <label key="gh.board.tools.reference.button"/> 
    <condition class="com.atlassian.greenhopper.client.web.condition.BoardModeCondition"> 
        <param name="mode">work</param> 
    </condition> 
</web-section>

Step 2. Add a web panel, which will be placed in your new web-section

Your web-panel should look similar to this example:

1
2
<web-panel key="board-tools-webpanel" location="my.custom-board-tool-section" weight="100">
    <resource name="view" type="velocity" location="templates/board-tools-webpanel.vm" />
    <context-provider class="com.atlassian.jira.plugin.webfragment.contextproviders.DefaultVelocityContextProvider" />
</web-panel>

Step 3. Create a velocity template that will be rendered inside the web-panel

Three context parameters are available in the template. These are $board.id, $board.type, $board.screen.

The mode parameter is an enumeration with the following possible values:

• plan, which is tied to the Backlog page

• work, which is tied to Active Sprints page

• report, which is tied to the Reports page

1
2
<div> We are viewing a board with id $board.id in $board.screen mode. </div>

Context parameters can also be used in web-item links, as shown below:

1
2
<web-item section="my.custom-board-tool-section" key="my-custom-web-item" weight="10">
    <label key="gh.rapid.operations.configure"/>
    <link>/secure/RapidView.jspa?rapidView=${board.id}</link>
</web-item>

(Optional) Add conditions

You can add a condition so that the web-section is only displayed if the board is in a specific mode. The following code shows an example where the web-section only displays on the Active Sprints/Kanban board. See the screenshot below for an example of this.

Note, the possible values for the mode parameter are plan, work and report.

1
2
<condition class="com.atlassian.greenhopper.client.web.condition.BoardModeCondition">
    <param name="mode">work</param>
</condition>

Screenshot: Active sprints view with a dropdown provided by a plugin

 

Congratulations! You've just added a dropdown to an Agile board in your Connect app.