Step 1: Create an Experience Fragment in AEM. Let’s assume we have an Experience Fragment named “Header XF.” or “Footer XF.”

Step 2: Create a custom AEM Servlet to expose the Experience Fragment (XF) as JSON data. This allows other channels or websites to fetch the fragment data programmatically.

import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.json.JSONObject;

import javax.servlet.Servlet;
import java.io.IOException;

@SlingServlet(paths = "/api/xf/header-xf", methods = "GET")
public class MyFragmentServlet extends SlingSafeMethodsServlet {
@Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
  try {
      // Fetch the XF content
     ResourceResolver resourceResolver = request.getResourceResolver();
     Resource fragmentResource = resourceResolver.getResource("/content/experience-fragments/header-xf");

   // Convert the Experience Fragment content to JSON
  JSONObject fragmentJson = convertToJSON(fragmentResource);

   // Set the response content type
   response.setContentType("application/json");

  // Write the JSON data to the response
  response.getWriter().write(fragmentJson.toString());
 } catch (Exception e) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
response.getWriter().write("Error fetching Experience Fragment: " + e.getMessage());
  }
}

private JSONObject convertToJSON(Resource fragmentResource) {
    // Convert the Experience Fragment content to JSON
   // You can customize this part based on your specific content structure
  JSONObject fragmentJson = new JSONObject();
  // Populate fragmentJson with content data

return fragmentJson;
   }
}

In the code above, we created a custom servlet that listens to requests at /api/xf/header-xf and returns the content of the “Header XF” Experience Fragment as JSON. Same can be done from Footer XF.

Step 3: Fetch the Experience Fragment on Other Channels

Now, on other channels or websites, you can use HTTP requests to fetch the exposed Experience Fragment data:

// Example using JavaScript to fetch the Experience Fragment data
fetch('/api/xf/header-xf')
   .then(response => response.json())
   .then(data => {
        // Use the fetched data to render the Experience Fragment on your channel or website
       renderXF(data);
})
     .catch(error => {
         console.error('Error fetching Experience Fragment:', error);
});

In this JavaScript example, we use the fetch API to make a GET request to the AEM servlet we created earlier. Once the data is retrieved, you can use the renderXF function to display it on your channel or website as needed.

Exposing Experience Fragments in AEM (HTML)

Using JAVA

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.slf4j.Logger;import org.slf4j.LoggerFactory;

import javax.servlet.Servlet;
import java.io.IOException;

@SlingServlet(
resourceTypes = "your-project/experience-fragment/resource/type", // Replace with the correct resource type               selectors = "HTML",
   extensions = "HTML",
   methods = "GET"
)
public class ExportExperienceFragmentServlet extends SlingSafeMethodsServlet {

private static final Logger log = LoggerFactory.getLogger(ExportExperienceFragmentServlet.class);

@Override
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
      try {
         // Fetch the Experience Fragment resource based on the request
         // Replace "your/project/experience-fragment/resource/type" with the actual resource type of your Experience Fragment
         Resource experienceFragmentResource = request.getResource();

         // Generate HTML representation of the Experience Fragment
         String htmlContent = generateHtmlFromExperienceFragment(experienceFragmentResource);

         // Set response content type to HTML
         response.setContentType("text/html");

         // Write the HTML content to the response
         response.getWriter().write(htmlContent);
        } catch (Exception e) {
         log.error("Error exporting Experience Fragment as HTML: {}", e.getMessage(), e);
         response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
         response.getWriter().write("Error exporting Experience Fragment as HTML: " + e.getMessage());
    }
}

private String generateHtmlFromExperienceFragment(Resource experienceFragmentResource) {
         // Implement logic to generate HTML representation of the Experience Fragment
        // You can use the Sightly/HTL templating language or any other method to render the fragment as HTML
       // Here's a simplified example:

        StringBuilder htmlBuilder = new StringBuilder();
        htmlBuilder.append("<div class=\"experience-fragment\">");

        // Add content from the Experience Fragment's components
        ValueMap properties = experienceFragmentResource.getValueMap();
        String title = properties.get("jcr:title", String.class);
        String description = properties.get("jcr:description", String.class);

        htmlBuilder.append("<h2>").append(title).append("</h2>");        
        htmlBuilder.append("<p>").append(description).append("</p>");

        htmlBuilder.append("</div>");

        return htmlBuilder.toString();
     }
}

Make sure to adapt this code to your specific Experience Fragment structure and HTML rendering requirements. Additionally, handle errors and security considerations according to your AEM project’s needs.

USING JavaScript

<!DOCTYPE HTML>
<HTML>
<head>
  <title>Fetching Experience Fragment HTML</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>    
  <div id="experience-fragment-container">        
  <!-- Experience Fragment content will be inserted here -->    
</div>

<script>        
 $(document).ready(function () {            
 // Define the URL of your custom servlet            
 const xfUrl="/content/yourproject/header-xf.html"; // Replace with the actual servlet URL

     // Make an AJAX request to fetch the HTML            
     $.ajax({               
     url: xfUrl,                
     method: 'GET',                
     dataType: 'html',                
     success: function (htmlContent) {                    
       // Insert the fetched HTML into the container                    
       $('#experience-fragment-container').html(htmlContent);            
        },
       error: function (xhr, status, error) {
       console.error('Error fetching Experience Fragment HTML:', error);    
       }
       });
  }); 
   </script>
</body>
</html>

This code demonstrates how to use jQuery AJAX to fetch the HTML representation of an XF from AEM and display it on a web page.

Provide Access to CSS and JavaScript:

• Ensure that the CSS and JavaScript files are accessible by external websites. This might involve configuring your AEM server or CDN to serve these assets to external domains.

Set Up Cross-Origin Policies:

• If your different websites are hosted on separate domains or subdomains, you may need to configure Cross-Origin Resource Sharing (CORS) policies to allow them to access resources from the central repository. This ensures that the header and footer fragments can be loaded in different websites without security restrictions.

By following this blog, you can expose an Experience Fragment in form of HTML or JSON from AEM along with its associated CSS and JavaScript for use on other websites to maintain control and consistency.

Written and curated by: Digvijay Singh Tomar, Lead Digital Architect – AEM. You can follow him on Linkedin.