How to make a parameter a label picker in the Macro Browser

[Scott Selberg]

So, I've been trying to have one of the macro browser parameter fields work like a label picker.  I'm at the point where it's functional; however, for the labels that were already saved in the macro when the remove 'x' is clicked, it not only removes the label but also opens a new page.

So, how do I do this correctly?

<?xml version="1.0" encoding="UTF-8"?>
<module-container>
   <!-- add our i18n resource -->
   <resource type="i18n" name="faq" location="/com/keysight/include-content/i18n/faq"/>
   <web-resource key="faq-macro-browser-resources" name="Resources for the faq macro in the editor.">
       <resource type="download" name="faq-macro-browser.js" location="js/faq-macro-browser.js" />
       <dependency>confluence.editor.actions:editor-macro-browser</dependency>
       <context>macro-browser</context>
   </web-resource>
 
   <xhtml-macro name="faq" key="faq" 
                class="com.keysight.include.content.macros.Faq"
                icon="/download/resources/com.keysight.include-content:include-content-resources/images/keysight-logo-80x80.png">
      <category name="confluence-content" />
      <parameters>
          <parameter name="labels"                      type="string"/>
          <parameter name="spaceKeys"                   type="spacekey"/>
          <parameter name="page"                        type="confluence-content"/>
          <parameter name="renderStyle" default="Expand"  type="enum">
              <value name="Expand"/>
              <value name="Link"/>
              <value name="Popup"/>
          </parameter>
          <parameter name="renderContent" default="Page"  type="enum">
              <value name="First Excerpt"/>
              <value name="First Shared Block"/>
              <value name="Page"/>
          </parameter>
          <parameter name="popupTitle"                    type="string"/>
          <parameter name="andLabels"                     type="boolean"/>
          <parameter name="includeDecendants"             type="boolean"/>
          <parameter name="includeSpace"                  type="boolean"/>
          <parameter name="includeLastModificationDate"   type="boolean"/>
          <parameter name="includeLastModificationAuthor" type="boolean"/>
          <parameter name="includeLabels"                 type="boolean"/>
          <parameter name="includeLikes"                  type="boolean"/>
      </parameters>
   </xhtml-macro>
</module-container>

(function($) {
    var FaqMacroConfig = function() {};
    FaqMacroConfig.prototype.beforeParamsSet = function( params, inserting ){
       var labels = params.labels.split(",");
       $("div.select2-container", $("#macro-param-div-labels")).auiSelect2("val", labels);
       return params;
    };

    FaqMacroConfig.prototype.fields = {
        "string" : {
            "labels" : function(param, options) {
               options = options || {};
               var paramDiv = $(Confluence.Templates.MacroBrowser.macroParameter());
               var input = $("input", paramDiv);
               if (param.required) {
                   input.keyup(MacroBrowser.processRequiredParameters);
               }
               input.auiSelect2(Confluence.UI.Components.LabelPicker.build({
                       separator: ",",
               }));
               return AJS.MacroBrowser.Field(paramDiv, input, options);
            }
        }
    };
    AJS.MacroBrowser.Macros["faq"] = new FaqMacroConfig();
})(AJS.$);

What I have noticed is that without the FaqMacroConfig.prototype.beforeParamsSet call, the values saved into the macro content don't show up.  I did try to bind an onclick method to the anchor for the values and disabled the default behavior and propagation; however, when clicked the anchor still opened a new tab.

[Scott Selberg]

OK, so I think I figured it out.

If you insert the known labels in FaqMacroConfig.prototype.beforeParamsSet, then when the MacroBrowser window is created it will bind a handler to the "a" tag instructing the browser to open a new window.  If you insert the labels in FaqMacroConfig.prototype.beforeParamsRetrieved, then they are inserted after the "a" binding operation happens and the undesired behavior goes away.

(function($) {
    var FaqMacroConfig = function() {};
    
    // this is used to insert the pre-defined values in the macro
    // into the auiSelect2 widget.
    FaqMacroConfig.prototype.beforeParamsRetrieved = function( params ){
        if( params.labels != null ){
            $("div.select2-container", $("#macro-param-div-labels")).auiSelect2("val", params.labels.split(",") );
        }
        return params;
    };
    FaqMacroConfig.prototype.fields = {
        "string" : {
            "labels" : function(param, options) {
               options = options || {};
               var paramDiv = $(Confluence.Templates.MacroBrowser.macroParameter());
               var input = $("input", paramDiv);
               if (param.required) {
                   input.keyup(MacroBrowser.processRequiredParameters);
               }
               input.auiSelect2(Confluence.UI.Components.LabelPicker.build({
                       separator: ",",
               }));
               return AJS.MacroBrowser.Field(paramDiv, input, options);
            }
        }
    };
    AJS.MacroBrowser.Macros["faq"] = new FaqMacroConfig();
})(AJS.$);