Flow of Control in AEM - Front end to Middle layer to back end

[nsvsrk]

Hi all,

I am trying to understand Flow of Control in AEM - Front end to Middle layer to back end.

Let us assume I have created a template T, components C1, C2 and C3.

I created a page P using this template and configured all components.

Front end is in Sightly and Back end is in Servlets, Sling Models and OSGI Services.

How to understand the flow of control, say from a button on front end?

I could look at the components code, but they were configured during page P creation.

Appreciate all your replies.

Thanks,

RK.

[Abdul_Wajeed]

Hi @nsvsrk ,

Here's a concise overview of the flow of control in AEM, from frontend (HTL) to backend

Let’s break down the Flow of Control in your scenario, where a page is built using Template T and Components C1, C2, and C3, and the frontend is in HTL (Sightly) while backend logic resides in Sling Models, Servlets, and OSGi Services.

1. Page Rendering: When page P loads, AEM resolves the template T and includes components C1, C2, and C3 via their resource types.

2. HTL + Sling Models: Each component's HTL (.html) uses a Sling Model to fetch data (e.g., from JCR or services).

3. User Action: When a button is clicked, JavaScript (on the frontend) sends an AJAX/fetch request to a backend Sling Servlet.

4. Servlet Processing: The servlet handles the request and delegates logic to an OSGi Service (if needed), which performs business operations.

5. Response: Servlet returns a response (e.g., JSON), and the frontend handles it (e.g., success message, redirect, etc.).

To trace this, inspect the page's JCR structure in CRX/DE, check component resource types, follow the Sling Model, and debug JavaScript calls in your browser.

[nsvsrk]

Nice overall description @Abdul_Wajeed .

I am looking for next lower level description of the process.

Is there any tutorial on this please?

A very simple page is enough for me to understand.

Given components are configured, how to trace through the configured values?

I mean I could see components and template inside /apps/<Project> folder.

But, where does the configured P reside in CRX DE ?  /content folder?

Thanks,

RK.

[nsvsrk]

I can look at the page, but not aware of the template used.

How to know template used?

May be something like:

   1.Know template used.

   2.Look at resourceType attribute of template to reach out to Page Component.

But all this so far is developer work.

Author comes, create page P.
As an example, he may update a Hyper link URL.

Sling Model used could be seen directly in the Sightly code.

Please guide me.

Thanks,

RK.

[nsvsrk]

Kindly validate:

Main Back end modules are:

1. Sling Models: Called directly from Sightly code using data-sly-use.

Possible to invoke from Servlets or OSGI Services?

2. Servlets: Called inside JS residing in ClientLibs folder.

When the page loads or when a button is clicked, from browser we should look at Developer Tools ->  Network and see what Servlet is being called.

Could be selector based also.

For selector based, where to check?

3. OSGI Services: Not called from Front end directly.

Invoked from Servlets or Sling Models using @reference or so annotations.

Is this hypothesis true?

Any such more detailed pointers will help.

Thanks,

RK.