AEM - Content Fragment with Component

Browse and use Content fragment inside custom component

AEM introduced Content Fragment with 6.2 and now almost everyone knows about Content Fragments and How to create and use it.

But we are restricted to use Content Fragments inside page only via Content Fragment components (WCM core content fragment and foundation Content Fragment components)

What if we need to use Content Fragments like other assets e.g. images using PathField or PathBrowser in the component.

There is a possibility to achieve this and Content Fragment can be browsed and used from any component. Content Fragments variations can also be added from the component.

Content Fragment(without variation)

• In the component dialog create a PathField to browse Content Fragment.
• In HTL, use JAVA API to read HTML content from content fragments master variation node's jcr:data property. 

Example :

Component Dailog:

	<?xml version="1.0" encoding="UTF-8"?>
	<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
	jcr:primaryType="nt:unstructured"
	jcr:title="CF Test Dialog"
	sling:resourceType="cq/gui/components/authoring/dialog">
	<content
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/container">
	<layout
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
	<items jcr:primaryType="nt:unstructured">
	<column
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/container">
	<items jcr:primaryType="nt:unstructured">
	<heading
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/form/textfield"
	fieldLabel="Heading"
	name="./heading"
	required="{Boolean}true"/>
	<cf-field
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
	fieldDescription="Browse CF"
	fieldLabel="Browse CF"
	name="./cfdata"
	rootPath="/content/dam"/>
	</items>
	</column>
	</items>
	</content>
	</jcr:root>

HTL:

<h2>Content Fragment Test Component</h2>

<h3>${properties.heading}</h3>

<div data-sly-use.cf="${'com.aem.community.core.components.ContentFragmentContent' @ cfInput=properties.cfdata}">

${cf.content @ context='html'}

</div>

JAVA:

Above com.aem.community.core.components.ContentFragmentContent java code is available at GitHub

ContentFragmentContent.java

Content Fragment(with variation)

• In the component dialog create a PathField to browse Content Fragment.
• Create dropdown with options to populate content fragment variation
• Create hidden field item to store content fragment variation value on dialog submit. this value will be used to set preselected variation option in dropdown when dialog will be loaded again.
• In HTL, use JAVA API to read HTML content from content fragments master or selected variation node's jcr:data property. 
• Create clientlibs with category 'cq.authoring.dialog' , add Javascript to populate dropdown option for component variations, variations can be retrieve by making ajax call to browsed Content Fragment with  cfm.info selectors and with json extension e.g. http://localhost:4502/content/dam/we-retail/en/experiences/arctic-surfing-in-lofoten/arctic-surfing-in-lofoten.cfm.info.json?ck=0.8366689055424192&_=1535814701363 . Below is the response of above request, variations can be read and dialog variations dropdown options can be created. 

{"name":"arctic-surfing-in-lofoten","title":"Arctic Surfing in Lofoten","description":"Surfing in Northern Norway","path":"/content/dam/we-retail/en/experiences/arctic-surfing-in-lofoten/arctic-surfing-in-lofoten","elements":[{"name":"main","title":"Main","contentType":"text/html"}],"variations":[{"name":"master","title":"Master","description":"Represents the original content fragment"},{"name":"teaser","title":"Teaser","description":""}]}

sample javascript created for demo at cf-variation-handler.js

Example :

Component Dailog:

	<?xml version="1.0" encoding="UTF-8"?>
	<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
	jcr:primaryType="nt:unstructured"
	jcr:title="CF Test Dialog"
	sling:resourceType="cq/gui/components/authoring/dialog">
	<content
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/container">
	<layout
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
	<items jcr:primaryType="nt:unstructured">
	<column
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/container">
	<items jcr:primaryType="nt:unstructured">
	<heading
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/form/textfield"
	fieldLabel="Heading"
	name="./heading"
	required="{Boolean}true"/>
	<cf-field
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
	fieldDescription="Browse CF"
	fieldLabel="Browse CF"
	name="./cfdata"
	rootPath="/content/dam"/>
	<variation
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/select"
	emptyText="Select"
	fieldLabel="Variation"
	name="./variation"/>
	<varhidden
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/foundation/form/hidden"
	name="./selectVariation"/>
	</items>
	</column>
	</items>
	</content>
	</jcr:root>

HTL:

<h2>Content Fragment Test Component</h2>

<h3>${properties.heading}</h3>

<div data-sly-use.cf="${'com.aem.community.core.components.ContentFragmentContent' @ cfInput=properties.cfdata, variation=properties.variation}">

${cf.content @ context='html'}

</div>

JAVA:

Same java code is compatible with both ContentFragmentContent.java