Display Custom Web Items in a Dialog from Issue Actions on Dashboard

[Brian Ho]

Following the example tutorials from the Scriptrunner fragments documentation, I am able to create an action button for my issues that displays a dialog with content from a REST API. However, when I click on the action from a dashboard's filter list, the button opens the link instead of opening in a dialog. I would like it to open as a dialog in the same way that the workflow transition buttons work. For example, for my transition 'Update CCB', the dialog opens with the screen contents:

Is there any way to do this with Scriptrunner?

Versions:

Jira v8.13.2

JIRA Service Desk Application v4.13.2

Scriptrunner: 6.15.0

[Peter-Dave Sheehan · Accepted solution]

This is caused by this bug: https://productsupport.adaptavist.com/browse/SRJIRA-2665 (created as a result of a support request I sent them).

My guess is they load some javascript resources to "listen" to the web-item click. But this resource is not available in all issue view contexts.

It's possible to work around it by creating your own javascript resource file somewhere in your script root.

It will look something like this:

(Note that I'm not an expert in javascript and I created this more than 3 years ago. I don't remember whys for much of this code. And there is probably some better ways.)

//Manual binding of the Display Dialog web item since SR-trigger doesn't work well on issue navigators
AJS.toInit(function () {
    var webItemKey = 'the-key-for-you-web-item';
    var webItemMenuText = 'Show Dialog';
    //This catches elements where the ID is not unique (such as issue navigator)
    AJS.$('body').off('click', `a.aui-list-item-link:contains('${webItemMenuText}')`).on('click', `a.aui-list-item-link:contains('${webItemMenuText}')`, function(event){
        event.preventDefault();
        var ancestorAnchor = AJS.$(this).closest("[href]");
        AJS.$.ajax({
            type: "GET",
            dataType: "html",
            url: ancestorAnchor.attr("href")
        }).done(function(data) {
            AJS.dialog2(AJS.$(data)).show();
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.warn("Failed to execute remote:", errorThrown);
        });
    });
    //this is for all other issue details
    AJS.$('body').off('click', `#${webItemKey}`).on('click', `#${webItemKey}:not(.aui-list-item-link)`, function(event){
        event.preventDefault();
        var ancestorAnchor = AJS.$(this).closest("[href]");
        AJS.$.ajax({
            type: "GET",
            dataType: "html",
            url: ancestorAnchor.attr("href")
        }).done(function(data) {
            AJS.dialog2(AJS.$(data)).show();
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.warn("Failed to execute remote:", errorThrown);
        });
    });
});

Just update the first 2 var statement with your specifics

Then you create a "install web resource" fragment for your resource file with the following contexts: atl.dashboard greenhopper-rapid-non-gadget jira.view.issue

In your Web Item fragment, change the "Do what" from display a dialog to "do nothing"

Good luck

[Brian Ho]

Hi Peter,

Thank you so much for the help. That worked like a charm.

[Pradeep A]

Hi @Brian Ho  can you share your code. Coz the above mentioned code shows me an Unexpected character error for the string literal used ` . @Peter-Dave Sheehan Can you explain me the concept of Script Root

Thanks

[Peter-Dave Sheehan]

This may help: https://docs.adaptavist.com/sr4js/6.29.0/get-help/frequently-asked-questions/script-roots-faqs

[Rodolfo So]

Hi @Brian Ho 

I would like to ask how you display the custom field in your dialog box? Can you provide sample script? Thanks`1