Populate Tags based on Selection in Pathfield – Classic UI

This simple use case has been taken from AEM community, I thought an article for this would really help people who are looking for this or may need in future.

Component Overview

We have two field, one is pathfield (which helps to browse repository) and another a tag input field. Author selects an asset from pathfield and based on the the selection Tag input field is populated with tags available for selected assets.

Authoring Experience

Component dialog



Select an asset from pathfield



Select different asset from pathfield, tags gets updated.



Code Look Up

To make this work, you simply need to add a widget listener to the asset pathfield. Listener will listen for event dialogclose which means when you select an asset from pathfield browse asset dialog and click ‘Ok’ will cause the event to trigger.



In above image it can be seen that dialog close listener has been added to asset pathfield.

Javascript which gets the tags

function(d) {

 path = this.value + "/jcr:content/metadata.json";

 var x = CQ.shared.HTTP.eval(path);

 var tags = [];

 tags = x['cq:tags'];

 dialog = this.findParentByType('dialog');

 field = dialog.getField('./tags');

 field.setValue(tags);

}

We simply create a complete path where tags are present for a particular asset and get the response on JSON. In complete JSON response, we have many properties values and one of them is our property name cq:tags. Inline we are getting the value for cq:tags and setting this value to tag input field.