Создайте поле как обязательное поле в Custom multifield в диалоговом окне aem touch ui

Question

В диалоговом окне пользовательского интерфейса AEM touch у меня есть поле с полем и полем пути.

Теперь я хочу сделать заголовок как обязательное поле в моем настраиваемом multifield. Но не могу этого сделать.

Мой XML для композитной вкладки многопрофильной является:

<advanced 
      jcr:primaryType="nt:unstructured" 
      jcr:title="Advanced" 
      sling:resourceType="granite/ui/components/foundation/section"> 
      <layout 
       jcr:primaryType="nt:unstructured" 
       sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> 
      <items jcr:primaryType="nt:unstructured"> 
       <column 
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="granite/ui/components/foundation/container" 
        class="column-full-width"> 
        <items jcr:primaryType="nt:unstructured"> 
         <fieldset 
          jcr:primaryType="nt:unstructured" 
          sling:resourceType="granite/ui/components/foundation/form/fieldset"> 
          <layout 
           jcr:primaryType="nt:unstructured" 
           sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> 
          <items jcr:primaryType="nt:unstructured"> 
           <column 
            jcr:primaryType="nt:unstructured" 
            sling:resourceType="granite/ui/components/foundation/container"> 
            <items jcr:primaryType="nt:unstructured"> 
             <items 
              jcr:primaryType="nt:unstructured" 
              sling:resourceType="granite/ui/components/foundation/form/multifield" 
              class="full-width" 
              fieldDescription="Click 'Add field' button to add a new field." 
              fieldLabel="Resources"> 
              <field 
               jcr:primaryType="nt:unstructured" 
               sling:resourceType="granite/ui/components/foundation/form/fieldset" 
               eaem-nested="" 
               name="./items"> 
               <layout 
                jcr:primaryType="nt:unstructured" 
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> 
               <items jcr:primaryType="nt:unstructured"> 
                <column 
                 jcr:primaryType="nt:unstructured" 
                 sling:resourceType="granite/ui/components/foundation/container"> 
                 <items jcr:primaryType="nt:unstructured"> 
                  <title 
                   jcr:primaryType="nt:unstructured" 
                   fieldDescription="Pdf/Video Title is mandatory." 
                   sling:resourceType="granite/ui/components/foundation/form/textfield" 
                   fieldLabel="Title: Pdf/video" 
                   name="./title"/> 
                  <path 
                   jcr:primaryType="nt:unstructured" 
                   rootPath="/content/dam" 
                   sling:resourceType="granite/ui/components/foundation/form/pathbrowser" 
                   fieldLabel="Path: Pdf/video" 
                   name="./path"/> 
                 </items> 
                </column> 
               </items> 
              </field> 
             </items> 
            </items> 
           </column> 
          </items> 
         </fieldset> 
        </items> 
       </column> 
      </items> 
     </advanced> 

И код JS для тех же самого:

