CODEWITHSUNDEEP
javascripthtmladobeaem
John76
John76

Reputation: 47

AEM - Get property of parent component dilalog inside child component's dialog

I'm very new to AEM and pure front end (html,css,js) so apologies for asking such a basic question. I have made 2 components parent and child. Each one of these components has a name property which I set in the dialog. I need to to be able to access the parents name property in the child component my page looks like this.

Parent Component
--parentParsys
----Child Component
------childParsys

I just need to display the parents name in the childs dialog but I can't seem to find the parents name.

Any guidance would be much appreciated. Ideally I'd like to do this in JS but I'm comfortable picking my way around a JSP.

Thanks

Upvotes: 1

Views: 5694

Answers (1)

nateyolles
nateyolles

Reputation: 1921

Attach a listener to your child component's dialog so that it will run your JavaScript when the dialog loads. That JavaScript will determine the path of the parent component based on the path of the child component. Using Apache Sling's RESTful nature, you will simply make a GET request to parent component's Resource, which will return you the properties of that resource. You can then update the current open dialog with the value that you want. All the information you need is provided in the CQ Widgets API documentation.

Attach the listener to your child dialog pointing to an external JavaScript file:

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

Add the custom JavaScript to a ClientLib available in authoring mode. That could be cq.authoring.editor, see Using Client-Side Libraries. This will run every time the dialog opens. This example makes a synchronous GET request and updates a displayfield. You will update it depending on what you want to with the data, how you want to find the parent component, and you'll also want to add null checks.

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

Upvotes: 3

Related Questions