Variations of Content Fragment in my custom component

[sakethchandra02]

Hi, I have a custom component. I have a path field inside it's dialog. If I enter the path of content fragment I want to have a drop down that populates all its variations. Could you tell me how I do this?

[lukasz-m]

Hi @sakethchandra02,

I think you can use dam/cfm/components/cfpicker which is dedicated widget for content fragment in combination with granite/ui/components/coral/foundation/form/select.

You can find working example of above in Content Fragment from Core components:

• general overview: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/cont...
• dialog implementation: https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

You should be able to adapt above solution in your custom component.

[Harwinder-singh]

@sakethchandra02 I haven't tried this but you can try out the following approach.

• Register a event listener on the path browse field. This one should help you with that - https://www.albinsblog.com/2019/02/how-to-handle-coral-ui-3-selectdropdown-change-event-touch-ui-dia...
• Fire a ajax call to get the json output of the CF data. JSON looks something like this - https://experienceleague.adobe.com/docs/experience-manager-65/assets/extending/assets-api-content-fr...
• Once you have the JSON, parse it and set the CF variants as drop down attributes.

https://jimfrenette.com/aem/components/dialog-coral-ui-select-cascade/

[arunpatidar]

This is a very old article but you will get an idea about to fetch variation in the custom dialog

https://aemlab.blogspot.com/2018/09/aem-content-fragment-with-component.html 

[ShaileshBassi · Accepted solution]

Hi @sakethchandra02 

This can be achieved via calling the servlet if the CF will be having different variations or by using the datasource for the fixed set of the variations.

Approach I:

You can create datasource node structure with sling:resourceType of datasource as sling:resourceType (String) = /bin/dropdownList ( i.e. Path of the servlet implementing the data source for dynamic value). It will give the desire result of a dynamic dropdown as you can see below the screenshot.

For DataSource Servlet (/bin/dropdownList) Implementation you can refer to below articles:

https://redquark.org/aem/day-17-granite-datasources/ 

http://www.sgaemsolutions.com/2019/01/dynamically-populate-drop-down-values.html 

Approach II:

You can create a listener for the adding the variation in a fixed list maintained at a fixed path e.g. /etc/variationList or /var/variationList. The dataSource will read the node and display the list.

I have not tried but thinking you can fix the CF folder parent path, if there are little variation of the variation List based on the folder path of the CFs. And this property can be fetched from one of the node property and this way it will be more dynamic as well.

Hope this helps

Thanks

[ShaileshBassi · Accepted solution]

For DataSource Servlet (/bin/dropdownList) Implementation you can refer to below articles:

https://redquark.org/aem/day-17-granite-datasources/ 

http://www.sgaemsolutions.com/2019/01/dynamically-populate-drop-down-values.html 

Approach II:

You can create a listener for the adding the variation in a fixed list maintained at a fixed path e.g. /etc/variationList or /var/variationList. The dataSource will read the node and display the list.

I have not tried but thinking you can fix the CF folder parent path, if there are little variation of the variation List based on the folder path of the CFs. And this property can be fetched from one of the node property and this way it will be more dynamic as well.

Hope this helps

Thanks