Autocomplete and AUI fields in Blueprint plugin wizard
Asked by Marketa Dvorackova:

\<dl\>\<dd\>

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.

![](https://support.atlassian.com/servicedesk/customershim/secure/attachment/870233/870233_multiuser.jpg)

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

![](https://support.atlassian.com/servicedesk/customershim/secure/attachment/870235/870235_user.jpg)

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

![](https://support.atlassian.com/servicedesk/customershim/secure/attachment/870234/870234_page.jpg)

* 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)

![](https://support.atlassian.com/servicedesk/customershim/secure/attachment/870232/870232_datepicker.jpg)

* 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&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&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&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&gt;&lt;div class="field-group"&gt;     &lt;label for="page"&gt;{getText('my.blueprint.form.label.title.page')}&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;&lt;/div&gt;
```

And my wizard post-render call is:

```
wizard.on('post-render.page1Id', function(e, state){	$('#myduedate').datepicker({		dateFormat : "yy-mm-dd"	});	$('#myduedate').datePicker({'overrideBrowserDefault': true});	AJS.Confluence.Binder.autocompleteUserOrGroup();        AJS.Confluence.Binder.autocompletePage();        AJS.Confluence.Binder.autocompleteLabels();});
```

Thank you for any kind suggestions!\</dd\>\</dl\>


Answers:
author: Sid Sethi
body: ```
function postRender(e, state) {var wizardForm = state.$containervar labelsField = $("#labelsString", wizardForm);        labelsField.auiSelect2(Confluence.UI.Components.LabelPicker.build({            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.

comments: author: Marketa Dvorackova
body: 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?


author: Sid Sethi
body: 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.


author: Marketa Dvorackova
body: 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](https://jira.atlassian.com/browse/CONF-34572). The single user styled in the nice way of the multi-user apparently doesn't exist, improvement filed [here](https://jira.atlassian.com/browse/CONF-34573).


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


author: Marketa Dvorackova
body: 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!


author: Sid Sethi
body: 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.


Tags: ajs

app

aui

auto-complete

blueprint

wizard