Populate Tags based on Selection in Pathfield - Classic UI Banner

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

Authored Component 1

Select different asset from pathfield, tags gets updated.

Authored Component 2 

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.

Widget Listener

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

Javascript which gets the tags

We simply create complete path where tags are present for 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. In line we are getting the value for cq:tags and setting this value to tag input field.

Comment below if you need any help or have questions.


2 thoughts on “Populate Tags based on Selection in Pathfield – Classic UI

Leave a Reply

Your email address will not be published. Required fields are marked *