Following Confluence Cloud Background Color Tutorial and Route Not Working

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>

@aagrawal2 or @rwhitbeck can you help out our intern, @EmekaMbazor? :slight_smile:

2 Likes

Do you have the power to delete this post? I misunderstood my project goals and realized that writing scripts with scriptrunner is a better way to go about it.