Adding select fields to userEditor with javascript

[B_Stockwell]

I have 4 fields I'm adding to the userEditor. To get started I followed this tutorial. http://experience-aem.blogspot.com/2015/09/aem-61-touch-ui-add-new-fields-to-user-editor-and-save-to...

That works well for text inputs, but two of my fields are <select> components, one of which is multiple:

<approvers jcr:primaryType="nt:unstructured" class="save-button-enabler" fieldLabel="Approvers" mode="contains" multiple="true" name="./profile/approvers" renderReadOnly="false" sling:resourceType="/libs/granite/ui/components/foundation/form/select"> <datasource jcr:primaryType="nt:unstructured" query="{"scope":{"groupName":"newsapprovers","declaredOnly":false}, "selector":"user"}" sling:resourceType="/libs/granite/ui/components/foundation/authorizable/selectdatasource "/> </approvers>

<reassign jcr:primaryType="nt:unstructured" class="save-button-enabler" fieldLabel="Contact Reassignment" mode="contains" multiple="false" name="./profile/reassign" renderReadOnly="false" sling:resourceType="/libs/granite/ui/components/foundation/form/select"> <datasource jcr:primaryType="nt:unstructured" query="{"scope":{"groupName":"newscontacts","declaredOnly":false}, "selector":"user"}" sling:resourceType="/libs/granite/ui/components/foundation/authorizable/selectdatasource "/> </reassign>

These elements are added, but not initialized. After some searching, I found the .trigger("foundation-contentloaded"); call, which is successful--it sets up the correct gui behavior for both select boxes, and also pulls the data for the one that isn't [multiple=true] (reassign above).

However or the multiple select (approvers above), the <ol.taglist> remains empty after that trigger call (I can, however, successfully add items (bot individual or multiple) from the dropdown, which are saves successfully in the repo, but the list remain empty on reload).

I attempted to call CUI.TagList() on the <ol> but I get the following message in the console: An instance of TagList is already attached to the specified target element. Future versions of CoralUI will throw an exception at this point.

Will I have to populate this taglist manually? Or is there some js call I can make to initialize the data in the <ol>.

[B_Stockwell · Accepted solution]

For reference for people looking at this in the future, here's what I did:

• Add the class "coral-Select-Multiple" to any of the select boxes where multiple=true
• In the javascript fillAdditionalFields() function, here's my nested handler() function, populating with the data[] array is the most important part.

• function handler(data){ if(_.isEmpty(data)){ return; }    $fields.each(function(i, field){                 //handle inpurts if(field.type == "text") { name = getStringAfterLastSlash($(field).attr("name")); $(field).val(data[name]);     $(field).trigger("foundation-contentloaded"); }                 //handle selects if($(field).find("select").length) {     var el = $(field).find("span.coral-Select");     var select = el.find("select");     name = getStringAfterLastSlash($(select).attr("name"));                     //look for our multis if($(field).find("span.coral-Select-Multiple").length) { select.attr("multiple","true"); //might not be necessary... var tagList = new CUI.Select({ element:el, multiple:true});     } else { var tagList = new CUI.Select({ element:el, multiple:false}); }     tagList.setValue(data[name]); //set the data     $(field).trigger("foundation-contentloaded"); } }); }