Expand my Community achievements bar.

Virtual Components in AEM 6.4

Avatar

Level 1

Hello, I would like to use Virtual Components feature to provide different versions of the same component (i.e. same resource type) in the Component Browser. I've found some information about this feature on few AEM documentation pages:

- https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/custom-nodetypes.html#Core  

- https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/components-basics.html

I have created following structure:

{

   "jcr:primaryType":"cq:Component",

   "jcr:title":"My Component",

   "componentGroup":"SomeGroup",

   "cq:design_dialog": { ... }

   },

   "cq:editConfig":{ ... },

   "cq:dialog":{ ... },

   "virtual":{

      "jcr:primaryType":"nt:unstructured",

      "myVirtual1":{

         "jcr:primaryType":"cq:VirtualComponent",

         "jcr:title":"My Virtual 1",

         "componentGroup":"MyGroup",

         "cq:design_dialog":{ ... },

         "cq:editConfig":{ ... }

      },

      "myVirtual2":{

         "jcr:primaryType":"cq:VirtualComponent",

         "jcr:title":"My Virtual 2",

         "componentGroup":"MyGroup",

         "cq:design_dialog":{ ... },

         "cq:editConfig":{ ... }

      }

   }

}

This works very well - after adding component group "MyGroup" to the Allowed Components of Layout Container (in the Policy configuration on Editable Template) I can see each virtual component listed separately in the Components Browser.

virtual components in browser.png

I would also like to configure AEM Styles for those components through their design in the policy configuration (I’ve created “cq:design_dialog” definition for the main cq:Component and also for my cq:VirtualComponent’s).

However, after adding my Virtual Components as the “Allowed components” in the Layout Container policy configuration, I am not able to see them displayed as the “pills” on the Layout Container - only regular “cq:Component”s are displayed there:

no virtual component pills on parsys.png

I know that if I directly add the “parent” component (“My Component”) to the list of “Allowed Components”, then I will be able to see it as the “pill” and configure the Styles (in policy config) for this component, and the styles will be shared by all virtual versions of that component. However I don’t want the “parent” component (“My Component”) to be available to authors in the Component Browser on the pages using that template - I only want the virtual components to be available there. Is there any way to achieve this or the behaviour which I’ve described is expected?

In general, do you know any recommendations on how the virtual components should be used and why they don’t have the same support as regular components (e.g. seperate design dialog/policy config)?

Thank you

7 Replies

Avatar

Level 10

I have not seen too many articles or discussions about using this property to create a component. Even with the use of Core Components - I am not seeing this property used.

Also - in docs - it says its use is associated with only a foundation component - /libs/foundation/...

Avatar

Level 10

Having said that - I will also check with the AEM team about this type of component and its use in TOuch UI.

Avatar

Level 10

Heard back - "

I have not seen topics around virtual components in editable templates.n

Virtual Components feature to provide different versions of the same component

Core component implements different versions v1, v2 using slign resource merger. Following COre Components represent best practice.

"

Avatar

Level 1

smacdonald2008​ Thank you for the answer! Yes, the documentation says we can see an example of virtual component somewhere under "/libs/foundation/..." - on AEM 6.4. I've found an example at "/libs/foundation/components/parsys/colctrl/virtual". Please let me know if you will find out some more information on this topic.
Thanks!

Avatar

Level 1

smacdonald2008​ Yes, thank you! I understand that Core Components represent best practice regarding component versioning, however by saying "I would like to use Virtual Components feature to provide different versions of the same component" I did not mean component versioning in general, but providing multiple variations/alterations of the same component in Component Browser (e.g. each variation has different initial value of some property, defined in "cq:editConfig/cq:formParameters").

Are Virtual Components currently supported in Editable Templates or should this feature be used differently?
Thanks!

Avatar

Level 10

I have not read anywhere that virtual components are supported in editable templates. And as they do not show up in editable template view - i suspect that are not meant to work with editable templates, In the Weekend tutorial - there is no mention of them:

Getting Started with AEM Sites - WKND Tutorial