Legen Sie ein Minimum und Maximum für benutzerdefinierte Mehrfeldelemente in CQ5 fest?

Question

Ich arbeite derzeit an einer AEM-Komponente, die benutzerdefinierte Multi-Bereich enthalten und ich habe ein Problem konfrontiert, ich weiß nicht, wie man es löst. Ich habe ein benutzerdefiniertes Widget für dieses erstellt, das Multiefield in MultiField enthalten kann. Aus der Dokumentation gelesen, wie ich verstanden habe gibt es keine Standardkonfiguration für diese Widgets API-Konfiguration.

Meine Dialog Knoten:

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

Das Widget funktioniert gut, außer ich ein Minimum erforderlich multiefields und ein Maximum festlegen möchten. Ich habe auf dem Netz ein Beispiel gefunden, aber ich weiß nicht wirklich verstehen, wie es zu tun ist, einen Blick auf den Code unten nehmen:

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

Wäre toll, wenn jemand kann erklären, wie kann ich dies erreichen für mein kundenspezifisches multifield oder irgendwelche anderen Ideen? Lass es mich wissen, wenn du irgendwelche Fragen hast.

Answer 1

Um JavaScript in der klassischen Benutzeroberfläche zu implementieren, verwenden Sie Listener. Zum Beispiel:

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

Alle Zuhörer zur Verfügung in den CQ Widgets API documentation aufgeführt. Zum Beispiel, wenn Sie die Dialog API ansehen, werden Sie alle öffentlichen Ereignisse sehen.

Ich kann Ihr benutzerdefiniertes Widget nicht kommentieren, jedoch überprüft dieses JavaScript-Beispiel, wenn es zusammen mit dem obigen Dialog-Listener verwendet wird, alle Ihre Felder mit den benutzerdefinierten Eigenschaften maxLimit und minLimit.

Der Dialog:

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

Das 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; 
    } 
    } 
}