Headless - Get Component HTML output

[Shashi_Mulugu]

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.

[Siva_Sogalapalli]

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

[Nitin_laad]

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);
    }
}

[Shashi_Mulugu]

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

[Fanindra_Surat]

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!

[markus_bulla_adobe · Accepted solution]

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:

• http://localhost:4502/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten/jcr...

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