Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Headless - Get Component HTML output

Avatar

Community Advisor

Hello all,

 

I am exploring some AEM headless outputs, and thinking to expose AEM component html output in sling model json output instead of json data for each field so that i dont need to write business logic in Front end frameworks, which might help for existing projects migration to headless way and then slowing phase out the components to pure headless.

 

Is there any AEM API or Sling API which will get me HTML given resourcetype and resource object.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi @Shashi_Mulugu!

 

It would be interesting to learn more about the overall architecture of the solution design to provide good recommendations here.

In general, this sounds like a use case for Experience Fragments (XF) [1]. They are meant to be consumed by various channels and can be retrieved as HTML for consumption OOTB.

In general, retrieving HTML for a single component instead of an XF is also possible. Simply specify the path to the component inside the page hierarchy and add the .html extension.

Example from the we-retail sample content:

This will render the HTML of the hero image component:

 

<div class="we-HeroImage width-full jumbotron" style="background-image: url('/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten/_...">
        <div class="container cq-dd-image">
            <div class="we-HeroImage-wrapper">
                <p class="h3"></p>
                <strong class="we-HeroImage-title h1">Arctic Surfing In Lofoten</strong>
            </div>
        </div>
    </div>

 

Would this be the output you are looking for?

 

Hope this helps!

 

 

[1] https://experienceleague.adobe.com/docs/experience-manager-65/authoring/authoring/experience-fragmen...

 

View solution in original post

5 Replies

Avatar

Community Advisor

@Shashi_Mulugu I think using sling model we can only expose content as json using sling exporter.

@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)

https://developer.adobe.com/experience-manager/reference-materials/6-4/javadoc/constant-values.html#... 

 

You can export data as html when move components to experience fragments but i think that's what you're looking at the moment.

 

Avatar

Community Advisor

Check this out - 

// Get the resource resolver.

ResourceResolver resolver = resourceResolverFactory.getAdministrativeResourceResolver(); // Get the resource. 
Resource resource = resolver.getResource(resourcePath); 
// Get the Sling Model. 
SlingModel model = resource.adaptTo(SlingModel.class); // Get the HTML output of the resource. String html = model.getHtml();

 

 or 

@component(service = Servlet.class, property = { "sling.servlet.resourceTypes=my/resource/type" })
public class MyServlet extends SlingSafeMethodsServlet {
 
    @reference
    private ResourceRenderer resourceRenderer;
 
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Resource resource = request.getResource();
        ResourceResolver resourceResolver = resource.getResourceResolver();
 
        String html = resourceRenderer.render(resource, resourceResolver);
        response.getWriter().write(html);
    }
}

 

Avatar

Community Advisor

@Nitin_laad Can you please help with import stmts, i cant find SlingModel in first example and ResourceRenderer in second example. Please help.

Avatar

Community Advisor

Hi @Shashi_Mulugu -

To understand the requirement correctly, you want to expose the HTML markup of the component as part of the Sling model JSON response. Is that right?

To achieve this, Update the definition of the Sling model registered to that component with a variable to hold the markup and assign value to this using the response of Sling Request processor.

This way when you access the component path with JSON extension, the rendered json would contain the HTML markup of it.


Ref for using Sling Request Processor to generate the markup is: https://gist.github.com/nateyolles/1dc9f8699fce70916764

 

Though I haven't personally tried this, it should work theoretically. Let me know how it goes!

 

Avatar

Correct answer by
Employee Advisor

Hi @Shashi_Mulugu!

 

It would be interesting to learn more about the overall architecture of the solution design to provide good recommendations here.

In general, this sounds like a use case for Experience Fragments (XF) [1]. They are meant to be consumed by various channels and can be retrieved as HTML for consumption OOTB.

In general, retrieving HTML for a single component instead of an XF is also possible. Simply specify the path to the component inside the page hierarchy and add the .html extension.

Example from the we-retail sample content:

This will render the HTML of the hero image component:

 

<div class="we-HeroImage width-full jumbotron" style="background-image: url('/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten/_...">
        <div class="container cq-dd-image">
            <div class="we-HeroImage-wrapper">
                <p class="h3"></p>
                <strong class="we-HeroImage-title h1">Arctic Surfing In Lofoten</strong>
            </div>
        </div>
    </div>

 

Would this be the output you are looking for?

 

Hope this helps!

 

 

[1] https://experienceleague.adobe.com/docs/experience-manager-65/authoring/authoring/experience-fragmen...