Need help with a simple macro in confluence

Confluence Development Confluence Cloud
, ,
1

I’m testing the functionalities in confluence server and the possibility of creating a macro using spring boot.
Till now i created a simple macro connected to an endpoint and this macro is supposed to be used in wiki when i type /maps it open an editor as i specified in my atlassian connect (will include it below) and in the editor i’m serving my Front end calling an endpoint /submit-prompt where it loads the html and the js.
My front is just a button that fetches string text and display it in a text area, now upon closing the editor or clicking insert i need to take the data and place it in wiki, but i’m not able to do that.
my atlassian-connect.json

    "key": "${addon.key}",
    "name": "AI for Confluence",
    "description": "AI for Confluence",
    "baseUrl": "${addon.base-url}${server.servlet.contextPath}",
    "authentication": {
        "type": "jwt"
    },
    "lifecycle": {
        "installed": "/installed"
    },
    "scopes": [
        "READ",
        "WRITE"
    ],
    "apiMigrations": {
        "signed-install": true
    },
    "modules": {
    "dynamicContentMacros": [
      {
        "width": "200px",
        "height": "200px",
        "url": "/render-map?pageTitle={page.title}",
        "description": {
          "value": "Shows a configurable map"
        },
        "icon": {
          "width": 80,
          "height": 80,
          "url": "/maps/icon.png"
        },
        "documentation": {
          "url": "http://docs.example.com/addons/maps"
        },
        "categories": [
          "visuals"
        ],
        "outputType": "block",
        "bodyType": "none",
        "aliases": [
          "map"
        ],
        "featured": true,
        "parameters": [
          {
            "identifier": "view",
            "name": {
              "value": "Map View"
            },
            "description": {
              "value": "Allows switching between view types"
            },
            "type": "enum",
            "required": true,
            "multiple": false,
            "defaultValue": "Map",
            "values": [
              "Map",
              "Satellite"
            ],
            "hidden": false,
            "indexing": {
              "enabled": true
            }
          }
        ],
        "autoconvert": {
          "urlParameter": "url",
          "matchers": [
            {
              "pattern": "https://www.example.com/maps/{}/{}"
            },
            {
              "pattern": "https://www.example.com/map-editor/{}"
            }
          ]
        },
        "editor": {
          "url": "/submit-prompt",
          "editTitle": {
            "value": "Edit Map"
          },
          "insertTitle": {
            "value": "Insert Map"
          }
        },
        "name": {
          "value": "Maps"
        },
        "key": "dynamic-macro-example"
      }
    ]
  }
}

this is a screenshot of the macro

Screenshot 2023-09-02 152953
Screenshot 2023-09-02 1529531917×882 32.3 KB

Any help on how to achieve that ? i’m using spring boot to expose my endpoints and serve data and the atlassian-connect.json.
Thanks in advance

2

Dear @mohamadjawadAlHajjar ,

I don’t know whether I correctly understood your your question. But if you are struggling inserting the macro into the editor after pressing “Insert” you should e.g. use the following code inside the JS loaded for the custom macro editor:

AP.dialog.disableCloseOnSubmit();
AP.events.on('dialog.button.click', function(data){
  	if(data.button.name === 'submit') {
  		var macroParams = {
  				// your parameters you would like to save
  		};
		AP.confluence.saveMacro(macroParams);
		AP.confluence.closeMacroEditor();
		return true;
  	}
});

I hope this helps

Andreas

3

@andreas1 Thanks a lot for your answer, yes you got that right i’d like to insert the text (https://…) into the confluence page.
So i just insert this script into the html page that contains my front end that’s in my editor right ?
Best Regards!

4

Dear @mohamadjawadAlHajjar ,

this is not the way macros work. The link you would like to show must be returned when rendering the macro. Confluence calls /render-map in your case to render the macro. You can’t inject content directly.

As you decided to use a dynamic content macro /render-map must return an HTML file containing the link as part of that HTML. Please note that the HTML must fulfill other requirements as well - including all.js, defining ac-content etc.

Best regards

Andreas

5

@andreas1 ,
thanks again, yes i got your point but the issue here is that when i close the editor the call is not being made from confluence, no calls are arriving to my /render-map endpoint
any idea why ?
EDIT: it’s calling my render-map endpoint as it should !

6

Your last EDIT means the question has been solved?

7

@andreas1,
i’m facing this problem i probably am doing something wrong, so i managed to close the dialog and then the api call was made to my endpoint and i can access the data using getMacroData() it’s all good,
but the way the macro is set now the macro display in the wiki will be a non editable box where the user can’t interact with it like follows

image
image1372×872 20.2 KB

so i edited the atlassian-connect "bodyType": "none", to “rich-text”
and so the box changed to an editable box that a user can either add or delete content but the issue is that conflunce is no longer sending the api call to my /render-map endpoint
below is the editable box i’m talking about
image
image1398×876 23.3 KB