Web-item with a dialog

[Saida]

Good day! 

I need to add a button to the issue, available to anyone who can see the issue.

On click it should show a dialog with a text field (for ex., Label). Inserted value should be added to the Labels of the issue. 

Now I made the following - custom web-item added, endpoint created, it shows the dialog.

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 org.apache.log4j.Logger;
def log = Logger.getLogger("com.onresolve.jira.groovy");

@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>Testing a dialog button...</p>
 
 <form class="aui">
 <div class="field-group">
 <label for="text-input">Labels to add<span class="aui-icon icon-required">required</span></label>
 <input class="text" type="text" id="text-input" name="text-input" title="Label to add">
 <div class="description">Test description</div>
 </div>
 </form>
 
 </div>
 
 <footer class="aui-dialog2-footer">
 <div class="aui-dialog2-footer-actions">
 <button class="aui-button aui-button-primary">Save</button>
 <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
 </div>
 <div class="aui-dialog2-footer-hint">Test hint</div>
 </footer>
 </section>
 """

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

Now how can I get the value from  text-input  to update the issue? I'm not very familiar with html / js.

Thank you in advance. 

[Matthew Clark]

Hi Saida

I would start by creating another rest endpoint that takes 2 parameters.
Parameter 1 would be the issueKey and the 2nd parameter is the new label text.

Code this endpoint to get the issue object using the IssueManager with issueKey and then use the LabelManager to add the new Label.

For your current endpoint that displays the dialog page with an input field and buttons. You can embed an AJAX call within the HTML it returns.

You use this AJAX call to talk to the new RestEndpoint and parse in the issueKey and the text that the user has entered into the input field.

You can use standard jQuery to get the value the user has entered.

You could process the input entered by the user within the rest endpoint to split on spaces if you wanted to add multiple labels with one submit.

Here is an example of an endpoint like your example but with an ajax call to another endpoint. It just adds one label to the issue based on what the user inputs.

Custom Dialog with Input field and Save Button:

rest-endpoint-custom-dialog-single-input

When you create the web item that "Runs code and Display a Dialog" you would use a URL like this to parse in the parameters:

/rest/scriptrunner/latest/custom/showButtonDialog?issueKey=${issue.key}

Example of the Endpoint that adds the single label:

AddLabelToIssue

The URL to parse the parameters to the above is shown in the first Rest Endpoints AJAX code.

Regards

Matthew