Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How to access soy template in javascript?

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();
}
    })
 
})

1 answer

1 accepted

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.

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

Hi David, thanks for replying.

Turns out the problem was that Soy templates require SoyDoc.

Aha! As described in my tutorial ;)

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence

🏑 Atlympic Event: Confluence

Hello Community!  Quick disclaimer: We are running a contest on Community (The Atlympics!) from July 23rd - August 8th of 2021. If you are interested in participating in this contest (prizes! ...

161 views 5 8
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you