Scriptrunner : How can I show a cascading select list field in a custom dialog box?

[Corey Leighton]

I am using Scriptrunner script fragments to generate a custom web item (button) that triggers a custom dialog box that has the following fields:

• Issueid (which come baked-in)
• List of applicable projects (which I filter/process and show)
• Cascading select list field, parent with only 1 child level (for the project selected above)
• Custom version field for selected project
• Maybe some other custom fields related to the selected project

From there I would have to pass the gathered info to another REST function that will do some stuff and things.  I have a working prototype that only has the project selection box and it goes on to do what I need it to do.  What I am trying to work out is how to add the other fields and have them dynamic... especially the cascading select field.  While I try to go through a crash course in the various technologies I can pick from, does anyone have any pointers or maybe some examples somewhere that I can pick over?

Right now the REST that's doing the dialog box is straight HTML... (which I pass to 

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

I have some other examples that use groovy.xml.MarkupBuilder and I know that's probably the right way to go, but I just haven't unraveled how to use it yet.

Here is where I am with using MarkupBuilder..  I haven't figured out how to get the Submit button to then call my NEXT function yet (which is a second REST endpoint)

import com.atlassian.jira.config.properties.APKeys
import com.atlassian.jira.project.Project
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import com.atlassian.jira.component.ComponentAccessor;
import groovy.transform.BaseScript
import groovy.xml.MarkupBuilder
import com.atlassian.jira.config.util.JiraHome
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
@BaseScript CustomEndpointDelegate delegate

static String getDialogContent(String issueId) {

def jiraHome = ComponentAccessor.getComponent(JiraHome).home
def xmlWriter = new StringWriter()
def xml = new MarkupBuilder(xmlWriter)
String baseUrl = ComponentAccessor.getApplicationProperties().getString(APKeys.JIRA_BASEURL)
Long targetProjectId
List<Project> supportedProjects = ComponentAccessor.projectManager.projectObjects.findAll { ["PS","FS","TO"].contains(it.key) } ?: new ArrayList<Project>()
xml.section(role: 'dialog', id: 'sr-dialog', class: 'aui-layer aui-dialog2 aui-dialog2-medium', 'data-aui-remove-on-hide': 'true') {
header(class: 'aui-dialog2-header') {
h2 class: 'aui0dialog-2-header-main', 'Project Selection'
button class: 'aui-close-button', type: 'button arial-label', ' aria-label':'close', ''
}
div(class: "aui-dialog2-content") {
div(id: "Container", style: "width:px") {
form(class: "aui") {
// Error Message.
div(id: "errormsg", class: "aui-message aui-message-error", style: "display: none") {
p 'Custom error message.'
}
label 'Select a destination project'
div (id:"selectionOption1", class: "field-group") {
select(id: "selectProject", class: "select", name: "targetProjectId") {
supportedProjects.each {
option value:it.id.toString(),it.name
}
}
}
}
}
}
footer(class: "aui-dialog2-footer") {
div(class: "aui-dialog2-footer-actions") {
button id: "submit", class: "aui-button aui-button-primary", 'Submit'
button id: "dialog-close-button", class: "aui-button aui-button-link", 'Close'
}
}
}
return xmlWriter.toString()
}

getProjectSelection(httpMethod: "GET", groups: ["jira-administrators"]) { MultivaluedMap queryParams ->
def issueId = queryParams.getFirst("issueId") as String
String dialog = getDialogContent(issueKey);
Response.ok().type(MediaType.TEXT_HTML).entity(dialog).build()
}

[PD Sheehan]

Right or wrong, my approach for doing things like this is to write a javascript file that I include in my HTML dynamically.

This javascript file includes functions to call other API and manipulate the DOM element on the custom form

Here is how you can include a scriptfile from your scriptrunner scriptroot:

xml.script(type: 'text/javascript') {
    def scriptFile = new File(jiraHome.path + 'scripts/path/to/javscript.js')
    mkp.yieldUnescaped(scriptFile.getText('UTF-8'))
}

Next, I would suggest you consult the AUI User Guide for details on how to have your form look consistent with Jira.

For your cascading select, I would recommend you look at the Select2 component. With that, when you make a selection on the top level, with a javascript onChange event binding, you adjust the configuration parameters for the lower level select2. You can make those Select2s dynamic with a custom rest api as the target to load the list of options dynamically.

It's a lot to learn, but once you can figure this out, the limit to what you can do is pretty dependent on your imagination and willpower.

[Fadoua]

@Corey Leighton 

If no one from Adaptavist gets back to you here, I will suggest to raise a ticket on their site directly as they are quick to respond.

Best of luck!

Fadoua