Autocomplete and AUI fields in Blueprint plugin wizard


Writing a confluence blueprint plugin I've ran into the following problems using autocomplete/aui fields within the template wizard. Specifically, I wanted to implement autocomplete fields for: a page, single user, multiuser, label, and (out of the autocomplete fields group) a datepicker.

  • multiuser works great. No problems.

  • single user is trouble - it gets the data, so the binding is ok, but it doesn't show as it should (see pic). Something is not working.

  • page again, gets data but shows in a strange manner.

  • datepicker I was only able to make work as in picture. Default, not aui styling. Not sure if the browser default override goes to post-render callback or some place else honestly. (see attached wizard function)

  • well, and the label doesn't work at all. Only as a plain text input field where if you enter a list of expressions separated by spaces, it actually adds the labels to the generated page. But no selection, suggestion.. nothing. Honestly, I don't even know, how it can be achieved, because documentation on this is empty. My autocomplete-binder guess only (in the wizard post-render function) probably doesn't even exist, but who knows. Are there docs? Sorry if I missed something, but haven't found anything out there, but a lot of guys battling this or that.

My soy items for the above mentioned are:

&lt;div class="field-group"&gt;
     &lt;label for="userField"&gt;{getText('my.blueprint.form.label.title.userField')}&lt;/label&gt;
     &lt;input id="userField" class="text long-field autocomplete-user" type="text" placeholder="Fill in just one user" name="userField" /&gt;
&lt;div class="field-group"&gt;
     &lt;label for="userMultiField"&gt;{getText('my.blueprint.form.label.title.userMultiField')}&lt;/label&gt;
     &lt;input id="userMultiField" class="text long-field autocomplete-multiuser" type="text" placeholder="Fill in multiple users" name="userMultiField" /&gt;
&lt;div class="field-group"&gt;
     &lt;label for="myduedate"&gt;{getText('my.blueprint.form.label.title.myduedate')}&lt;/label&gt;
     &lt;input id="myduedate" class="aui-date-picker" type="text" /&gt;
&lt;div class="field-group"&gt;
     &lt;label for="labelsString"&gt;{getText('my.blueprint.form.label.title.labelsString')}&lt;/label&gt;
     &lt;input id="labelsString" class="text select2-input long-field autocomplete-labels"  type="text" name="labelsString" /&gt;
&lt;div class="field-group"&gt;
     &lt;label for="page"&gt;{getText('')}&lt;/label&gt;
     &lt;input id="page" class="text long-field select2-input autocomplete-page" type="text" data-max="10" data-none-message="No results" data-template="{literal}{title}{/literal}" name="page" /&gt;

And my wizard post-render call is:

wizard.on('post-render.page1Id', function(e, state){
		dateFormat : "yy-mm-dd"
	$('#myduedate').datePicker({'overrideBrowserDefault': true});
Thank you for any kind suggestions!</dd></dl>

4 answers

1 accepted

1 vote
Accepted answer
function postRender(e, state) {

var wizardForm = state.$container
var labelsField = $("#labelsString", wizardForm);
            separator: " ",
            queryOpts: {
                spaceKey: state.wizardData.spaceKey



AJS.$("#date-picker").datePicker({overrideBrowserDefault: true});


Add this in your postRender for adding/searching Labels and the AUI Datepicker should pick it up from this.

Thank you Sid, the labels are great. Working perfectly with no problems. Thanks a lot. The date picker unfortunately not:( it still looks the same. But you know what I don't understand? When I look at the decision template, even there it is like that. Have you ever actually seen it look like it should in a wizard? I know it shouldn't make a difference but...

btw sorry for the trouble, but no idea about the single user by chance?

Did you add <dependency>com.atlassian.auiplugin:aui-date-picker</dependency> to your <web-resource> module descriptor in your atlassian-plugin.xml file? If not, this might do the trick. I'll dig in for the single user issue if you could attach a screenshot of the trouble you're going through.

Sorry for the delay. Yes, I have, it's documented as required. Got it working now thanks to some very helpful guys in atlassian support:) there is a bug on it and a workaround here. The single user styled in the nice way of the multi-user apparently doesn't exist, improvement filed here.

Did you add <dependency>com.atlassian.auiplugin:aui-date-picker</dependency> to your <web-resource> module descriptor in your atlassian-plugin.xml file? If not, this might do the trick. I'll dig in for the single user issue if you could attach a screenshot of the trouble you're going through.

Closing with following:

  • page auto-complete - no special styling, but at least adjusted the dropdown width to the width of the field with the following code added to add-on's .css:
.dialog-panel-body.singlePanel .aui-dropdown {
    width: 298px;
    overflow: hidden;
  • single user - nice styling like for the multi-user for now doesn't exist, width adjusted along with the page solution above,
  • labels auto-complete field - solved with a kind help of Sid Sethi, see above:) thanks Sid,
  • date-picker - solved with the help of support guys, in the end, even though there were some small things, basically only by adding the following into css:
.aui-datepicker-dialog {
    /* Move this over usual dialog */
    z-index: 5000;

Seems kinda weird this solution, but well...
Anyway solved:) Again thanks to all that helped!

I want to restrict by multi-groups. What special class and js i have to use?
autocomplete-multigroups... ?  

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 ...

926 views 47 7
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