Custom autocomplete multi select in MacroBrowser

Christopher Klinge July 16, 2017

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

0 votes
Florian Maupas February 13, 2019

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)

});
Florian Maupas February 14, 2019

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

0 votes
Florian Maupas February 12, 2019

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,

 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events