(function() { 
var DATA_EAEM_NESTED = "data-eaem-nested"; 
var CFFW = ".coral-Form-fieldwrapper"; 

//reads multifield data from server, creates the nested composite multifields and fills them 
function addDataInFields() { 
    $(document).on("dialog-ready", function() { 

     var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']"); 
     if(_.isEmpty($fieldSets)){ 
      return; 
     } 

     var mNames = []; 

     $fieldSets.each(function (i, fieldSet) { 
      mNames.push($(fieldSet).data("name")); 
     }); 

     mNames = _.uniq(mNames); 

     var actionUrl = $fieldSets.closest("form.foundation-form").attr("action") + ".json"; 

     $.ajax(actionUrl).done(postProcess); 

     function postProcess(data){ 
      _.each(mNames, function(mName){ 
       buildMultiField(data, mName); 
      }); 
     } 

     //creates & fills the nested multifield with data 
     function fillNestedFields($multifield, valueArr){ 
      _.each(valueArr, function(record, index){ 
       $multifield.find(".js-coral-Multifield-add").click(); 

       //a setTimeout may be needed 
       _.each(record, function(value, key){ 
        var $field = $($multifield.find("[name='./" + key + "']")[index]); 
        $field.val(value); 
       }) 
      }) 
     } 

     function buildMultiField(data, mName){ 
      if(_.isEmpty(mName)){ 
       return; 
      } 

      $fieldSets = $("[data-name='" + mName + "']"); 

      //strip ./ 
      mName = mName.substring(2); 

      var mValues = data[mName], $field, name; 

      if(_.isString(mValues)){ 
       mValues = [ JSON.parse(mValues) ]; 
      } 

      _.each(mValues, function (record, i) { 
       if (!record) { 
        return; 
       } 

       if(_.isString(record)){ 
        record = JSON.parse(record); 
       } 

       _.each(record, function(rValue, rKey){ 
        $field = $($fieldSets[i]).find("[name='./" + rKey + "']"); 

        if(_.isArray(rValue) && !_.isEmpty(rValue)){ 
         fillNestedFields($($fieldSets[i]).find("[data-init='multifield']"), rValue); 
        }else{ 
          var select = $field.closest(".coral-Select").data("select"); 
          if(select){ 
           select.setValue(rValue); 
          } 
          else{ 
         $field.val(rValue); 
         } 
        } 
       }); 
      }); 
     } 
    }); 
} 

function fillValue($field, record){ 
    var name = $field.attr("name"); 

    if (!name) { 
     return; 
    } 

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

    record[name] = $field.val(); 

    //remove the field, so that individual values are not POSTed 
    $field.remove(); 
} 

//for getting the nested multifield data as js objects 
function getRecordFromMultiField($multifield){ 
    var $fieldSets = $multifield.find("[class='coral-Form-fieldset']"); 

    var records = [], record, $fields, name; 

    $fieldSets.each(function (i, fieldSet) { 
     $fields = $(fieldSet).find("[name]"); 

     record = {}; 

     $fields.each(function (j, field) { 
      fillValue($(field), record); 
     }); 

     if(!$.isEmptyObject(record)){ 
      records.push(record) 
     } 
    }); 

    return records; 
} 

//collect data from widgets in multifield and POST them to CRX as JSON 
function collectDataFromFields(){ 
    $(document).on("click", ".cq-dialog-submit", function() { 
     var $form = $(this).closest("form.foundation-form"); 
     var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']"); 
     var record, $fields, $field, name, $nestedMultiField; 

     $fieldSets.each(function (i, fieldSet) { 
      $fields = $(fieldSet).children().children(CFFW); 

      record = {}; 

      $fields.each(function (j, field) { 
       $field = $(field); 

       //may be a nested multifield 
       $nestedMultiField = $field.find("[data-init='multifield']"); 

       if($nestedMultiField.length == 0){ 
        fillValue($field.find("[name]"), record); 
       }else{ 
        name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name"); 

        if(!name){ 
         return; 
        } 

        //strip ./ 
        name = name.substring(2); 

        record[name] = getRecordFromMultiField($nestedMultiField); 
       } 
      }); 

      if ($.isEmptyObject(record)) { 
       return; 
      } 

      //add the record JSON in a hidden field as string 
      $('<input />').attr('type', 'hidden') 
       .attr('name', $(fieldSet).data("name")) 
       .attr('value', JSON.stringify(record)) 
       .appendTo($form); 
     }); 
    }); 
} 

$(document).ready(function() { 
    addDataInFields(); 
    collectDataFromFields(); 
}); 

//extend otb multifield for adjusting event propagation when there are nested multifields 
//for working around the nested multifield add and reorder 
CUI.CustomMultifield = new Class({ 
    toString: "Multifield", 
    extend: CUI.Multifield, 

    construct: function (options) { 
     this.script = this.$element.find(".js-coral-Multifield-input-template:last"); 
    }, 

    _addListeners: function() { 
     this.superClass._addListeners.call(this); 

     //otb coral event handler is added on selector .js-coral-Multifield-add 
     //any nested multifield add click events are propagated to the parent multifield 
     //to prevent adding a new composite field in both nested multifield and parent multifield 
     //when user clicks on add of nested multifield, stop the event propagation to parent multifield 
     this.$element.on("click", ".js-coral-Multifield-add", function (e) { 
      e.stopPropagation(); 
     }); 

     this.$element.on("drop", function (e) { 
      e.stopPropagation(); 
     }); 
    } 
}); 

CUI.Widget.registry.register("multifield", CUI.CustomMultifield);})(); 

