Headless - Get Component HTML output | Community
Skip to main content
Shashi_Mulugu
Shashi_Mulugu
New Participant
April 25, 2023
Solved

Headless - Get Component HTML output

  • April 25, 2023
  • 3 replies
  • 2166 views

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.

Best answer by MarkusBullaAdobe

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/_jcr_content/root/hero_image.coreimg.jpeg/1518108356405/surfer-wave-01.jpeg');">
        <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-fragments.html

 

3 replies

MarkusBullaAdobe
MarkusBullaAdobeAccepted solution
Employee
April 27, 2023

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/_jcr_content/root/hero_image.coreimg.jpeg/1518108356405/surfer-wave-01.jpeg');">
        <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-fragments.html

 

    Fanindra_Surat
    Fanindra_Surat
    New Participant
    April 27, 2023

    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!

     

      Siva_Sogalapalli
      Siva_Sogalapalli
      New Participant
      April 25, 2023

      @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#com.adobe.cq.export.json.ExporterConstants.SLING_MODEL_EXTENSION 

       

      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
        Nitin_laad
        New Participant
        April 26, 2023

        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 

        @8220494(service = Servlet.class, property = { "sling.servlet.resourceTypes=my/resource/type" }) public class MyServlet extends SlingSafeMethodsServlet { @3214626 private ResourceRenderer resourceRenderer; @9944223 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
          Shashi_MuluguAuthor
          New Participant
          April 26, 2023

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

            Terms & ConditionsAccessibility statement

            Loading footer...