Custom autocomplete multi select in MacroBrowser

Hi,

I'm currently working on a macro plugin for Confluence. As part of this, I need to write some custom autocomplete parameter fields for the MacroBrowser. I have managed to create a Select2 field with a custom AJAX call to dynamically fetch options. Selecting and saving the chosen parameters works just fine, but if the macro is edited on a later date, chosen options are not displayed in the select field. They are selected however, as they cannot be selected again and will remain set, if new options are added.

This is the code I have thus far (using labels as an example):

var jsOverrides = {
"fields" : {
"string" : function(params, options){

if (params && params.name != "labels") {
return AJS.MacroBrowser.ParameterFields["string"](params, options);
}

var paramDiv = $(Confluence.Templates.MacroBrowser.macroParameter());
var input = $("input", paramDiv);
var field = AJS.MacroBrowser.Field(paramDiv, input, options);

field.input.auiSelect2({
minimumInputLength: 1,
multiple: true,
ajax: {
url: AJS.params.baseUrl + "/labels/autocompletelabel.action",
dataType: 'json',
type: 'GET',
data: function(query) {
return {
query: query,
maxResults: 3
}
},
results: function(data, params) {

var results = [];
var matches = data.contentNameMatches;
for (var i = 0; i < matches[0].length; ++i) {
var match = matches[0][i];
results.push({
id: match.name,
text: match.name
});
}
return {
results: results
};
}
}
});

return field;
}
}
};

AJS.MacroBrowser.setMacroJsOverride("autocomplete-test", jsOverrides);

2 answers

Hi Christopher,

 

I am trying to do something very similar. To be exact, I am trying to mimic the autocomplete label behavior of the "content by label" macro. 

 

Did you figure out how to keep / display the previous label ?

I would also be interested at your macro xhtml definition :)

 

Thanks in advance,

 

In Case someone ever end up on this post, here is a working example based on @Christopher Klinge original post:

 

// bind on initialization of editor
AJS.bind("init.rte", function() {

var getParameters = function() {
var selection = AJS.Rte.getEditor().selection.getNode();
return $(selection).attr("data-macro-parameters").split("=")[1].split(",");
}

var jsOverrides = {
"fields" : {
"string" : function(params, options){

if (params && params.name != "labels") {
return AJS.MacroBrowser.ParameterFields["string"](params, options);
}

var paramDiv = $(Confluence.Templates.MacroBrowser.macroParameter());
console.log(paramDiv);
var input = $("input", paramDiv);
var field = AJS.MacroBrowser.Field(paramDiv, input, options);
auiSelect2 = input;
field.input.auiSelect2({
minimumInputLength: 1,
multiple: true,
initSelection : function (element, callback) {
var data = [];

$(getParameters()).each(function () {
data.push({id: this, text: this});
});
callback(data);
},

ajax: {
url: AJS.params.baseUrl + "/labels/autocompletelabel.action",
dataType: 'json',
type: 'GET',
data: function(query) {
return {
query: query,
maxResults: 3
}
},
results: function(data, params) {

var results = [];
var matches = data.contentNameMatches;
for (var i = 0; i < matches[0].length; ++i) {
var match = matches[0][i];
results.push({
id: match.name,
text: match.name
});
}
return {
results: results
};
}
}
});
field.input.val("change").trigger('change');

return field;
}
}
};

AJS.MacroBrowser.setMacroJsOverride("page graph relationship", jsOverrides)
AJS.MacroBrowser.setMacroJsOverride("inbound outbound table", jsOverrides)

});

There is still a bug while loading the previous labels and closing it ( it would open a tag for some reasons...)

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Feb 06, 2019 in Confluence

Try out the new editing experience

Hi team, I’m Avinoam, a product manager on Confluence Cloud, and today I’m really excited to let the Community know that all customers can now try out the new editing experience and see some of the ...

801 views 38 5
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