Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Checking if a particular component is included in a page

Avatar

Level 2

I need to take say Action A if a particular component is included in a page.

shubham_naik_0-1648564834713.png

Consider the above given page 
for this page(ie landingPage) i need check if mediaImage component is included in the page.
I found a reference where it was said it can be done with a slingQuery to check if component exists in that page
if yes then can get a reference code snippet?
if no what other approach can we used?
Thanks you

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Other than using the Query Builder (mentioned by most replies on this thread), you can Component Search by the Components Console.

Under Tools -> General -> Components. The Components Console displays search results in a list of pages where the component is being used; rather than each node from the example above. This console is accessible to authors so that even they can check which pages use the searched component.

Step 1: Within your running AEM instance, visit http://localhost:4502/libs/wcm/core/content/sites/components.html.

Step 2: Search for a component. Insert your search criteria with either by “keyword”, “component path”, or “component group”. On every change of the search criteria, you should see results in a list format on the right hand side of the search left side bar.
Step 3: Click on the targeted component, and you will be redirected to the details page.
Step 4: From the details page, click on “live usage”, and a results-list of pages will be displayed, where the targeted component can be found.
Step 5: From the results-list, clicking on a link will open the page’s editor.

 

full blog article: https://sourcedcode.com/blog/aem/how-many-times-is-an-aem-component-used-in-the-jcr#components-conso...

 

View solution in original post

11 Replies

Avatar

Community Advisor

Hi,

 

Other than sling query, you can try adding the component name to jcr:content node when component is rendering , so that all the list will be present at one place and easy to read. 

 

 

Avatar

Employee Advisor

Hi @shubham_naik ,

Use this query to get the components on the page.

 

type=cq:Page
property=jcr:content/par/*/sling:resourceType
property.value=put-your-component-resourceType
path=content-wehre-you-need-to-search
p.limit=-1

Avatar

Community Advisor

If your action A is any front-end related action or any servlet call.

  1. You can add an identifier(any class or Id) to mediaImage component and then you can check for that identifier and perform your action

Else you have traverse through nodes using slingQuery(Get resource and iterate through child nodes) and check for image-media component then perform your action.

Avatar

Level 2

Hi @Varun_Shakya the action basically I am trying to perform is
whenever a page is loading , if that particular component is in the page, a specific js clientLib needs to get added.
can you please provide a snippet of a slingQuery to Get resource and iterate through child nodes and check for image-media component, I have tried variation of this and still not hitting the mar.
thank you

Avatar

Community Advisor

If you want to add any clientlib one the existing of any component , Why you are not adding that clientlib in component only . So whenever your  required component loads, clientlibs loads

Avatar

Community Advisor

Hi @shubham_naik 

Use the below xpath query to find the corresponding page where this component is used.In the below example it takes the root node and list all the path where this image component is used.

 

type=cq:page
path=/content/wknd/en
1_property=sling:resourceType
1_property.1_value=wknd/components/content/image
orderby=@jcr:score

To use this xpath programatically please refer below article replace this xpath query in the below article to fetch the result via code.

 

https://aem.redquark.org/2018/10/day-17-working-with-query-builder-api.html

 

Regards,

Rajashankar.R

Avatar

Correct answer by
Community Advisor

Other than using the Query Builder (mentioned by most replies on this thread), you can Component Search by the Components Console.

Under Tools -> General -> Components. The Components Console displays search results in a list of pages where the component is being used; rather than each node from the example above. This console is accessible to authors so that even they can check which pages use the searched component.

Step 1: Within your running AEM instance, visit http://localhost:4502/libs/wcm/core/content/sites/components.html.

Step 2: Search for a component. Insert your search criteria with either by “keyword”, “component path”, or “component group”. On every change of the search criteria, you should see results in a list format on the right hand side of the search left side bar.
Step 3: Click on the targeted component, and you will be redirected to the details page.
Step 4: From the details page, click on “live usage”, and a results-list of pages will be displayed, where the targeted component can be found.
Step 5: From the results-list, clicking on a link will open the page’s editor.

 

full blog article: https://sourcedcode.com/blog/aem/how-many-times-is-an-aem-component-used-in-the-jcr#components-conso...

 

Avatar

Level 2

I tried this in my local, however when I go to the component details page where you see these tabs ("Basic", "Advanced", "SEO", "Analytics", Thumbnail", "Social Media", "Cloud Services", "Personalization" and "Permissions"), but "Live Usage" isn't included. 

Avatar

Community Advisor

Hi @shubham_naik ,

 

I believe you must have received your answer, in case you are still looking for that then you can watch this video.

https://www.youtube.com/watch?v=L3LMEKMUhVA&t=8s 

 

Hope it helps!