Jira Plugin Dialog2 Velocity Template

Jira Development Jira Server
,
#1

Hi!

I would like to write a Jira Plugin which opens a DIalog2.
Unfortunately I dont know how to use the JS-Code with the Velocity Template holding the HTML Code for the Dialog. The Dialog should be opened from a link within a Tabpanel.

I found this article
https://developer.atlassian.com/server/jira/platform/displaying-content-in-a-dialog-in-jira/
but it is using a Webaction and an Webitem instead of a link.

Any hints on how to accomplish using a Dialog2 with a Velocity template would be greatly appreciated!

Regards,
Hans

#2

Hello @computerpraxis

can you share some code on how your Tabpanel looks like?

I am able to open a Dialog2 like this in my use case(It is not the same as yours but it might still help):

My Velocity template looks like this:

// button for firing the dialog that is in the table(not necessary, but this is only how I use it)
<td id="dialog">
        <a href="#" class="aui-button aui-button-primary some-dialog-button">Dialog</a>
</td>

// the dialog:
<section id="my-view-dialog" class="aui-dialog2 aui-dialog2-medium aui-layer"
         role="dialog" aria-hidden="true">
    <header class="aui-dialog2-header">
        <h2 class="aui-dialog2-header-main">Some details</h2>
        <h3 class="aui-dialog2-header-main something-view-template-id"></h3>
    </header>
    <div class="aui-dialog2-content">
        <pre class="something-view-template-content">Hmmm... something went wrong.</pre>
    </div>
    <footer class="aui-dialog2-footer">
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">Close</button>
        </div>
    </footer>
</section>

And jQuery:

    jQuery('.some-dialog-button').click(function (e) {
        const self = jQuery(this);
        AJS.$(".something-view-template-id").html("ID: " + self.data("id"));
        AJS.$("H2.aui-dialog2-header-main").html("INFO")
        AJS.$(".something-view-template-content").text("Your content here");
        AJS.$("#dialog-submit-button").on('click', function (event) {
            event.preventDefault();
            AJS.dialog2("#my-view-dialog").hide();
        });
        AJS.dialog2("#my-view-dialog").show();
        return false;
    });
#3

Hi!
Thank You for Your reply !

My Tabpanel just has one .vm file, which has a link

MyText

How do You load the Dialog velocity template from within the plugin ?

regards,
Hans

#4

Assuming that you are providing the Dialog 2 as a resource to your .VM it is then enough once you add a section.

If that is not the case, you can include a Web Resource first in your atlassian-plugin.xm like this:

<web-resource key="my-resources" name="my Web Resources">
    <dependency>com.atlassian.auiplugin:dialog2</dependency> // see the dialog 2
    <dependency>com.atlassian.auiplugin:aui-table-sortable</dependency> // you can include other dependencies like this
    <resource type="download" name="my.js" location="/js/my.js"/>
    <resource type="download" name="images/" location="/images"/>
    <resource type="download" name="my.css" location="/css/template-inventory.css"/>
    <context>myContext</context>
</web-resource>

Then on your .VM:

<head>
    $webResourceManager.requireResourcesForContext("myContext")
</head>

After this you can create a section similar to the example above

#5

Hi!

Can You tell Me how Your velocity template gets loaded without a Webwork Action ?

Regards,
Hans

#6

I am not sure on how to answer your question. But I have a servlet definded in my atlassian-plugin.xml
in this servlet section I point to the Java class which then renders the velocity for me.

Like this:
atlassian-plugin.xml

 <servlet name="My Servlet"
             key="some-key-for-your-servlet"
             class="class.to.your.servlet"
        <description key="your.servlet.description"/>
        <url-pattern>/your/servlet<url-pattern>
</servlet>

public class SomeServlet extends HttpServlet {

    private static final String YOURTEMPLATE = "templates/your.vm";
    private static final String TEMPLATES_KEY = "templates";
    private final TemplateRenderer templateRenderer;


    @Inject
    public SomeServlet (@ComponentImport TemplateRenderer templateRenderer,) {
        this.templateRenderer = templateRenderer;
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

       final Map<String, Object> context = new HashMap<>();
       final String TYPE_JSON_UTF_8 = "application/json; charset=utf-8";
       final String TYPE_HTML_UTF_8 = "text/html; charset=utf-8";

       resp.setContentType(TYPE_HTML_UTF_8);
       context.put(TEMPLATES_KEY, templates);
       templateRenderer.render(YOURTEMPLATE , context, resp.getWriter());
    }
}

I hope this helps.

#7

Hi!

Thank You for Your explanations!

I need to understand the logic of the process to be able to incorporate it into my plugin.

So instead of a webwork Action You use a servlet.

When do You call the servlet so the DIalog2 HTML code will be available ?

And also Where do You call it, from JS or somewhere else ?

Thanx & regards,
Hans

#8

The servlet basically provides you your own URL for your plugin. And since your servlet is Extending HttpServlet from Java, it can also do everything you would expect it to. Like the usual web requests for example.

When do You call the servlet so the DIalog2 HTML code will be available ?
And also Where do You call it, from JS or somewhere else ?

I call the servlet by opening my plugin on the UI(Look at Web Item for this), you can place your servlet in different places, mine is under System Apps where only a system administrator can access it. Once I click on the plugin the servlet opens and the doGet() method from the servlet gets called, thus loading the defined .vm’s for example.

#9

Hi Taylan!

Thanx for Your hints !

Regards,
Hans

1 Like