Need to view the components and templates in a live AEM page

Avatar

Avatar

saikumar_loganathan

Avatar

saikumar_loganathan

saikumar_loganathan

28-02-2020

Hello All,

 

I am trying to view the components and templates that have been used in a live AEM page but I am not able to find it? 

Can someone help me on how to find the template and the components used on the page? I am trying to view it using the "Inspect" tab in the Chrome Devtools since I do not have any access to any AEM development platform or author instance or publish instance

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

910

Correct Answer

1.0K

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

910

Correct Answer

1.0K
Jörg_Hoh
Employee

29-02-2020

If you do not have access to the authoring instance (or the source code of that project), it is normally impossible to find out details of the templates and components. You can start guessing on details of the HTML markup, but that's it.

Answers (1)

Answers (1)

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

28-02-2020

@saikumar_loganathan,
There's a number of ways on how you can get the page structure details from your AEM production site:

  1. If you are using Adobe's core page component, and editable templates, you can replace ".html" with ".model.json", and you will get a JSON representation of the page structure (resourceType & all used components); assuming that you're Apache Dispatcher module rules allow you to access .model.json. e.g: https://example.com/home.model.json
  2. Access your production publish instance, long path of a given webpage, and replace ".html" with ".tidy.inffinity.json" or ".model.json" (if using core page component), and you can get a JSON representation of the page structure(resourceType & all used components). e.g: https://publish.example.com/content/my-site/home.tidy.infinity.json or https://publish.example.com/content/my-site/home.model.json
  3. Access your production author instance, long path of a given webpage, and replace ".html" with ".tidy.inffinity.json" or ".model.json" (if using core page component), and you can get a JSON representation of the page structure.
  4. Access your production author instance, you can try the developer mode - https://helpx.adobe.com/uk/experience-manager/6-3/sites/developing/using/developer-mode.html

There's nothing new here, but utilising Sling's default JSON rendering, and with Adobe core page components, the utilising Sling Model's default exporter, the Jackson exporter. 
I hope this helps.