Dialog with ScriptRunner request in same dialog

[Ulrich Huber]

Hi Community,

I created a custom dialog with ScriptRunner.

My dialog works fine and submit opens the REST endpoint (calculation + dialog) with the correct data.

At the moment the 2nd dialog is opened in full screen (without layout).

For me it would be better, the result would be shown in same dialog window where request was started.

Does anyone know how to change my code to do this?

Dialog #1 (user input):

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;

import com.atlassian.jira.config.properties.APKeys;
import com.atlassian.jira.component.ComponentAccessor;

def baseUrl = ComponentAccessor.getApplicationProperties().getString(APKeys.JIRA_BASEURL);

@BaseScript CustomEndpointDelegate delegate

showDialogProjectCategory(httpMethod: "GET", groups: ["jira-administrators"]) { 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">Projektgr&ouml;ße / Komplexit&auml;t</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"> 

<div id="container" style="width:px">

<form name="project_category_helper" class="aui" action="${baseUrl}/rest/scriptrunner/latest/custom/showDialogProjectCategoryResult">

<table>
<tr>
<td style="vertical-align: top;"><strong>Gesamtkosten (netto)</strong></td>
<td style="vertical-align: top;">
<input type="radio" class="radio" name="costs" id="costs_1" value="5" checked="checked" /> 
<label for="costs_1"> < 20.000</label><br/>
<input type="radio" class="radio" name="costs" id="costs_2" value="15" />
<label for="costs_2"> 20.000 - < 50.000</label><br/>
<input type="radio" class="radio" name="costs" id="costs_3" value="25" />
<label for="costs_3"> 50.000 - < 100.000</label><br/>
<input type="radio" class="radio" name="costs" id="costs_4" value="35" />
<label for="costs_4"> > 100.000</label>
</td>
</tr>

</table>

<button id="submit-button" class="aui-button aui-button-primary">Kategorie ermitteln</button>

</form>

</div>
</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">Bei Fragen wenden Sie sich bitte an das IT-PMO</div>
</footer>
</section>
""";

Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build();
}

Dialog #2 (result):

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

showDialogProjectCategoryResult(groups: ["jira-administrators") { MultivaluedMap queryParams ->

// get params from resonse
def costs = queryParams.getFirst("costs") as Integer;


// calculate category
def scoring = costs;
def category = "?";

// get project category
if(scoring < 30) {
category = "D";
} else if (scoring < 60) {
category = "C";
} else if (scoring < 80) {
category = "B";
} else {
category = "A";
}

// create dialog
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">Projektgr&ouml;ße / Komplexit&auml;t</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>Für Ihre Eingaben wurde eine Projekt Kategorie <strong>${category}</strong> ermittelt!</p>
<p>Bitte erfassen Sie diese in dem dafür vorgesehenen Feld</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">Bei Fragen wenden Sie sich bitte an das IT-PMO</div>
</footer>
</section>
""";

Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build();
}

As I mentioned before everything works fine, only the destination should be changed.

Any ideas how to do that?

Kind regards

Uli

[Jonny Carter]

Hey, @Ilya Stekolnikov  and @Ulrich Huber.

If I'm reading you right, you've been working with the "Dialogs (Advanced)" section on our page about Web Items. That's a good start, but what you want is a bit more advanced yet.

To do what you're describing, you're going to need some custom javascript. You could wire that up with a Web Resource, or you could possibly just embed a <script> tag in the HTML that comes from your first REST Endpoint.

HTML forms will, by default, navigate to the URL described by the action attribute. You can change that by attaching a handler function for the onClick attribute to your form's button. Some general examples (not written for Jira/Confluence) of doing that which may be helpful:

1. See the <script> tag in this answer on SO: https://stackoverflow.com/a/30680773/1524502
2. Give a read to the guide at https://simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/ for detailed steps on how to use the more modern fetch function to post form data to your custom REST Endpoint.

That's not a full working example, but should give you some idea how to get started.

[Ilya Stekolnikov]

@Jonny Carter yep - i use this guide at https://simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/ 

[Raul Pelaez _TecnoFor - Marketplace Partner_]

Do an AJAX trick: https://community.atlassian.com/t5/Marketplace-Apps-Integrations/How-to-actually-use-the-Dialog2-along-with-a-groovy-script-in/qaq-p/588141

[Ilya Stekolnikov]

@Raul Pelaez _TecnoFor - Marketplace Partner_ @Jonny Carter @Ravi Sagar _Sparxsys_  - may be can help us with this problem?

[Raul Pelaez _TecnoFor - Marketplace Partner_]

Using AJAX tricks: https://community.atlassian.com/t5/Marketplace-Apps-Integrations/How-to-actually-use-the-Dialog2-along-with-a-groovy-script-in/qaq-p/588141

;)

[Ilya Stekolnikov]

I have same question too