How to modify a macro parameter in Confluence Cloud?
My goal is to create a custom dynamic macro in Confluence, where the user can select two parameters during the "macro setup". There is two dropdown, where they can select the values. The first parameter depends from the user, and the second parameter depend from the first, so I need to change them in "runtime". How can I do this?
I have added my macro to the macros menu through atlassian-connect.json:
"dynamicContentMacros": [
{
"url": "/macro",
"width": "200px",
"height": "200px",
"name": {
"value": "0Server"
},
"key": "server-dynamic-macro",
"cacheable": false,
"icon": {
"width": 80,
"height": 80,
"url": "/logo-large.png"
},
"parameters": [
{
"identifier": "server",
"name": {
"value": "Server"
},
"type": "enum",
"required": true,
"multiple": false,
"defaultValue": "Please select a server",
"values": [
"Please select a server,",
"Please select a server"
],
"hidden": false
},
{
"identifier": "drive",
"name": {
"value": "drive"
},
"type": "enum",
"required": true,
"multiple": false,
"defaultValue": "Please select a drive",
"values": [
"Please select a drive",
"Please select a drive"
],
"hidden": false
}
]
}
]
And this part is working:
But now how can I change the dropdown options list? I found out, the best, if I do it with JavaScript callbacks, but I got "Uncaught TypeError: Cannot read property 'appendChild' of null". I think it's because my code runs in a iframe, so not seeing the parent object. I think I couldn't call the document.parent, because that's already cross scripting.
The Confluence JavaScript API documentation says:
"Atlassian Connect provides a JavaScript client library called all.js.
https://connect-cdn.atl-paas.net/all.js
This library establishes the cross-domain messaging bridge with its parent."
...
"You must add the all.js script to your pages in order to establish the cross-domain messaging bridge."
I have added the all.js to my macro HTML page, but I have no idea, how can I now change the element on the parent page?
This is, how my HTML page looks like now:
<!DOCTYPE html>
<html>
<head>
<title>Sample cacheable macro</title>
<meta charset="UTF-8"/>
<script src="https://connect-cdn.atl-paas.net/all.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
// Request data from app API
AP.context.getToken(function (token) {
var addJwtHeader = function (request) {
request.setRequestHeader("Authorization", "JWT " + token);
};
var fillServers = function(server){
var select = document.getElementById("macro-param-server");
opt = document.createElement("option");
opt.value = server.toString();
opt.textContent = server.toString();
select.appendChild(opt);
}
$.ajax({
url: "data",
beforeSend: addJwtHeader
}).done(function (data) {
$("#data").text("Host: " + JSON.stringify(data, null, '\t'));
data.forEach(fillServers);
AP.resize();
});
});
});
</script>
</head>
<body>
<div class="ac-content">
<pre id="body"></pre>
<pre id="data"></pre>
</div>
</body>
</html>
(The JavaScript part is working, I have tested it with a select on the same page.)
I'm using spring-boot and Maven.
Six
1 answer
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.