Execute require js from hello world macro

Hi Team ,

I am trying to build a macro for confluence server. Where i am supposed to call a require.js function and get the response of it and display that response in iframe window on confluence page.

I have added the .js file under js directory and then put reference in atlassian-plugin.xml file but i’m not able to execute the .js function.

Could you please direct me any document which can satisfy my current requirement ?

Thanks in advance.

Hi,

does it have to be a requirejs function? Is it an exported function from somewhere else? Can you give some code? Otherwise I just wouldn’t use require.js and implemented js the old fashioned way: Including Javascript and CSS resources

@MatthiasClasen Hi, Thanks for your reply. I also tried to call a simple js function using the document link which you have shared. But looks like JS is not getting executed at all. Could you please help to share some working code which is executing js code.

Thanks

So you mean just a simple connection between atlassian-plugin.xml and a js file? Yes of course.
In the atlassian-plugin.xml, I just put this web-resource:

<web-resource name="Basic web resources" key="my-basic-web-resources">
	<dependency>com.atlassian.auiplugin:ajs</dependency>

	<resource type="download" name="example.js" location="/example.js" />

	<context>atl.general</context>
</web-resource>

So it just depends on AJS and gets loaded on the atl.general context, so simply every screen/page without admin pages. Then i added the example.js in src/main/resources with the following code:

AJS.toInit(function () {
	alert("this is a simple js execution");
});

So when I just reload a random page or view in Confluence, I get the alert.

1 Like

Hi @MatthiasClasen

Thanks for providing the code. Really appreciate you reply. I tried and it worked. Actually I’m trying to call a Javascript function which will going to return me an iframe window . That Iframe window i need to display on Macro Editor left side parameter window. Something like this .

confluence_macro

Could you please me with this ? How can i achieve it ?

One more question : When we call JS function from confluence macro then how can access that response in our macro execute method ?

Thanks

Does it have to be an iFrame? There is a function to customize the macrobrowser dialog completely if that’s what you need. So your macrobrowser dialog would look like this here:


With this kind of customization, you would lose the preview on the right side. If you just need to customize the left side, you could achieve something like this here:

Here you can see that we’ve customized all inputs on the left side. It would be easy to replace the complete left side. But what would happen to your macro parameters? They need to be saved and synced with the macro itself. I could write you a function which replaces the left side with an iFrame…

To the last question: It is the other way around… Your Macro Java code gets called (the execute method) and after that, the fronted is getting rendered. If you trigger any js function from there, you don’t have a connection to the execute method in Java. If you want to call something from the backend, you could implement a REST function which is getting called by the js function and which is then processed in the frontend.

Hi @MatthiasClasen

Thank you so much for your reply. Actually I tried to override fields parameter in AJS.MacroBrowser.setMacroJsOverride by getting the param element and appending my iframe window . But seems like it is not working. I’m getting error saying “RPC: request rejected (bad origin):” . I’m able to find what is the issue behind this. This is my js function which i’m using to override the fields parameter of macro window.

This is my hidden-parameter-field.js file code.

AJS.MacroBrowser.setMacroJsOverride(“helloworld”, {
fields: {
string: {
“iframewindow”: function (param) {
var paramDiv = AJS.$(Confluence.Templates.MacroBrowser.macroParameter());
var input = AJS.$("#macro-param-div-iframewindow", paramDiv);
var label = document.createElement(“label”);
label.innerHTML = “iframedisplay”;
label.setAttribute(“for”, “macro-param-iframedisplay”);
var frameElement = ; // Here I’m calling 1 javascript function which is returning me a complete iframe window of a page.
paramDiv.empty();
paramDiv.append(label);
paramDiv.append(frameElement);
return AJS.MacroBrowser.Field(paramDiv, input);
}
}
}
});

This is my plugin.xml

com.atlassian.auiplugin:ajs confluence.editor.actions:editor-macro-browser macro-browser myConfluenceMacro
<xhtml-macro name="helloworld" class="com.atlassian.tutorial.macro.helloworld" key='helloworld-macro'>
    <description key="helloworld.macro.desc"/>
    <parameters>
        <parameter name="iframewindow" type="string"/>
    </parameters>
</xhtml-macro>

I’m able to view the iframe in my preview section of my macro pop up window by using document.appendchild method. { var frameElement = ; // Here I’m calling 1 javascript function which is returning me a complete iframe window of a page.} But it is giving me “RPC: request rejected (bad origin):” error when i try to load same iframe window in left parameter section of macro popup view.

If you have any sample working code/document for this fuctionality . I will be happy to look into it.

Can you please refer me to any example which is implementing the Rest function as you mentioned?

Thanks

This is my plugin.xml. I have removed “<web-resource key=“myConfluenceMacro-resources” name=“myConfluenceMacro Web Resources”” this from below code As it was not getting loaded properly.

    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource type="download" name="myConfluenceMacro.css" location="/css/myConfluenceMacro.css"/>
    <resource type="download" name="hidden-parameter-field.js" location="js/hidden-parameter-field.js" />
    <resource type="download" name="images/" location="/images"/>
    <dependency>confluence.editor.actions:editor-macro-browser</dependency>
    <context>macro-browser</context>
    <context>myConfluenceMacro</context>


<xhtml-macro name="helloworld" class="com.atlassian.tutorial.macro.helloworld" key='helloworld-macro'>
    <description key="helloworld.macro.desc"/>
    <parameters>
        <parameter name="iframewindow" type="string"/>
    </parameters>
</xhtml-macro>

Hi @MatthiasClasen

I’m able to succeed in loading the iframe on the left hand side of macro edit pop up window. I’m having an js function which is returning me the required values to be passed to backend/saved on confluence page.

Currently, I resolved it by setting the value of an parameter in the js file then using beforeParamsRetrieved method I’m getting the values in backend. But I think it will not be reliable approach in case of passing multiple values back to backend . Could you please help to suggest some document / way of doing that ?

Another query …
As earlier you mentioned that I need to write a rest api function which will get called by js function for passing the param values. But here I’m not sure how can i render those values from rest api function to confluence page.

Thanks