How to render/style a content fragment (i.e. not using the plain text Content Fragment Component)

Avatar

Avatar

TB3dock

Avatar

TB3dock

TB3dock

24-03-2021

If you create a page, and drop in content fragment where you would drop in a component, it just creates a text version of the content fragment model.

If the model contains say title, image, description, reference, category, all these get dumped as plain text on the page.

Presumably, there is a way we can create a template/component which can take some of these fields, and lay them out and style them?

I have not been able to find any information on this (i.e. rendering a content fragment with a layout).

When we create the layout, we want to create it in code (not via CMS UI), so that it can be distributed to other envs (not just on the local env)

 

Presumably we can create a component to render the content fragment, but how do we associated them together, and how does one reference the other?

Replies

Avatar

Avatar

rush_pawan

Avatar

rush_pawan

rush_pawan

24-03-2021

Hello,

 

The purpose of content fragment is to render agnostic. now to apply layout or rendering ui, its part of dev job and can be achieved multiple way similar as regular component development 

generate UI using native and third party api like react or similar (based on below models)

 

- export as JSON then process it as model while 

https://experienceleague.adobe.com/docs/experience-manager-64/developing/components/json-exporter.ht...

- or use GraphQL to get the JSON response

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/assets/admin/graphql-api-co... 

- or use DAM assets api (as last options)

Avatar

Avatar

TB3dock

Avatar

TB3dock

TB3dock

24-03-2021

We dont want to use content fragments - they are very limiting, but we understand that they must be used if we want to query the fields using graphql to display in a react app. however, we also need to show them on our website. We can easily create components, but not sure how to map a component to a content item in order to render it on a page from AEM.

Avatar

Avatar

Rohit_Utreja

Avatar

Rohit_Utreja

Rohit_Utreja

25-03-2021