Define JavaScript in a web-resource and use in Velocity template

Confluence Development Confluence Server
#1

Hello,

I have created a macro which provides a web form. This is defined in a Velocity template. I have some supporting functions in JavaScript. I have no problems calling the JS if I include it inline with my Velocity template via . The issue is when I segregate it into it’s own file, it appears to not be visible from Velocity.

I’ve followed the instructions per the development docs https://developer.atlassian.com/confdev/confluence-plugin-guide/writing-confluence-plugins/including-javascript-and-css-resources?_ga=2.262572428.1080216140.1506788820-5703436.1498320326
yet I haven’t had any success getting this to work. I’ll also need to do the same with a CSS file shortly.

Here are some snippets
atlassian-plugin.xml

 <web-resource key="createinitiative-web-resources" name="createInitiative Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:aui-flag</dependency>
    <resource type="download" name="createInitiative.css" location="/css/createInitiative.css"/>
    <resource type="download" name="createInitiative.js" location="/js/createInitiative.js"/>
    <resource type="download" name="images/" location="/images"/>
    <resource type="velocity" name="template" location="/templates/createInitiative.vm"/>
    <context>createInitiative</context>
  </web-resource>

webForm.vm

#requireResource("com.trustvesta.plugins:createinitiative-web-resources")
#requireResource("confluence.web.resources:ajs")

#set($pagePropertiesHtml = $webFormMacroObject.getProperties())

<input id="createinitiative" class="aui" type="button" value="Create Initiative" onclick="createInitiative()" >

Created Date
<input class="aui-date-picker" id="submitdate-picker" type="date" max="2020-01-01" min="2017-01-01" />

createInitiative.js

AJS.toInit(function () {
	AJS.log("Hello World");
});

function successResponse(response, textStatus) {
	AJS.log("Success: " + response);
}

function errorResponse(xhr, textStatus, errorThrown) {
	AJS.log("Error: " + xhr + textStatus + errorThrown);
}

function createInitiative() {

	jQuery.ajax({
		type: "POST",
		contentType: "application/json",
		url: AJS.contextPath() + "/rest/jirarequest/1.0/createissue",
		data: '${pagePropertiesHtml}',
		dataType: "text",
		success: successResponse,
		error: errorResponse 
	});
}

At the very least, I’d like to get to the point where the “Hello World” shows in the browser console as the DOM loads. Can anyone suggest what I missed?

Thanks
Michael

#2

I solved the immediate problem. My fault. The #requireResource that pulled in my web-resource was incorrect. In my atlassian-plugin.xml it is defined with ${atlassian.plugin.key} and when I expanded that out, I found an extra element tacked on the end.

I’m able to run the javascript now BUT it does not see any of the Velocity variables defined in the .vm. This was not a problem when the javascript was inlined. Does anyone know how this is supposed to work?

Thanks

#3

Hi @michael.r808,

How are you trying to access the Velocity variables, before and after your changes?

Cheers,
Anne

#4

Hi @acalantog,

It is after. I was never able to access the Velocity variable directly from the JS web-resource but did work around by setting and getting meta data variables.

Here’s a snippet:

webForm.vm
#putMetadata("submitDateMeta", $webFormMacroObject.getProperty("submitdate"))

createInitiative.js
AJS.$('#submitdate-picker').val(AJS.Meta.get("submitDateMeta"));

Thanks!
Michael

1 Like