Autocomplete and AUI fields in Blueprint plugin wizard

Marketa Dvorackova July 23, 2014
<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:

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

4 answers

1 accepted

1 vote
Answer accepted
Sid Sethi August 6, 2014
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 August 6, 2014

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 August 8, 2014

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 August 17, 2014

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.

0 votes
Bastian Kippelt
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 15, 2014

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

0 votes
Marketa Dvorackova August 17, 2014

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!

0 votes
Sid Sethi August 8, 2014

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.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events