Custom macro dialog in confluence in editor context | Override MacroBrowser

macrobrowser
dialog
macro
confluence-developers
confluence-server

#1

I’m new to Confluence dev, and I’m trying to create a macro such that I need to show custom UI on editor context instead of Confluence’s MacroBrowser taking some params and operating on them.

I need to open a custom dialog, where I essentially want to render an Iframe and take user input in that Iframe.

I checked https://www.slideshare.net/GoAtlassian/pimp-my-confluence-plugin-atlascamp-2011 but it uses AUI dialog(which is being deprecated) in AJS.MacroBrowser.setMacroJsOverride handler function to create a dialog.

3 things:
-Can I use the same approach to open dialog, since dialog API is getting deprecated and dialog2 seems to not come with a contructor as such? If not, please suggest how can I open a custom dialog?
-How can I render an Iframe in dialog2/dialog API? any reference will be helpful
-Can I override the macrobrowser and show contents instead loaded from a velocity template, where it will be more easy to render an iframe?


#2

@Joe Clark or @nic or @aragot, please help if you have context on this.


#3

Hi Farhat,

AUI Dialog is deprecated, but as you’ve seen, Dialog2 is available.

Can I use the same approach to open dialog, since dialog API is getting deprecated and dialog2 seems to not come with a contructor as such? If not, please suggest how can I open a custom dialog?

Yes, I think so, we use the following code in AJS.MacroBrowser.setMacroJsOverride in Requirement Yogi:


    AJS.MacroBrowser.setMacroJsOverride('mymacroname', {
        opener: function (macro) {
                    // ... (I elude most of the non-interesting code here) ...
                    // PlaySQL.Requirements.Rte.insertionOptionsInRte() is our SOY template, it's a function which returns an HTML string starting with <section id="ry-insertion-options-dialog" class="aui-dialog2...>
                    $("#ry-insertion-options-dialog").remove();
                    $("body").append(PlaySQL.Requirements.Rte.insertionOptionsInRte({
                        prefix: prefix,
                        number: number,
                        numberPadding: numberPadding,
                        quantity: nodes.length,
                        isSeeminglyNumbered: isSeeminglyNumbered,
                        firstExample: nodes[0][2]
                    }));
                    AJS.dialog2("#ry-insertion-options-dialog").show();

                    // ... and once the user clicks "Insert", our code to insert the macro is:
                    tinymce.confluence.MacroUtils.insertMacro({
                        contentId: Confluence.Editor.getContentId(),
                        macro: {
                            name: "mymacroname",
                            params: { amacroparameter: "a value" },
                            defaultParameterValue: "",
                            body: undefined
                        }
                    }, macro);

How can I render an Iframe in dialog2/dialog API? any reference will be helpful

I have never tried, but it seems possible by using an iframe inside the Dialog2, in the the SOY template above. Are you sure you want to display an iframe?

Can I override the macrobrowser and show contents instead loaded from a velocity template, where it will be more easy to render an iframe?

I think that’s what is being done in the soy template above: The soy template contains a Dialog2, which contains custom code. If your problem is that your code is in a VM template, then you’d better transform it to SOY template, because it’s possible to render a SOY template on both the Java and JS side, but it’s not possible to render a .vm template on the JS side.

Best regards,
Adrien