Custom macro dialog: Get content of file from Javascript


I’m making a custom dialog to create/edit my Confluence macro, but I have to inject HTML code inside Javascript to display an AUI Dialog2.

My current JS code:

function getDialogHTML() {
	return " \
	<!-- Create a trigger which will be used by the JavaScript --> \
	<button id='dialog-show-button' class='aui-button'>Show dialog</button> \
	<section id='dg-macro-dialog' class='aui-dialog2 aui-dialog2-small aui-layer' role='dialog' aria-hidden='true'> \
	    <header class='aui-dialog2-header'> \
	        <h2 class='aui-dialog2-header-main'>Captain...</h2> \
	        <a class='aui-dialog2-header-close'> \
	            <span class='aui-icon aui-icon-small aui-iconfont-close-dialog'>Close</span> \
	        </a> \
	    </header> \
	    <div class='aui-dialog2-content'> \
	        <p>We've detected debris of some sort in a loose orbit.</p> \
	        <p>I suggest we beam a section aboard for analysis...</p> \
	    </div> \
	    <footer class='aui-dialog2-footer'> \
	        <div class='aui-dialog2-footer-actions'> \
	            <button id='dialog-submit-button' class='aui-button aui-button-primary'>Make it so</button> \
	        </div> \
	    </footer> \

AJS.MacroBrowser.setMacroJsOverride("dg-macro", {
	opener: function (macro) {


			contentId: Confluence.Editor.getContentId(),
			macro: {
				name: "dg-macro",
				params: {
					search: "abcd",
					placeholder: "efgh"
				defaultParameterValue: "",
				body: undefined
		}, macro);

I think you understand that I can’t keep getDialogHTML() like this, it’s definitely not maintainable.

Anyone knows a better solution?

Thanks in advance,
Quentin Bazin

I’m surprised nobody here suggested to use Soy templates, but anyway, it’s how I managed to fix my issue.

For more informations about Soy templates usage in Confluence:

Btw, always check the atlas-run logs, Soy errors may be hiding there.