Custom macro dialog in confluence in editor context | Override MacroBrowser

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 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?

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

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

We currently offer our Confluence macro in the marketplace, providing support for Confluence Server versions up to 7. Excitingly, we are extending our support to Confluence Server 8 by updating dependencies. However, after this update, the Custom Macro Dialog isn’t displaying correctly; instead, <xhtml-macro> appears. To address this issue, we recommend checking for migration documents related to the Custom Macro Dialog for Confluence 8, as they can provide valuable insights and solutions for a smooth transition. Your understanding and patience as we enhance compatibility with the latest Confluence Server version are greatly appreciated.

My macroeditor.js :

AJS.bind("init.rte", function () {
	console.log("Dialog Initialize : init.rte");
	var macroName = 'prolaborate';

	try {
		//To Override default macro editor dialog.
		AJS.MacroBrowser.setMacroJsOverride('prolaborate', {
			opener: function (macro) {
                                                                 // code to render custom UI
                                                                  }
		});
	}
	catch (e) { }
});

My atlassian-plugin.xml :

<xhtml-macro name="prolaborate" class="com.prolaborate.macros.Integration" key="prolaborate-integration">
    <category name="formatting" />
    <parameters>
      <parameter name="Name" type="string">
        <option key="showNameInPlaceholder" value="false" />
        <option key="showValueInPlaceholder" value="true" />
      </parameter>
      <parameter name="Type" type="enum">
        <value name="Element" />
        <value name="Diagram" />
        <value name="Discussions" />
        <option key="showNameInPlaceholder" value="false" />
        <option key="showValueInPlaceholder" value="true" />
      </parameter>
      <parameter name="Guid" type="string">
        <option key="showValueInPlaceholder" value="false" />
      </parameter>
    </parameters>
  </xhtml-macro>
 <web-resource key="editorWebResource" name="Editor Web Resource">
    <context>editor</context>
    <dependency>com.atlassian.confluence.tinymceplugin:editor-resources</dependency>
    <resource name="images/" type="download" location="prolaboratemacro/includes/editor/images" />
    <resource type="download" name="editor.css" location="prolaboratemacro/includes/editor/css/editor.css" />
    <resource type="download" name="switchery.min.css" location="prolaboratemacro/includes/elementview/switchery-master/switchery.min.css" />
    <resource type="download" name="switchery.min.js" location="prolaboratemacro/includes/elementview/switchery-master/switchery.min.js" />
  </web-resource>
.
.
.
 <web-resource name="Resources - handle macros with JS" key="macroeditor-resources">
    <description>Prolaborate Macro related JS resources</description>
    <context>editor</context>
    <!-- transform calls to AJS.getText() inside JS files -->
    <transformation extension="js">
      <transformer key="jsI18n" />
    </transformation>
    <!-- transform Soy templates into JS -->
    <transformation extension="soy">
      <transformer key="soyTransformer">
        <functions>com.atlassian.confluence.plugins.soy:soy-core-functions</functions>
      </transformer>
    </transformation>
    <!-- JS for custom macro gui without using macro browser (for prolaborate macro) -->
    <resource name="template-soy.js" type="download" location="soytemplate/prolaboratemacro.soy" />
    <resource type="download" name="select2.min.css" location="prolaboratemacro/includes/elementview/select2/css/select2.min.css" />
    <resource type="download" name="select2.min.js" location="prolaboratemacro/includes/elementview/select2/js/select2.min.js" />
    <resource type="download" name="macroeditor.js" location="js/macroeditor.js" />
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:dialog2</dependency>
    <dependency>com.atlassian.auiplugin:tabs</dependency>
  </web-resource>