Load Scriptrunner Web-Panel after Issue Page

[Matt Whitaker]

Hi,

I have a web panel that I have created that roles data up from issues 'below it' using various JQL queries. This obviously takes some time as there are a lot of issues and data to be rolled up and then displayed. From the difference in loading time of the tickets, it is clear that it would be nice to be able to load the main issue first and then my panel, much like some of the other panels we have that are made by main venders. 

Is there any way I can achieve this in script runner using web panels or am I going to have to write a plugin? 

Thanks in advance.

[Peter-Dave Sheehan · Accepted solution]

I've never had your specific scenario or tried what I'm about to suggest, but I think maybe you could do it this way:

• Move most of your code in a rest endpoint.
• Then your web panel would just include some simple javascript to call the rest api using ajax then load a placeholder div with the html returned from the rest api.

This way the issue will load immediately and the panel will load when the rest api is done. You could show some temporary text or a spinner in the panel while waiting for the ajax call to complete.

[Matt Whitaker]

Thanks for the speedy reply,

That does make more sense than what I was trying to do. Am I approaching rolling up data in the correct way by using a JQL statement or is there a better way that would be suggested for getting ‘child issues’ as at current I didn’t see a way to traverse portfolio child issues in the API.

[Peter-Dave Sheehan]

Sorry, I haven't used Portfolio yet. So I don't know if there is a native object model that can be used to find issues using that relationship. If it was just linked issue or issue/child issues like subtasks, then I would recommend using the issueLinkManager and the subTaskManager. But I don't know the Portfolio equivalent.

[Matt Whitaker]

No worries, have already been round the loop of issue/child issue not being the same for subtasks and portfolio but that is a different discussion. Thanks for the suggestions.

[Alexander Kreß]

Hey Matt did you implement this ? Does it work ?

[Alexander Kreß]

I geht this done.

In Groovy Web Panel your Code have to look like this.

import com.atlassian.jira.issue.Issue

Issue issue = context.issue as Issue

// Erstellen des HTML-Tags

def html = """

    <button id="myButton">Klick mich</button>

    <div id="result">Hier erscheint das Ergebnis</div>

    <script>

        function textAendern() {

            document.getElementById("result").innerHTML = "Lade...";

            // Führen Sie eine asynchrone Anforderung an den Server durch, um Daten zu erhalten

            var xhr = new XMLHttpRequest();

            xhr.open("GET", "PASTEYOURLINKHERE" + '${issue}', true); // Ersetzen Sie dies durch den tatsächlichen API-Endpunkt

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4 && xhr.status === 200) {

                    var data = xhr.responseText;

                    document.getElementById("result").innerHTML = data;

                } else if (xhr.readyState === 4) {

                    document.getElementById("result").innerHTML = "Fehler beim Abrufen der Daten.";

                }

            };

            xhr.send();

        }

        document.getElementById("myButton").addEventListener("click", textAendern);

    </script>

"""

writer.write(html)

The link refers to jira rest endpoint where you have to provide your data.

For example as string with html design. Then you need the last line of code to return the value.

resultString = """

<table style="width: 100%; text-align: left;">

          <tr>

            <th>COLUMN</th>

            <th>COLUMN</th>

          </tr>

          <tr>

            <td>"""+DATAVARIABLE+"""</td>

            <td>"""+DATAVARIABLE+"""</td>

          </tr>

          <tr>

            <th>COLUMN ID</th>

            <th>COLUMN</th>

            <th>COLUMN</th>

            <th>COLUMN</th>

            <th>COLUMN</th>

          </tr>"""+DATAVARIABLE+"""

          </table>"""

}

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