How to display Content Fragments in UI.?

Avatar

Avatar
Validate 1
Level 2
imadullakhan
Level 2

Likes

5 likes

Total Posts

53 posts

Correct reply

1 solution
Top badges earned
Validate 1
Establish
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
imadullakhan
Level 2

Likes

5 likes

Total Posts

53 posts

Correct reply

1 solution
Top badges earned
Validate 1
Establish
Give Back
Boost 5
Boost 3
View profile
imadullakhan
Level 2

28-05-2020

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? 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

29-05-2020

@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.

Answers (2)

Answers (2)

Avatar

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

136 likes

Total Posts

185 posts

Correct reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

136 likes

Total Posts

185 posts

Correct reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile
ArpitVarshney
MVP

29-05-2020

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

 

 

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,049 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,049 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

29-05-2020

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