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
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Published 8 hours ago in Confluence

Think you know shares vs. @mentions in Confluence? Take this collab quiz.

To anyone who doubts that Atlassians are a little too obsessed with collaboration, and tools related thereto, let me describe a recent discussion we had (which took place on our internal Confluence, ...

85 views 2 4
Read article

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