Autocomplete and AUI fields in Blueprint plugin wizard

Marketa Dvorack1

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

• 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:

<div class="field-group">
     <label for="userField">{getText('my.blueprint.form.label.title.userField')}</label>
     <input id="userField" class="text long-field autocomplete-user" type="text" placeholder="Fill in just one user" name="userField" />
</div>
<div class="field-group">
     <label for="userMultiField">{getText('my.blueprint.form.label.title.userMultiField')}</label>
     <input id="userMultiField" class="text long-field autocomplete-multiuser" type="text" placeholder="Fill in multiple users" name="userMultiField" />
</div>
<div class="field-group">
     <label for="myduedate">{getText('my.blueprint.form.label.title.myduedate')}</label>
     <input id="myduedate" class="aui-date-picker" type="text" />
</div>
<div class="field-group">
     <label for="labelsString">{getText('my.blueprint.form.label.title.labelsString')}</label>
     <input id="labelsString" class="text select2-input long-field autocomplete-labels"  type="text" name="labelsString" />
</div>
<div class="field-group">
     <label for="page">{getText('my.blueprint.form.label.title.page')}</label>
     <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" />
</div>

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>

Sid Sethi

function postRender(e, state) {

var wizardForm = state.$container
var 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.