How to call JavaScript from web item link?

[Qi Jiang]

I followed online doc added a hyperlink on Jira navigation menu. I am wonder is there any way I can add a onmouseover Event on this hyper link.

[linoy erez]

Hey Qi,

I think the following link could be more helpful for your better understanding

https://mraddon.blog/2017/03/29/jira-scriptrunner-rest-endpoint-web-fragment-example/

[Alexey Matveev]

You would need to add a web resource in ScriptRunner with your Java Script. In your Java Script you would search for the required web item and make changes to the web item (add the onmouseover Event).

[Qi Jiang]

@Alexey Matveev

Hey Alexey,

Could you provide me with detail steps on how to do that? 

Thanks

[Alexey Matveev]

1. Create web item

https://scriptrunner.adaptavist.com/4.3.9/jira/fragments/WebItem.html

2. Write your javascript file.

you have to wait until the document is ready and then to look for the web item and add your code.

You should read a manul about Jquery.

3. add the javascript file as a web resource

https://scriptrunner.adaptavist.com/4.3.1/jira/fragments/WebResource.html

[Qi Jiang]

@Alexey Matveev 

Is there jira build in  tooltip function I can use?  I am looking for tooltip effect, like when we mouseover to Jira navi menu -> Projects, it popup "View recent jira project".

And let's way I would like to add a button on the navi area, with a tooltip option. After I choose custom web item, what I need to set in "Condition" and "Do what" input box?

[Alexey Matveev]

You can find how to make a button here

https://docs.atlassian.com/aui/7.8.0/docs/buttons.html

You can find to make a tooltip here:

https://docs.atlassian.com/aui/7.8.0/docs/tooltips.html

You set your condition, when your web item should be visible, in the Condition part. in the Do what part, if you want to apply java script, then you should use "Do nothing - you will use java script to bind the action".

[Qi Jiang]

@Alexey Matveev

Hi Alexey,

Thanks for reply, I need some more help on tooltip:

So I create a custom web item,

key: link-to-google

Menu text: Google

Condition:

Do What: Do nothing - you will use javascript to bind an action

Link: No entry

Where and how to add js and html as you mentioned in step 2? In Condition?

Could you give me a full example? Thanks

<a id="simple-tooltip" href="http://google.com/" title="This is a simple tooltip">tooltip</a>

<script>AJS.$("#simple-tooltip").tooltip();</script>

[Alexey Matveev]

I gave you a link. You can find full explanation there

  https://scriptrunner.adaptavist.com/4.3.1/jira/fragments/WebResource.html

Instead of css file put your js file there. If you are not sure about the context, then choose jira.general.

[Qi Jiang]

@Alexey Matveev

Alexey I am confused now. So from previous reply, I can use:

<a id="simple-tooltip" href="http://google.com/" title="This is a simple tooltip">tooltip</a>

<script>AJS.$("#simple-tooltip").tooltip();</script>

Which is from AUI to achieve tooltip.

If I did create a custom item, then key is  link-to-google. Where I should save those html and js code above? I did read that doc before, which does not help me that much. If you can give me detail steps will help out of this.

[Alexey Matveev]

First of all you should see your web item in Jira, push F12 and see its id.

Then you need to write your java script file so that it looks for the button and add tooltip functionality.

For example if you want to add a custom function for onclick functionality, it would wirte something like this:

AJS.$("#yourbuttonid").onclick(function () {})

For tooltips you need to figure out yourself. And your script must be executed on document load. For example like this

<script>

(function ($) {

AJS.$("#yourbuttonid").onclick(function () {})

})(AJS.$);

</script>

Kinldy read info on jquery.

[Alexey Matveev]

You do not have to write any html code. You must change html in your java script file