Scriptrunner: Custom dialog: how to create select list with search input

[Fabian]

Hello community,

I've created a script fragments "Custom Web item" with the plugin scriptrunner which runs the code and displays a dialog. So far so good. 

Now I need a selection list with search input, but I can't find the right class for it.

This is my groovy code in the rest endpoint:

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 issueKey) {

    def jiraHome  = ComponentAccessor.getComponent(JiraHome).home
    def xmlWriter = new StringWriter()
    def xml       = new MarkupBuilder(xmlWriter)  

    xml.secion(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') { xml.mkp.yield('Edit cost units') }
            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() { xml.mkp.yield 'Custom error message.' }
                    }

                    label () { xml.mkp.yield 'What would you like to do?' }
                    div(id: "checkbox", class: "field-group") {
                        div(id:"radiobtn", style: "margin-top: 5px") { 

                            input(id: "OptionWrongRequestType", type: "radio", name: "flag", value: "option1", checked: "true")
                            label (for: "OptionWrongRequestType")  { xml.mkp.yield 'Wrong topic / enquiry type' }
                            br()
                            input(id: "OptionWrongTeam", type: "radio", name: "flag", value: "option2")
                            label (for: "OptionWrongTeam")  { xml.mkp.yield 'Right topic, but another team still needs to work on it.' }
                            br()
                            input(id: "OptionWrongAssignee", type: "radio", name: "flag", value: "option3")
                            label (for: "OptionWrongAssignee")  { xml.mkp.yield 'Another member of my team has to take over.' }
                        }
                    }

                    label() { xml.mkp.yield 'Wrong topic / enquiry type' }

                    div(id:"selectionOption1", class: "field-group") {
                        select(id: "selectProject", class: "select", name: "select-P") {
                            option(value: "IT Helpdesk 1") {xml.mkp.yield("IT Helpdesk 1")}
                            option(value: "IT Helpdesk 2") {xml.mkp.yield("IT Helpdesk 2")}
                            option(value: "IT APP") {xml.mkp.yield("IT APP")}
                        }

                        select(id: "selectRequestGroup", class: "select", style: "margin-top: 8px;", name: "selectRequestGroup") {
                            option(value: "Request Group 1") {xml.mkp.yield("Request Group 1")}
                            option(value: "Request Group 2") {xml.mkp.yield("Request Group 2")}
                            option(value: "Request Group 3") {xml.mkp.yield("Request Group 3")}
                        }

                        select(id: "selectRequestName", class: "select", style: "margin-top: 8px;", name: "selectRequestName") {
                            option(value: "Request Name 1") {xml.mkp.yield("Request Name 1")}
                            option(value: "Request Name 2") {xml.mkp.yield("Request Name 2")}
                            option(value: "Request Name 3") {xml.mkp.yield("Request Name 3")}
                        }
                    }

                    div(id: "Commentfield", class: "field-group") {
                        label (for: "CommentfieldLabel") { xml.mkp.yield 'Comment' }
                        textarea(id: "CommentfieldInput", class: "text", name: "CommentfieldInput", rows: "4", cols:"50", resize: "none")
                    }

                } // </form>
             
            }

        }

        
        footer(class: "aui-dialog2-footer") {
            div(class: "aui-dialog2-footer-actions") {
                button(id: "submit", class: "aui-button aui-button-primary")  { xml.mkp.yield('Submit') }
                button(id: "dialog-close-button", class: "aui-button aui-button-link")  { xml.mkp.yield('Close') }
            }
        }

        

        // Javascript
        /**script(type:'text/javascript') {
            def scriptFile = new File("$jiraHome/scripts/Javascript/customDialog.js")
            xml.mkp.yieldUnescaped( scriptFile.getText('UTF-8'))
        }*/

    }

    return xmlWriter.toString()

}

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

}

To create the select list im using the class: "select" as you can see:

select(id: "selectProject", class: "select", name: "select-P") {... }

I tried something similar like "aui-select2" or "select2" from https://aui.atlassian.com/aui/latest/docs/auiselect2.html  but nothing seems to work.

Did i miss something?

I hope you can help me.

Thx and greetings

[PD Sheehan]

Try the following version which I mostly just cleaned up a bit.

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 issueKey) {

    def jiraHome  = ComponentAccessor.getComponent(JiraHome).home
    def xmlWriter = new StringWriter()
    def xml       = new MarkupBuilder(xmlWriter)

    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', 'Edit cost units'
            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  'What would you like to do?'
                    div(id: "checkbox", class: "field-group") {
                        div(id:"radiobtn", style: "margin-top: 5px") {

                            input id: "OptionWrongRequestType", type: "radio", name: "flag", value: "option1", checked: "true", ''
                            label for: "OptionWrongRequestType", 'Wrong topic / enquiry type'
                            br()
                            input id: "OptionWrongTeam", type: "radio", name: "flag", value: "option2", ''
                            label for: "OptionWrongTeam", 'Right topic, but another team still needs to work on it.'
                            br()
                            input id: "OptionWrongAssignee", type: "radio", name: "flag", value: "option3"
                            label for: "OptionWrongAssignee",'Another member of my team has to take over.'
                        }
                    }

                    label 'Wrong topic / enquiry type'

                    div (id:"selectionOption1", class: "field-group") {
                        select(id: "selectProject", class: "select", name: "select-P") {
                            ['IT Helpdesk 1', 'IT Helpdesk 2', 'IT APP'].each{
                                option value:it, it
                            }
                        }

                        select(id: "selectRequestGroup", class: "select", style: "margin-top: 8px;", name: "selectRequestGroup") {
                            ['Request Group 1', 'Request Group 2', 'Request Group 3'].each{
                                option value:it, it
                            }
                        }

                        select(id: "selectRequestName", class: "select", style: "margin-top: 8px;", name: "selectRequestName") {
                            ['Request Name 1', 'Request Name 2', 'Request Name 3'].each{
                                option value:it, it
                            }
                        }
                    }

                    div(id: "Commentfield", class: "field-group") {
                        label for: "CommentfieldLabel", 'Comment'
                        textarea id: "CommentfieldInput", class: "text", name: "CommentfieldInput", rows: "4", cols:"50", resize: "none", ''
                    }

                } // </form>

            }

        }


        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'
            }
        }



        // Javascript
        /**script(type:'text/javascript') {
         def scriptFile = new File("$jiraHome/scripts/Javascript/customDialog.js")
         xml.mkp.yieldUnescaped( scriptFile.getText('UTF-8'))
         }*/

    }

    return xmlWriter.toString()

}

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

}

You'll see that for single line dom elements (those without child), the simpler approach is to just output the text value as the last argument rather than use the mkp.yield method.

I also corrected a typo in the word "section" and put your options into simple array/each block.

Other than that, the "select/options" tags are appropriate for static or short lists.

If you want to use select2 styling, you have to call that in the javascript either with the same select tag, or if you need to use some advanced features a hidden input tag.

[Fabian]

i found a solution in javascript that works for me:

AJS.$(document).ready(function() {
    $("select").select2();
}