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.
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>
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.
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I want to restrict by multi-groups. What special class and js i have to use?
autocomplete-multigroups... ?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Closing with following:
.dialog-panel-body.singlePanel .aui-dropdown { width: 298px; overflow: hidden; }
.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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.