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.  

	{
	"tabTip": CQ.I18n.getMessage("Wookie Widgets"),
	"id": "cfTab-Wookie-widgets",
	"xtype": "contentfindertab",
	"iconCls": "cq-cft-tab-icon wookie",
	"ranking": 1,
	"items": [
	CQ.wcm.ContentFinderTab.getResultsBoxConfig({
	"itemsDDGroups": [CQ.wcm.EditBase.DD_GROUP_ASSET],
	"items": {
	"tpl":
	'<tpl for=".">' +
	'<div class="cq-cft-search-item cq-cft-wookie-item" title="{pathEncoded}" ondblclick="CQ.wcm.ContentFinder.loadContentWindow(\'{[CQ.HTTP.encodePath(values.path)]}.html\');">' +
	'<div class="cq-cft-wookie-thumb-top <tpl if=\"!values.icon.src\">wookie-default-widget</tpl>" style="background-image:url(\'{[values.icon.src]}\');"></div>' +
	'<div class="cq-cft-wookie-text-wrapper">' +
	'<div class="cq-cft-wookie-title">{[values.name.content]}</div>' +
	'<div class="cq-cft-wookie-decription">{[values.description]}</div>' +
	'</div>' +
	'<div class="cq-cft-wookie-separator"></div>' +
	'</div>' +
	'</tpl>',
	"itemSelector": CQ.wcm.ContentFinderTab.DETAILS_ITEMSELECTOR
	},
	"tbar": [
	CQ.wcm.ContentFinderTab.REFRESH_BUTTON
	]
	},{
	"url": "/content/wookie_widgets.txt"
	}, {
	"baseParams": {
	/*"defaultMimeType": "image"*/
	"mimeType": "image"
	},
	"autoLoad":false,
	"reader": new CQ.Ext.data.JsonReader({
	"totalProperty": "results",
	"root": "widgets.widget",
	"fields": [
	"id", "author", "height", "description", "name", "width", "license", "version","icon"
	],
	"id": "id",
	})
	})
	]
	}

view raw custom_contentfinder.js hosted with ❤ by GitHub

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 :  

Here is the link to github repository : 
https://github.com/ankit-gubrani/Codebrains