Show dialog with button in metadata banner

Confluence Development Confluence Server
, , ,
1

Hello,
I want to write an add-on, which provides a button in the page.metadata.banner and opens up a dialog to fill in information. After submitting this information, I want to persist the data in the database.

Currently I got the following template (SOY):

<section id="page-status-dialog" class="aui-dialog2 aui-dialog2-large" role="dialog">
    <header class="aui-dialog2-header">

        <h2 class="aui-dialog2-header-main">Seitenstatus setzen</h2>

        <a class="aui-dialog2-header-close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Schließen</span>
        </a>
    </header>
    
   <div class="aui-dialog2-content">
		<aui-label for="sync-product-single-select">Bitte Seitenstatus wählen:</aui-label>
	    <p>
	        <aui-select
	            id="sync-product-single-select"
	            name="product"
	            placeholder="Seitenstatus wählen">
	            <aui-option>Falscher Inhalt</aui-option>
	            <aui-option>Veralteter Inhalt</aui-option>
	            <aui-option>Unvollständiger Inhalt</aui-option>
	            <aui-option>Falscher Ablageort</aui-option>
	        </aui-select>
	    </p>
    </div>

    <footer class="aui-dialog2-footer">
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">OK</button>
            <button class="aui-button aui-button-link">Schließen</button>
        </div>

        <div class="aui-dialog2-footer-hint">Nach OK wird eine Mail mit dem Seitenstatus an betroffene Personen versandt.</div>
    </footer>
</section>

The following JS code was implemented so far.

AJS.toInit(function(){
    AJS.$('#page-status').click(function(e){
        e.preventDefault();
        AJS.dialog2("#page-status-dialog").show();
    });
});

And there is my problem: If I click onto the button “page-status”, which is defined as follows:

    <web-item key="page-status" name="Page Status" section="page.metadata.banner" weight="80">
            <link>/download/resources/${project.groupId}.${project.artifactId}:page-status-resources/images/pluginIcon.png</link>
        </icon>-->
        <label key="page.status.label"/>
        <tooltip key="page.status.label"/>
        <link linkId="page-status" absolute="true"/>
        <styleClass>aui-button aui-button-subtle</styleClass>
    </web-item>

I get the following error message in the console:

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined

Why do I get this error message? And how can I send the information provided INSIDE the dialog to the REST interface, which I already created?

Thank you in advance.

2

You need to expose the soy template to the page in the atlassian-plugin.xml

 <web-resource key="" name="" >
...
        <dependency >confluence.web.resources:ajs</dependency >
...
        <context >page</context >
...
        <resource type="download" name="dialog.js" location="<path>/dialog.soy" />
        <transformation extension="soy" >
            <transformer key="soyTransformer" />
        </transformation >
...
    </web-resource >

And then on the page you have to actually insert the template into the DOM.

AJS.$("selector").html(TemplateNamespace.templateName())

Only after that could your selector in ‘AJS.dialog2(“#page-status-dialog”).show();’ actually find something.

You can then send the data to the server using AJS.$.ajax

$.ajax({
                'type': 'POST',
                'url': url, ...

https://developer.atlassian.com/server/confluence/writing-soy-templates-in-your-plugin/

2 Likes