How to access soy template in javascript?

[Chong Jing Hong]

Hi, I am creating my own custom macro dialog using a soy template. I've followed this tutorial but I keep getting this error:

Uncaught (in promise) ReferenceError: Mermaid is not defined

Here is my code:

Soy Template:

{namespace Mermaid.Plugin.Custom}
{template .editor}    
<section id='mermaid-macro-dialog' class='aui-dialog2 aui-dialog2-large aui-layer' role='dialog' aria-hidden='true'>        
<header class='aui-dialog2-header'>            
<h2 class='aui-dialog2-header-main'>Mermaid Editor</h2>            
<button id='close-btn' class='aui-close-button' type='button' aria-label='close'></button>        
</header>        
<div class='aui-dialo   g2-content aui-group'>            
<div class='aui-item' style='border-right: 2px solid grey;'>                
<div style='display: block; margin-bottom: 1vh; margin-left: 1vw;'>                    
<aui-label for='theme'>Theme</aui-label>                    
<form id='theme' class='aui' style='display: inline;'>                        
<select id='select2-example2'>                            
<option value='dark'>Dark</option>                            
<option selected='selected' value='default'>Default</option>                            
<option value='forest'>Forest</option>                            
<option value='neutral'>Neutral</option>                        
</select>                    
</form>                
</div>                
<div style='display: block; margin-bottom: 1vh; margin-left: 1vw;'>                    
<aui-label for='width'>Width</aui-label>                    
<input id='width' name='width'></input>                
</div>                
<aui-label for='code' style='margin-left: 1vw;'>Code</aui-label>                
<textarea rows='12' cols='40' id='code' name='code' style='resize: none; overflow: scroll; margin: 0 auto; display: block;'></textarea>            
</div>            
<div class='aui-item'>                
<h3 style='text-align: center; margin-top: 0;'>Preview</h3>            
</div>        
</div>        
<footer class='aui-dialog2-footer'>            
<div class='aui-dialog2-footer-actions'>                
<button class='aui-button'>Preview</button>                
<button id='dialog-submit-button' class='aui-button aui-button-primary'>Submit</button>            
</div>        
</footer>    
</section>
{/template}

atlassian-plugin.xml:
<web-resource key="mermaid-plugin-resources" name="mermaid-plugin Web Resources">        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <transformation extension="js">
            <transformation key="jsI18n"/>
        </transformation>
        <!-- transform Soy templates into JS -->
        <transformation extension="soy">
            <transformer key="soyTransformer">
                <functions>com.atlassian.confluence.plugins.soy:soy-core-functions</functions>
            </transformer>
        </transformation>
        <resource type="download" name="mermaid.js" location="/js/mermaid.js" />
        <resource type="download" name="mermaid-plugin.js" location="/js/mermaid-plugin.js" />
        <resource type="download" name="custom-editor.js" location="/js/custom-editor.js" />
        <resource type="download" name="editor-soy.js" location="/soy/editor.soy" />
        <context>editor</context>
    </web-resource>

Javscript:
AJS.bind("init.rte", function() {
    var dialog = Mermaid.Plugin.Custom.editor();
    AJS.MacroBrowser.setMacroJsOverride("mermaid-macro", {
        opener: function() {
            $("body").append(dialog);
            AJS.dialog2("#mermaid-macro-dialog").show();
        }
    }) 
})

[David at David Simpson Apps · Accepted solution]

Hello, 

I've not written soy templates for some time, but when I wrote this article for Atlassian, and other times, I only ever used the namespaces with a prefix of Confluence.Templates. e.g. Confluence.Templates.SoyTutorial.

Also, looking at more recent examples in Confluence 7.10.1 source code, I see that the transformer is a little different from that from my tutorial (which was originally written in 2012).

More modern versions seem to have web resources like so:

<web-resource key="soy-resources">
  <transformation extension="soy">
    <transformer key="soyTransformer"/>
  </transformation>
  <resource type="download" name="xxx.js" location="soy/xxx.soy"/>
</web-resource>

Notice that the <functions>...</functions> bit is missing.

It looks like the documentation could be out of date.

[David at David Simpson Apps]

Also, try asking your question in https://community.developer.atlassian.com/ if this isn't the correct answer. Confusingly, developers have a separate community.

[Chong Jing Hong]

Hi David, thanks for replying.

Turns out the problem was that Soy templates require SoyDoc.

[David at David Simpson Apps]

Aha! As described in my tutorial ;)