< Return to Feed
Scott Reinhardt
05.25.2017

ACS Common Node Store Multifield with a Tabbed Panel Not Saving Fields

We encountered a problem in Adobe Experience Manager (AEM) where the ACS Common Node Store Multifield with a tabbed panel was not saving fields inside the tabbed panel.  The fields outside of the tabbed panel were saving correctly.


AEM tabbed panel


Figure 1: AEM tabbed panel

Steps:

  • Opened the touchui-widgets composite-multifield touchui-composite-multifield-nodestore.js file and located where fields were being saved.
  • The collectDataFromFields function gets only the second children fields with the line
    • $fields = $(multifield).children.children(cmf.CFFW);
    • Note: cfm.CFFW = ".coral-Form-fieldwrapper"
  • Second child is not a field wrapper, it’s a TapPanel wrapper (highlighted below)

 

TapPanel wrapper

Figure 2: TapPanel wrapper html


  • The fields for the TabPanel are deep within the TabPanel (Highlighted below)


Nested fields within main TabPanel

Figure 3: Nested fields within main TabPanel

  • Solution: Update the code to look for all.coral-Form-fieldwrapper rather than just the second children
    • $fields = $(multifield).find(cmf.CFFW);

Here’s the full function with the fix:


collectDataFromFields: function(){
           var $multifields = this.getNodeStoreMultifields();

           if(_.isEmpty($multifields)){
               return;
           }

           var $form = $(this.getPropertiesFormSelector()), $fields,
               cmf = this;

           $multifields.each(function(counter, multifield){
               $fields = $(multifield).find(cmf.CFFW);

               $fields.each(function (j, field) {
                   fillValue($form, $(multifield).data("name"), $(field).find("[name]"), (counter + 1));
               });
           });

           function fillValue($form, fieldSetName, $field, counter){
               var name = $field.attr("name"), value;

               if (!name) {
                   return;
               }

               //strip ./
               if (name.indexOf("./") === 0) {
                   name = name.substring(2);
               }

               value = $field.val();

               if (cmf.isCheckbox($field)) {
                   value = $field.prop("checked") ? $field.val() : "";
               }

               if (cmf.isAutocomplete($field)) {
                   var tags = [];
                   var $tagItems = $field.closest("ul").find("li.coral-TagList-tag");
                   $tagItems.each(function (k, tagItem) {
                       var $inputItem = $(tagItem).find("input[name='./" + name + "']");
                       tags[k] = $inputItem.val();
                       $inputItem.remove();
                   });
                   value = tags.toString();
               }

               //remove the field, so that individual values are not POSTed
               if (!cmf.isAutocomplete($field)) {
                   $field.remove();
               }

               $('<input />').attr('type', 'hidden')
                   .attr('name', fieldSetName + "/" + counter + "/" + name)
                   .attr('value', value)
                   .appendTo($form);
           }
       }






< Return to Feed