Adding select fields to userEditor with javascript | Community
Skip to main content
B
BenSt10
Level 4
October 16, 2015
Solved

Adding select fields to userEditor with javascript

  • October 16, 2015
  • 1 reply
  • 1161 views

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

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BenSt10

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"); } }); }
     

1 reply

B
BenSt10AuthorAccepted solution
Level 4
October 16, 2015

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"); } }); }
     
Terms & ConditionsAccessibility statement

Loading footer...