Когда я делаю текстовое поле, как требуется: правда это не работает меня.

Answer 1

Это отлично работает для меня

Dialog Node:

<content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> 
    <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> 
    <items jcr:primaryType="nt:unstructured"> 
     <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> 
      <items jcr:primaryType="nt:unstructured"> 
       <fieldset jcr:primaryType="nt:unstructured" jcr:title="Test Mandatory TextField" sling:resourceType="granite/ui/components/foundation/form/fieldset"> 
        <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> 
        <items jcr:primaryType="nt:unstructured"> 
         <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> 
          <items jcr:primaryType="nt:unstructured"> 
           <states jcr:primaryType="nt:unstructured" class="full-width" fieldDescription="Click '+' to add a new page" fieldLabel="Resources" sling:resourceType="granite/ui/components/foundation/form/multifield"> 
            <field jcr:primaryType="nt:unstructured" eaem-nested="" name="./states" sling:resourceType="granite/ui/components/foundation/form/fieldset"> 
             <layout jcr:primaryType="nt:unstructured" method="absolute" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> 
             <items jcr:primaryType="nt:unstructured"> 
              <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> 
               <items jcr:primaryType="nt:unstructured"> 
                <title jcr:primaryType="nt:unstructured" fieldDescription="Pdf/Video Title is mandatory." fieldLabel="Title: Pdf/video" name="./title" required="true" sling:resourceType="granite/ui/components/foundation/form/textfield"/> 
                <path jcr:primaryType="nt:unstructured" fieldDescription="Select Path" fieldLabel="Path for Pdf/video" name="./path" rootPath="/content" sling:resourceType="granite/ui/components/foundation/form/pathbrowser"/> 
               </items> 
              </column> 
             </items> 
            </field> 
           </states> 
          </items> 
         </column> 
        </items> 
       </fieldset> 
      </items> 
     </column> 
    </items> 
</content> 

JS код

