Hey Community,
I got a little problem with dynamic content macros using express (SpringBoot is working fine).
Every time I insert a macro in my confluence page it first says ‘Loading add-on…’ and after a few seconds it changes to ‘Add-on is not responding. Wait or cancel?’ But the functionality of the macro is working fine.
I read that I have to include all.js, but since I’m working with the express ‘template’ from the tutorial, this is already the case.
There are also no errors visible in my web-console of chrome.
Here the code I’m using:
My atlassian-connect.json:
{
"key": "example-add-on-using-atlassian-connect-express"
, "name": "Atlassian Connect Express Add-on"
, "description": "This is an example Confluence add-on using atlassian connect express. "
, "baseUrl": "https://ca79aeec.ngrok.io"
, "authentication": {
"type": "jwt"
}
, "lifecycle": {
"installed": "/installed"
}
, "scopes": [
"READ"
, "WRITE"
, "DELETE"
]
, "modules": {
"dynamicContentMacros": [
{
"key": "living-doc-2-date-time-dynamic-content-macro-express"
, "name": {
"value": "LD2: Express Dynamic DateTime Macro"
}
, "method": "Get"
, "url": "/express/macro/dynamic/date-time"
, "description": {
"value": "Displays the current time"
}
,"conditions": [{
"condition": "user_is_logged_in"
}]
}
]
}
}
My route.js for the dynamic macro
module.exports = function (app, addon) {
// DateTime Macro: displays the current time
app.get('/express/macro/dynamic/date-time', addon.authenticate(), function(req, res) {
let hbs = require("express-hbs")
// Registers a handlebar helper to insert javascript code and to make the macro dynamic --> time will be refreshed every second
hbs.registerHelper('dateTime', function() {
return new hbs.SafeString(
"<script>" +
"setInterval(myTimer, 1000);" +
"function myTimer() {" +
"var d = new Date();" +
"document.getElementById('localDate').innerHTML = 'DATE: ' + d.toDateString();" +
"document.getElementById('localTime').innerHTML = 'TIME: ' + d.toLocaleTimeString();" +
"}" +
"</script>"
);
})
res.render('dynamic-macro-date-time')
})
}
The Handlebars:
Layout.hbs:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ap-local-base-url" content="{{localBaseUrl}}">
<title>{{title}}</title>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui.css" media="all">
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-experimental.css" media="all">
<!--[if IE 9]><link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-ie9.css" media="all"><![endif]-->
<link rel="stylesheet" href="{{furl '/css/addon.css'}}" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-soy.js" type="text/javascript"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui.js" type="text/javascript"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-datepicker.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-experimental.js"></script>
<script src="{{hostScriptUrl}}" type="text/javascript"></script>
</head>
<body class="aui-page-hybrid">
<section id="content" role="main">
{{{body}}}
</section>
<script src="{{furl '/js/addon.js'}}"></script>
</body>
</html>
The dynamic-macro-date-time.hbs:
<p id="localDate">The Local date</p>
<p id="localTime">Current Time</p>
{{dateTime}}
The `hostScriptUrl` in the `layout.hbs` contains the following: `https://livingdocconnecttesting.atlassian.net/wiki/atlassian-connect/all-debug.js` Still I get the 'Add-on is not responding' error.
Does anyone know where I did the mistake and explain it to me? And does Confluence say it's not responding but displays a functional macro at the same time?
The Project is open source on GitHub: GitHub - LivingDoc/research-atlassian-connect
Branch: greenMountain
Folder: atlassian-connect-express
→ expressPrototype