Experience Fragment Via Custom Component

[ravijais04]

Hi Friends - Hope, All is well.

could you help me know how I can consume the experience fragment variation via a field in custom component, not by OOTB experience fragment component.

my custom multi-field component has following fields.

1. icon

2. source

and here source is XF reference. what is the relevant granite/coral resource to be used here and How I can export whole xf by just authoring xf reference in source field and inject it in HTL.

please advise.

#experiencefragment #aemcomponent #customaemcomponent #aem

[lukasz-m · Accepted solution]

Hi @ravijais04,

Regarding dialog filed, you can use cq/experience-fragments/editor/components/xffield which will allow you to select specific variation of given content fragment. There is no dedicated XF granite/coral widget, however keeping in mind above is used in Core Components this should be a good choice.

In terms of HTL, you can simply use data-sly-resource

data-sly-resource="${@path='path/to/xfvariant'}"

You can find very good code examples looking int core components Experience Fragment component:

• dialog: https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...
• HTL: https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...
• Sling models:
  • https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...
  • https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...
• Authoring documentation, that will give you an idea what you can expect: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/experien...

So you can use above elements in your custom component respectively.

[ravijais04]

Thanks So Much @lukasz-m . It makes lot of sense.

[DEBAL_DAS]

Relevant resource type we need to use here is cq/experience-fragments/editor/components/xffield.

You can refer the following path to get more details: /apps/core/wcm/components/experiencefragment/v2/experiencefragment/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/fragmentVariationPath , if you have core component installed on your AEM instance.

[ravijais04]

Thanks @DEBAL_DAS for the inputs!