How to find all client library files(JS and CSS) in AEM?

Today in this tutorial we are going to learn how to find all client library files (JS and CSS) in AEM? 

In AEM we have a console to find all the client libraries and their dependencies along with JS and CSS files. Using the below URL we can access that console.

http://localhost:4503/libs/granite/ui/content/dumplibs.html

We can also filter our library files on the basis of categories and templates.

• If you want to see all the files belongs to particular categories then put the category name in the categories field and click on the search button.

• If you want to see only JS or CSS files from particular categories then put the type JS for javascript files and CSS for cascading style sheet files and click on the search button.

• Also, you can find the files based on the theme. Using this you will be able to identify what all library files are being used in this theme. To find the related files with theme simple put the name of the theme in the Theme section and click on the search button

Below is the screenshot where we have applied filter on the basis of categories and type:

List of client libraries in AEM 

There are two parts or sections of this report as you can see in the above screenshot.

1. The result section will give you results based on the applied filter.
2. and the second section has Libraries by Path which have information of the file. Here as you can see the first column has the name of the file along with its path, the second column will let you know the type of that file either JS, CSS or image, and the last column contains the information regarding its group (from where this file belongs) which we called categories in AEM.

For more about clientLibs please refer: http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Check at how many places a component is being used in your site in AEM?

Today I am going to tell you guys a very powerful out of box component or tool of AEM. 
Component report a useful report to know about a particular component, using this you can check in your author instance that at how many places you are using a particular component. This check is only possible in author instance not in publish.
Questions can be like this as well: How to customize component report? What is component report? What is the purpose of component report? How to use component report? Find the component being used on page? What is rule and reports? 

To check a component:

1. Goto URL http://localhost:4502/etc/reports/compreport.html from your browser. This will open a new window which have no reports and nothing as showing is the below screen.

2. Select the edit option from the top left of the page below the on/off button or component report text. When you clicked on edit button a new popup will appear which will create a new report. As shown in the below screen shot.

a. Title: Give a title to your report.

b. Description: Give detail description to your report. 

c. Root path: Select the path under which you wants to check the component being used. this will let you select a path from dropdown.

d. Report processing: In report processing we can see there are two options one is automatic refresh and another is manual. Select as per your need.

e. Snapshots: Report snapshot have three options.

1. No Data snapshot
2. Daily data snapshot
3. Hourly data snapshot 

3. Click on the OK button from the bottom of the dialog to save and run the report.


4. Then you will see a lots of data will appear on the component report screen. as showing in the below image. 


5. From the list sort component type with group name. To do so put your cursor at the end or the column Component Type, then a dropdown will appear with the sorting options. Select the option "Group by this column"



This report contains the 

1. Page: It will show the name of page of number of pages.
2. Component Type: Path of the component or name of teh component.
3. Component Path: Path of the component or number of places this component is being used.
4. Author: Name of the Author who did the authoring for this component at that page.
5. Last Modified: Date and time of last modified.

In the above report you can see a component formname (second row) is being used at two places under the given directory.