Autocomplete and AUI fields in Blueprint plugin wizard

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

• 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 · Accepted solution]

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.

[Marketa Dvorackova]

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?

[Sid Sethi]

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.

[Marketa Dvorackova]

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.

[Deleted user]

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

[Marketa Dvorackova]

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!

[Sid Sethi]

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.