Implementing Synchronous Loading of Title and Value Components in Adobe AEM

[dineshkumar_aem]

Hello Adobe AEM Community,

I'm currently dealing with an interesting issue related to the Anchor Link Container within my AEM project.

Here is the scenario:

I've created a page using a specific template (let's call it Template1), which has a total of eight Anchor Link Containers. Each container includes a Title (acting as the headline) and a Content Fragment (acting as the value). Notably, the Title and Value are two separate components.

The flow of loading is such that the Title component is triggered first, followed by the Value component. For the Value component, we've set a path to the Content Fragment, which may or may not include the actual value. The visibility of the Title & Value pair depends on the existence of the value in the Content Fragment. If the value exists, the Title & Value should be displayed; if not, they should be hidden.

To manage this visibility, we check the Content Fragment value first, and then adjust a node property called "isDisplayTitle" to true/false accordingly. However, there's a catch. On the first page load, all titles are hidden because the Title component loads before the Value component, preventing it from receiving the correct value. Refreshing the page resolves the issue, but this is not an optimal solution.

We attempted to employ a Resource Change Listener to address the problem, but we are unsure how to inform HTL from Java (as our understanding is that HTL can call Java, but the reverse isn't true).

Our current strategy is to develop a Servlet class that retrieves all Content Fragment values and subsequently sends the status to the title. However, we're facing difficulties calling the servlet from the Model class. Is it a rule that servlets can only interact with external I/O?

Can anyone provide a potential solution to this issue? Also, would it be a good idea to leverage JavaScript for this use case? If yes, any recommendations on the best approach would be greatly appreciated.

Thanks in advance for your valuable insights.

[AsifChowdhury · Accepted solution]

Hi @dineshkumar_aem 

The issue you described with the Anchor Link Container and its dependent Title and Value components can be effectively addressed with a combination of backend Java (Model) and frontend JavaScript (Client-Side).

To tackle the problem of the Title component being hidden on the first-page load due to the asynchronous nature of loading components, you can adopt the following approach:

1. Backend Java (Model) Solution:

   • In the Model class, fetch the Content Fragment values and determine if they exist or not.
   • Set a boolean flag (e.g., isValueAvailable) based on the existence of the value in the Content Fragment.
   • Pass this flag to the HTL (HTML Template Language) that renders the Title component.

2. Frontend JavaScript Solution:

   • In the client-side JavaScript, use JavaScript or jQuery to detect when the page has fully loaded, including all components and content.
   • After the page has loaded, perform a client-side update to toggle the visibility of the Title components based on the isValueAvailable flag set in the backend.
   • This way, the visibility of the Title & Value pairs will be adjusted correctly based on the content availability.

Here's a high-level overview of how you can implement these solutions:

Backend Java (Model) Changes:

// In your Model class:
boolean isValueAvailable = false;
// Fetch Content Fragment values and set isValueAvailable based on content existence

// Set the isValueAvailable as a request attribute to be used in the HTL template
request.setAttribute("isValueAvailable", isValueAvailable);

HTL (HTML Template Language) Changes:

<!-- In your HTL template for the Title component -->
<sly data-sly-test.isValue="${model.isValueAvailable}">
    <!-- Title & Value component markup when value is available -->
    <h1>${title}</h1>
    <div>${value}</div>
</sly>

Frontend JavaScript Changes (using jQuery):

// In your client-side JavaScript
$(document).ready(function() {
    // Wait for the page to fully load, then adjust the Title component visibility
    adjustTitleVisibility();
});

function adjustTitleVisibility() {
    // Detect the value availability based on your content structure
    var isValueAvailable = // code to determine value existence

    // Toggle visibility of Title component based on value availability
    if (isValueAvailable) {
        $('.your-title-component-class').show();
    } else {
        $('.your-title-component-class').hide();
    }
}

By combining backend Java (Model) with frontend JavaScript (Client-Side) solutions, you can ensure that the correct visibility of the Title & Value pairs is achieved on both initial page load and subsequent interactions, providing an optimal user experience.

Hope it can help you.