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
Community showcase
Published Nov 29, 2018 in New to Confluence

How to use Confluence Cloud for stakeholder management

Most of us don’t need much convincing that stakeholder management is important. It just makes sense that keeping everyone in-the-know on projects and assigning clearly defined roles is key to having ...

1,084 views 0 5
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