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

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.

1 answer

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.$);


Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Tuesday in Confluence

We want to see the templates you've created in Confluence!

Hi Community, Jessica here from the Confluence Product Marketing team!  July’s community challenge is all about sharing pictures  — and as an extension of our first post on what ...

474 views 19 9
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you