Is there an AUI for creating a context menu?

[Anja Kleebaum]

We develop a JIRA plugin that adds an issue module and an issue tab panel to the issue view. We use the JIRA version 7.11.1. The code and some screenshots of our JIRA plugin can be found here:

https://github.com/cures-hub/cures-condec-jira

We want to use a context menu in the issue module and in the issue tab panel. We currently use the jQuery context menu plugin but this conflicts with JIRA's jQuery version as we describe here:

https://community.atlassian.com/t5/Jira-questions/How-can-we-use-the-jstree-and-context-menu-jQuery-plugins-in-the/qaq-p/893933

Is it possible to reuse JIRA's context menu (e.g. accessible in the backlog)? Is there an AUI for creating context menus?

[Santwana Sarangi {Appfire} · Accepted solution]

Hi Anja,

It seems to me that you can access the div element of the tree node. According to the documentation of aui-dropdown, you have to replace the div tag with the <aui-dropdown>.

Then you can get the intended functionality. If that is not possible for you, then there is another option in aui which is either a dialog or an inline dialog. Below is the link for both the cases.

https://docs.atlassian.com/aui/7.9.5/docs/inline-dialog.html

https://docs.atlassian.com/aui/7.9.5/docs/dialog2.html

Hope it helps.

Thanks,

Santwana

[Anja Kleebaum]

Hi @Santwana Sarangi {Appfire},

thanks a lot for your help! Since we now managed to use a different jQuery version than the version currently used by JIRA, we still use the contextMenu jQuery plugin, but we will have a look on how to replace this with the dropdown menu or the dialogs in the future.

[Santwana Sarangi {Appfire} · Accepted solution]

Hi Anja,

As an alternative to Jquery context menu plugin, you can use aui-dropdown2.

Here is the link https://docs.atlassian.com/aui/7.9.5/docs/dropdown.html

Thanks,

Santwana

[Anja Kleebaum]

Hi @Santwana Sarangi {Appfire}, thanks for your reply! Here is a screenshot of our issue module:

We want to be able to use the context menu directly on these tree nodes. Is this possible with the dropdown menu?

We currently use the jQuery context menu on a separate web panel page where it doesn't conflict with JIRA's jQuery:

[Anja Kleebaum]

We added the velocity template file for the context menu:

<aui-dropdown-menu id="condec-context-menu">
    <aui-section id="condec-context-menu-section">
        <aui-item-link href="http://amazon.com">Amazon</aui-item-link>
        <aui-item-link href="http://apple.com">Apple</aui-item-link>
    </aui-section>
</aui-dropdown-menu>

We can show the AUI dropdown context menu by setting aria-hidden to false:

document.querySelector("#condec-context-menu").setAttribute('aria-hidden', 'false');

We set the position of the context menu as follows:

$("#condec-context-menu").css({
  left : posX,
  top : posY
});

How can we get the correct position in every case? In the issue module the context menu is shown very far away from the place we want it to be.

Could you please share the code of the showContextMenuAt function with us that is used for creating a context menu in the sprint board?