How to call JavaScript from web item link?

Qi Jiang March 26, 2018

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.

2 answers

0 votes
linoy erez November 10, 2021

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/

0 votes
Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 26, 2018

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 March 27, 2018

@Alexey Matveev

Hey Alexey,

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

Thanks

Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 27, 2018

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 March 27, 2018

@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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 27, 2018

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 March 28, 2018

@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>

Like alex likes this
Alexey Matveev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 28, 2018

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 March 28, 2018

@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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 28, 2018

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 28, 2018

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

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events