Web Item

A web item is a button or link that appears at the location you choose.

Here are some things you can do with web items:

  • Redirect to another location

  • Invoke a script endpoint and run code, which can respond with:

    • A flag

    • A dialog

    • A redirection to another page

Examples

Google Link Example

A basic example of a web item is a link to Google at the top of the navigation bar.

  1. Fill out the web item form:
    New version

  2. Click Update to register the fragment. Go the Dashboard in a new tab, it should look like:
    New version

    You can understand what the values of the section attribute mean by reading the , or you use the section finder tool.


Clicking the link should take you to Google. Experiment with the Weight field - try setting it to 1. When you refresh the page you should find that your link is now the left-most one.

So far, so easy, but not very useful.

Next we’ll try to add a link to

Create a new web item or change the values to the following:

New version

New version

Note that the URL is processed with velocity before rendering. The variables you can use depend on the context of the Web Item.


If you don’t change the key, the module from the first part of the tutorial will be overwritten.


Conditions

The condition is used to define whether the link should be shown or not, and it can use anything available in its context, plus details of the current user.


Conditions must be written defensively. What is available in the context or jiraHelper map depends on the particular web section, and the page that it’s viewed on.

As well as using a script, you can use a concrete class that implements Condition. Why would you want to do this? Because you may wish to extend your own existing Condition, or one provided by the application.

Dialogs (Advanced)

There is some support for showing dialogs, although if you require complex interactions you will need to write some javascript.

To display a dialog when the user clicks a web-item, select the Run code and display a dialog option. The endpoint needs to return HTML for an AUI dialog2. The following REST endpoint code displays a dialog when clicked:

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate import groovy.transform.BaseScript import javax.ws.rs.core.MediaType import javax.ws.rs.core.MultivaluedMap import javax.ws.rs.core.Response @BaseScript CustomEndpointDelegate delegate showDialog { MultivaluedMap queryParams -> // get a reference to the current page... // def page = getPage(queryParams) def dialog = """<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" data-aui-remove-on-hide="true"> <header class="aui-dialog2-header"> <h2 class="aui-dialog2-header-main">Some dialog</h2> <a class="aui-dialog2-header-close"> <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span> </a> </header> <div class="aui-dialog2-content"> <p>This is a dialog...</p> </div> <footer class="aui-dialog2-footer"> <div class="aui-dialog2-footer-actions"> <button id="dialog-close-button" class="aui-button aui-button-link">Close</button> </div> <div class="aui-dialog2-footer-hint">Some hint here if you like</div> </footer> </section> """ Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build() }

The button with the ID dialog-close-button will be automatically wired to close when clicked if you use a dialog ID of sr-dialog. If you require more complex interactions you should require some javascript and wire the elements, for example:

(function ($) { $(function () { AJS.dialog2.on("show", function (e) { var targetId = e.target.id; if (targetId == "my-own-dialog") { var someDialog = AJS.dialog2(e.target); $(e.target).find("#dialog-close-button").click(function (e) { e.preventDefault(); someDialog.hide(); someDialog.remove(); }); // etc } }); }); })(AJS.$);

Removing the dialog from the DOM when the dialog is hidden (for example when pressing the ESC key) is controlled by the data-aui-remove-on-hide attribute. Removing this attribute will hide the dialog rather than remove it when the dialog is hidden. In this case you will need to handle re-showing the dialog in your JavaScript code, the web item trigger will re-render a completely new dialog for you.

You can include your additional dialog with a web resource fragment.

On clicking the link the dialog will display:

Redirects

Sometimes you want to run some code and then redirect to another page, or even the same page after updating it. In that case, just return a redirect. The following example adds a label to the current page/issue and then refreshes it, by redirecting to the same page:


Make sure to select Navigate to a link as the intention setting.

Further examples

On this page