How to display Content Fragments in UI.?

[imadullakhan]

Hi @All,

I have couple of Content Fragments which i need to show in UI. How to do this one. Can any one help me please? 

[ArpitVarshney]

Hi @imadullakhan 

Please follow the below steps:

• Open your page for editing.
• Add the Content Fragment component; from either the Components browser or Insert New Component.
• Open the Assets browser and filter for Content Fragments (the default is Images).
• Drag the required fragment onto the component instance.

Detailed Documentation can be found here https://helpx.adobe.com/in/experience-manager/6-3/sites/authoring/using/content-fragments.html

Regards,

Arpit Varshney

[VeenaVikraman]

Exactly how are you planning to display it ?

1. Do you have an AEM page where you are rendering content ?, if so , follow the steps mentioned by @ArpitVarshney 
2. Is your UI application not in AEM and you want to render the content form AEM CF ? If your application is not in AEM and you want to render the CF content , you can expose your CF content as service and fetch same as a JSON from your AEM . There are a lot of tutorials on this topic. Mentioning a few here which might be of some help for you https://docs.adobe.com/content/help/en/experience-manager-learn/getting-started-with-aem-headless/ch...
   https://blogs.perficient.com/2017/04/21/aem-6-3-first-looks-content-as-a-service/
   https://www.gspann.com/resources/blogs/how-to-use-aem-as-headless-cms-with-content-as-a-service/
   
   
   let me know if this helps. Otherwise please elaborate your requirement 

Thanks

Veena

[BrianKasingli · Accepted solution]

@imadullakhan 

For content authoring, you can simply go to dam assets, and edit the content fragment; here you can edit content based on how your content fragment schema is setup.https://docs.adobe.com/content/help/en/experience-manager-64/developing/extending-aem/customizing-co...
To display content from the content fragment you can have several methods, but these are the popular methods that I've used in the past:

1. Use the WCM Core Components, content fragment component https://docs.adobe.com/content/help/en/experience-manager-core-components/using/components/content-f...; there are some limitations, so you might need to extend the component as per your requirements. 
2. Create your own component that consumes the content fragment. use the Granite UI, pathfield, to point to your content fragment, then using backend logic to expose properties to slightly via Sling Models.

API: When you want to expose Json to 3rd party services, you can utilise the WCM Core Component V2 Page, and also the WCM Core Component content fragment component, you can call model.json on the page, and see the basic structure of the content fragment values presented as the JSON response.

I hope this helps.

[imadullakhan]

Thank You i had resolved this issue.