AEM - Erhalte die Eigenschaft der Elternkomponente dilarog im Dialog der Kindkomponente

Question

Ich bin sehr neu zu AEM und pure Frontend (html, css, js) so Entschuldigungen für eine solche grundlegende Frage. Ich habe 2 Komponenten Eltern und Kind gemacht. Jede dieser Komponenten hat eine Namenseigenschaft, die ich im Dialog eingestellt habe. Ich muss in der Lage sein, auf die Eltern Namenseigenschaft in der Kindkomponente zuzugreifen, meine Seite sieht so aus.

geordnete Komponente
--parentParsys
---- Child Component
------ childParsys

Ich muss nur im Childs Dialog der Eltern Namen angezeigt werden, aber ich kann nicht scheinen, um den Namen der Eltern zu finden.

Jede Anleitung würde sehr geschätzt werden. Idealerweise würde ich das gerne in JS machen, aber ich fühle mich in einer JSP wohl.

Dank

Answer 1

Bringen Sie einen Zuhörer zu Ihrem Dialog des Kindes Komponente, so dass er sie JavaScript, wenn die Dialog Lasten ausgeführt wird. Dieses JavaScript bestimmt den Pfad der übergeordneten Komponente basierend auf dem Pfad der untergeordneten Komponente. Wenn Sie die RESTful-Natur von Apache Sling verwenden, werden Sie einfach eine GET-Anfrage an die Ressource der übergeordneten Komponente stellen, die Ihnen die Eigenschaften dieser Ressource zurückgibt. Sie können dann den aktuellen geöffneten Dialog mit dem gewünschten Wert aktualisieren. Alle Informationen, die Sie benötigen, finden Sie in der CQ Widgets API documentation.

Bringen Sie den Hörer, um Ihr Kind Dialog zeigt auf einer externen JavaScript-Datei:

<instructions 
    jcr:primaryType="cq:Widget" 
    fieldLabel="Instructions" 
    xtype="displayfield"> 
    <listeners 
     jcr:primaryType="nt:unstructured" 
     loadcontent="function(field, record, path){ mynamespace.updateWithParentName(field, record, path) }" 
    /> 
</instructions> 

die benutzerdefinierte JavaScript zu einem ClientLib in Authoring-Modus zur Verfügung hinzufügen. Das könnte cq.authoring.editor sein, siehe Using Client-Side Libraries. Dies wird jedes Mal ausgeführt, wenn das Dialogfeld geöffnet wird. Dieses Beispiel erstellt eine synchrone GET-Anforderung und aktualisiert eine displayfield. Sie aktualisieren es je nachdem, was Sie mit den Daten tun möchten, wie Sie die übergeordnete Komponente finden möchten, und Sie möchten auch Null-Überprüfungen hinzufügen.

var mynamespace = {}; 

mynamespace.updateWithParentName = function(field, record, path) { 
    var parentPath = getParentPath(path); 
    var parentComponent = CQ.shared.HTTP.eval(CQ.shared.HTTP.noCaching(parentPath + '.json')); 
    var parentName = parentComponent.name; // assuming the property name is "name" 

    field.setValue('Parent component name is: ' + parentName); 

    /* Go up two levels accounting for the current component and the parsys */ 
    function getParentPath(path) { 
    var parts = path.split('/'); 
    var parentPath = parts.slice(0, parts.length - 2).join('/'); 

    return parentPath; 
    } 
}