Установите минимальные и максимальные значения для пользовательских элементов с несколькими элементами в CQ5?

Question

В настоящее время я работаю над компонентом AEM, который включает настраиваемый multifield, и я столкнулся с проблемой, я не знаю, как ее решить. Я создал собственный виджет для этого, который позволяет включать multifield в multifield. Из прочитанной документации, как я понял, для конфигурации виджета API нет никакой конфигурации по умолчанию.

Мои диалоговые узлы:

<questions 
    jcr:primaryType="cq:Widget" 
    xtype="panel" 
    title="Questions"> 
    <items jcr:primaryType="cq:WidgetCollection"> 
     <quiz-data 
       jcr:primaryType="cq:Widget" 
       fieldDescription="Click the '+' to add a new data" 
       fieldLabel="Quiz" 
       name="./quizData" 
       xtype="multifield"> 
      <fieldConfig 
        jcr:primaryType="cq:Widget" 
        xtype="apps.mypath.widgets.MultieField"/> 
     </quiz-data> 
    </items> 
</questions> 

Виджет работает отлично, за исключением того, я хочу, чтобы установить минимальный требуемый multiefields и максимум. Я нашел в Интернете пример, но я не очень понимаю, как это сделать, посмотрите на код ниже:

myNamespace = {}; 
myNamespace.myCustomFunction = function (dialog) { 
    var isValid = function() { 
     var valStatus = true; 
     ... custom JavaScript/jQuery to check if 3 items exist ... 
     return valStatus; 
    }; 
    if (!isValid()) { 
     CQ.Ext.Msg.show({title: 'Validation Error', msg: 'Must contain at least 3 items!', buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR}); 
     return false; 
    } else { 
     return true; 
    } 
} 

было бы здорово, если кто-то может объяснить, как я могу добиться этого для мой пользовательский мультилифт или любые другие идеи? Дайте знать, если у вас появятся вопросы.

Answer 1

Для реализации JavaScript в классическом интерфейсе вы будете использовать Listeners. Например:

<?xml version="1.0" encoding="UTF-8"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
      xmlns:jcr="http://www.jcp.org/jcr/1.0" 
      xmlns:nt="http://www.jcp.org/jcr/nt/1.0" 
      jcr:primaryType="cq:Dialog" 
      height="600" 
      width="600" 
      title="My Component" 
      xtype="dialog"> 
    <listeners 
     jcr:primaryType="nt:unstructured" 
     beforesubmit="function(dialog){ return myNamespace.myCustomFunction(dialog); }"/> 
    <items jcr:primaryType="cq:TabPanel"> 
     <items jcr:primaryType="cq:WidgetCollection"> 
     </items> 
    </items> 
</jcr:root> 

Все слушатели доступны для вас, перечислены в CQ Widgets API documentation. Например, если вы посмотрите на Dialog API, вы увидите все публичные события.

Я не могу прокомментировать ваш пользовательский виджет, однако этот пример JavaScript, когда он используется совместно с прослушивателем диалога выше, будет проверять все ваши многопользовательские свойства с настраиваемыми свойствами maxLimit и minLimit.

Диалог:

<quiz-data 
    jcr:primaryType="cq:Widget" 
    fieldDescription="Click the '+' to add a new data" 
    fieldLabel="Quiz" 
    name="./quizData" 
    minLimit="2" 
    maxLimit="4" 
    xtype="multifield"> 
    <fieldConfig 
     jcr:primaryType="cq:Widget" 
     xtype="textfield"/> 
</quiz-data> 

JavaScript:

var myNamespace = myNamespace || {}; 

myNamespace.myCustomFunction(dialog){ 
    var multifields 
     field, 
     max, 
     min, 
     length, 
     x; 

    multifields = dialog.findByType('multifield'); 

    for (x = 0; x < multifields.length; x++) { 

    field = multifields[x]; 
    max = parseInt(field.maxLimit, 10); 
    min = parseInt(field.minLimit, 10); 
    length = field.getValue().length; 

    if (max && length > max) { 
     CQ.Ext.Msg.show({ 
     title: 'Validation Error', 
     msg: field.fieldLabel + ' must have no more than ' + max + ' items.', 
     buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR}); 
     return false; 
    } else if (min && length < min) { 
     CQ.Ext.Msg.show({ 
     title: 'Validation Error', 
     msg: field.fieldLabel + ' must have at least ' + min + ' items.', 
     buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR}); 
     return false; 
    } 
    } 
}