Creating custom Content Finder tab in AEM
AEM provides a quick and easy way to find & use content while editing a page via Content Finder. Content Finder is a way to search different types of assets stored in AEM and make them available for drag N drop on the pages.
Creating a custom tab in Content finder makes it easier for user locate content or drag N dropable data. While creating a connector tool for AEM I came across this use case where I had to provide custom tab in the content finder to make data available for user while editing the page.
Creating custom tab is a 2 step process :
- Creating a back-end service for providing data.
- Creating custom content finder step.
1. Back-end service : It provides the data to the custom content finder tab to display. For this post I have created a text file with JSON data, in real world scenario it would be a service providing dynamic data.
2. Creating custom content finder step :
- Create a folder with jcr:primaryType as sling:folder under /apps/wcm/extensions hierarchy with name contentfinder.
- Set property extensionGroup as tabs on "contentfinder" folder.
- Set property extensionType as "contentfinder_extension" on contentfinder folder.
- Now create a JS file under contentfinder folder.
Here is the link to github repository :
Above code creates a new content finder tab with name mentioned as tabTip property, setting the ranking as 1 makes this tab to appear on #1 position in the content finder, iconCls property sets the class on the tab and displays the icon on the tab. The most important part is creating a result box using CQ.wcm.ContentFinderTab.getResultsBoxConfig to display the result fetched from URL mentioned.
After creating a similar JS file there will be new tab added in the content finder as shown here :