(function() { 
    var DATA_EAEM_NESTED = "data-eaem-nested"; 
    var CFFW = ".coral-Form-fieldwrapper"; 

    //reads multifield data from server, creates the nested composite multifields and fills them 
    var addDataInFields = function() { 
     $(document).on("dialog-ready", function() { 
      var mName = $("[" + DATA_EAEM_NESTED + "]").data("name"); 

      if(!mName){ 
       return; 
      } 

      //strip ./ 
      mName = mName.substring(2); 

      var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']"), 
       $form = $fieldSets.closest("form.foundation-form"); 

      var actionUrl = $form.attr("action") + ".json"; 

      var postProcess = function(data){ 
       if(!data || !data[mName]){ 
        return; 
       } 

       var mValues = data[mName], $field, name; 

       if(_.isString(mValues)){ 
        mValues = [ JSON.parse(mValues) ]; 
       } 

       _.each(mValues, function (record, i) { 
        if (!record) { 
         return; 
        } 

        if(_.isString(record)){ 
         record = JSON.parse(record); 
        } 

        _.each(record, function(rValue, rKey){ 
         $field = $($fieldSets[i]).find("[name='./" + rKey + "']"); 

         if(_.isArray(rValue) && !_.isEmpty(rValue)){ 
          fillNestedFields($($fieldSets[i]).find("[data-init='multifield']"), rValue); 
         }else{ 
          $field.val(rValue); 
         } 
        }); 
       }); 
      }; 

      //creates & fills the nested multifield with data 
      var fillNestedFields = function($multifield, valueArr){ 
       _.each(valueArr, function(record, index){ 
        $multifield.find(".js-coral-Multifield-add").click(); 

        //a setTimeout may be needed 
        _.each(record, function(value, key){ 
         var $field = $($multifield.find("[name='./" + key + "']")[index]); 
         $field.val(value); 
        }) 
       }) 
      }; 

      $.ajax(actionUrl).done(postProcess); 
     }); 
    }; 

    var fillValue = function($field, record){ 
     var name = $field.attr("name"); 

     if (!name) { 
      return; 
     } 

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

     record[name] = $field.val(); 

     //remove the field, so that individual values are not POSTed 
     $field.remove(); 
    }; 

    //for getting the nested multifield data as js objects 
    var getRecordFromMultiField = function($multifield){ 
     var $fieldSets = $multifield.find("[class='coral-Form-fieldset']"); 

     var records = [], record, $fields, name; 

     $fieldSets.each(function (i, fieldSet) { 
      $fields = $(fieldSet).find("[name]"); 

      record = {}; 

      $fields.each(function (j, field) { 
       fillValue($(field), record); 
      }); 

      if(!$.isEmptyObject(record)){ 
       records.push(record) 
      } 
     }); 

     return records; 
    }; 

    //collect data from widgets in multifield and POST them to CRX as JSON 
    var collectDataFromFields = function(){ 
     $(document).on("click", ".cq-dialog-submit", function() { 
      var $form = $(this).closest("form.foundation-form"); 

      var mName = $("[" + DATA_EAEM_NESTED + "]").data("name"); 
      var $fieldSets = $("[" + DATA_EAEM_NESTED + "][class='coral-Form-fieldset']"); 

      var record, $fields, $field, name, $nestedMultiField; 

      $fieldSets.each(function (i, fieldSet) { 
       $fields = $(fieldSet).children().children(CFFW); 

       record = {}; 

       $fields.each(function (j, field) { 
        $field = $(field); 

        //may be a nested multifield 
        $nestedMultiField = $field.find("[data-init='multifield']"); 

        if($nestedMultiField.length == 0){ 
         fillValue($field.find("[name]"), record); 
        }else{ 
         name = $nestedMultiField.find("[class='coral-Form-fieldset']").data("name"); 

         if(!name){ 
          return; 
         } 

         //strip ./ 
         name = name.substring(2); 

         record[name] = getRecordFromMultiField($nestedMultiField); 
        } 
       }); 

       if ($.isEmptyObject(record)) { 
        return; 
       } 

       //add the record JSON in a hidden field as string 
       $('<input />').attr('type', 'hidden') 
        .attr('name', mName) 
        .attr('value', JSON.stringify(record)) 
        .appendTo($form); 
      }); 
     }); 
    }; 

    $(document).ready(function() { 
     addDataInFields(); 
     collectDataFromFields(); 
    }); 

    //extend otb multifield for adjusting event propagation when there are nested multifields 
    //for working around the nested multifield add and reorder 
    CUI.Multifield = new Class({ 
     toString: "Multifield", 
     extend: CUI.Multifield, 

     construct: function (options) { 
      this.script = this.$element.find(".js-coral-Multifield-input-template:last"); 
     }, 

     _addListeners: function() { 
      this.superClass._addListeners.call(this); 

      //otb coral event handler is added on selector .js-coral-Multifield-add 
      //any nested multifield add click events are propagated to the parent multifield 
      //to prevent adding a new composite field in both nested multifield and parent multifield 
      //when user clicks on add of nested multifield, stop the event propagation to parent multifield 
      this.$element.on("click", ".js-coral-Multifield-add", function (e) { 
       e.stopPropagation(); 
      }); 

      this.$element.on("drop", function (e) { 
       e.stopPropagation(); 
      }); 
     } 
    }); 
CUI.Widget.registry.register("multifield", CUI.Multifield); 
})();