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.

1 Like

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

1 Like

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>