Custom Macro Dialog (MacroBrowser)

Confluence Development
, , , ,
1

Hello,

I am stuck again. After days of frustrating trial and error, it seems the best to ask the community again. The problem seems quite simple but I can’t find any solution.

I want to replace the default macrobrowser with my own customized Dialog.
After researching there are two ways to achieve this:

  1. Pure javascript
  2. or SOY-Templates

The more intuitive way is the Soy Template I guess. I worked through the tutorial:
https://developer.atlassian.com/confdev/tutorials/writing-soy-templates-in-your-plugin
The example is working but unfortunately I cannot apply it to my use-case.
I switched the <context> to macro-browser of course.
The problem is that I don’t know how to replace the default MacroDialog which pops up
and additional extract the Macro Variables to insert my new Macro to the page.

So I moved on to the pure javascript method which seems a bit more ‚complex‘ because you have
to style your Dialog just with Javascript (I guess…?).
I found some older resources for this approach like this three for example:

  1. Solved: Create custom macro dialog in confluence
  2. https://bitbucket.org/resah/confluence-macro-tutorial/wiki/Home#markdown-header-insert-with-custom-gui
  3. Bitbucket
    Many of these posts (and slides) are referencing to this function to replace
    the macroBrowser with your own:
AJS.MacroBrowser.setMacroJsOverride(„MY-MACRO-NAME“, {
        opener: FUNCTION-NAME
 });

function FUNCTION-NAME {
…
}

Which seems straightforward and simple but all of the examples are using the deprecated
Dialog Element, which seems to be removed in the future.
Additional I get following Warning in the web console which approved not to use the old Dialog element anymore:

DEPRECATED JS - Dialog has been deprecated since 6.0.6 and will be removed in a future release. Use require('confluence-create-content/space-blueprint')

DEPRECATED JS - Dialog constructor has been deprecated and will be removed in a future release. Use Dialog2 instead.

(I get some other DEPRECATED JS Warnings for „Cookie“ and „StopEvent“ but I think thats a another topic.)

If you open the confluence source-code, to be exact macro-browser.js, you can see
that even the setMacroJsOverride() Function seems to be deprecated

/**
 * @Deprecated Should be removed as soon as usages in connect have been removed.
 */
MacroBrowser.setMacroJsOverride = MacroJsOverrides.put;

Nevertheless I moved on with example 3. which is using a „hybrid“-like solution. He creates dialogs and injects his SOY Template into the existing Dialog.
So I build on this one and tried to solve it with the new Dialog2 Element.
https://docs.atlassian.com/aui/latest/docs/dialog2.html
I extend my web-resource with following dependencies

<dependency>com.atlassian.auiplugin:ajs</dependency>
<dependency>com.atlassian.auiplugin:dialog2</dependency

But don’t have any clue how to use the Dialog2 Component or how to call the Dialog2 constructor at all.
The DOC on this one isn’t very helpful in my case, because it uses a example where the Dialog2 Element already exists in the DOM.
In my case (or analog the Bitbucket example from above) I have to create the Dialog2 Element before injecting my SOY Template into it.

I hope my question is reasonable. Maybe I understand something completly wrong?

1 Like
2

I have the exact same problem statement.
were you able to solve it?