I’m a new intern at my company trying to learn how to write macros for Confluence Cloud so I was following the guide here: https://developer.atlassian.com/cloud/confluence/lesson-2-rise-of-the-macros/
I’ve already had issues with the first lesson before this one because the tutorial specifically tries to get you to download ngrok 2 even though it doesn’t work anymore.
I’m able to get the macro to show up when I go to edit a page but I’m having trouble setting up the route to the .hbs file (or maybe having the hbs file to load?). As a result, the preview text does not work and any steps past that point don’t work…
This is my app descriptor in atlassian-connect.json
:
{
"key": "my-app",
"name": "My app",
"description": "My very first app",
"baseUrl": "{{localBaseUrl}}",
"authentication": {
"type": "jwt"
},
"lifecycle": {
"installed": "/installed"
},
"scopes": [
"READ"
],
"modules": {
"generalPages": [
{
"key": "hello-world-page-jira",
"location": "system.top.navigation.bar",
"name": {
"value": "Hello World"
},
"url": "/hello-world",
"conditions": [{
"condition": "user_is_logged_in"
}]
},
{
"key": "hello-world-page-confluence",
"location": "system.header/left",
"name": {
"value": "Hello World"
},
"url": "/hello-world",
"conditions": [{
"condition": "user_is_logged_in"
}]
}
],
"staticContentMacros": [{
"url": "/v3/backgroundColor?macroId={macro.id}&color={color}&userKey={user.key}&pageId={page.id}&pageVersion={page.version}",
"description": {
"value": "Allow users to add a background color around selected content."
},
"documentation": {
"url" : "http://www.google.com"
},
"categories": ["formatting"],
"outputType": "inline",
"bodyType": "rich-text",
"name": {
"value": "Background Colour (Connect)"
},
"key": "bg-color-macro",
"parameters": [{
"identifier": "color",
"name": {
"value": "Color"
},
"type": "string",
"required": true,
"multiple": false
}]
}]
}
}
This is my current /routes/index.js
:
export default function routes(app, addon) {
// Redirect root path to /atlassian-connect.json,
// which will be served by atlassian-connect-express.
app.get('/', (req, res) => {
res.redirect('/atlassian-connect.json');
});
// This is an example route used by "generalPages" module (see atlassian-connect.json).
// Verify that the incoming request is authenticated with Atlassian Connect.
app.get('/hello-world', addon.authenticate(), (req, res) => {
// Rendering a template is easy; the render method takes two params:
// name of template and a json object to pass the context in.
res.render('hello-world', {
title: 'Atlassian Connect'
//issueId: req.query['issueId']
});
});
// Add additional route handlers here...
// Render the background-color macro.
app.get('/v3/backgroundColor', addon.authenticate(), (req, res) => {
// Tell the app to send back the 'background-color' view as
// a HTTP response.
res.render('background-color', {});
});
}
This is my current views/background-color.hbs
which is not rendering at all:
{{!< layout}}
{{!--
If we have received a macro body, render it.
Otherwise, show a preview screen/message.
--}}
<div style="background-color: {{{color}}};">
{{#if body}}
{{{body}}}
{{else}}
Here is a preview of your screen!
{{/if}}
</div>