AEM 61 - TouchUI Asset Finder Default To Pages

Goal

When loaded in browser, Asset Finder of TouchUI Editor shows Images by default; this post is on changing the default to Pages

A sample Asset Finder group and registering controller is available here

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-asset-finder-default-page

2) Create node /apps/touchui-asset-finder-default-page/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.editor.hook.assetfinder

3) Create file (nt:file) /apps/touchui-asset-finder-default-page/clientlib/js.txt and add

                       default-to-page.js

4) Create file (nt:file) /apps/touchui-asset-finder-default-page/clientlib/default-to-page.js and add the following code

(function ($, $document) {
    "use strict";

    //id assetfinder-filter and class .assetfilter.type are defined in
    ///libs/wcm/core/content/editor/jcr:content/sidepanels/edit/items/assetsTab/items/filterPanel/items/views/items/search/items/searchpanel
    var PAGE_CONTROLLER = "Pages",
        ASSET_FINDER_FILTER = "#assetfinder-filter",
        ASSET_FILTER_SELECTOR = ".assetfilter.type";

    $document.on("cq-content-frame-loaded", makePageOptionDefault);

    function makePageOptionDefault(){
        var $assetFinderFilter = $(ASSET_FINDER_FILTER),
            $assetFinderType = $assetFinderFilter.find(ASSET_FILTER_SELECTOR),
            cuiSelect = $assetFinderType.data("select");

        cuiSelect.setValue(PAGE_CONTROLLER);

        $assetFinderType.trigger($.Event('selected', {
            selected: PAGE_CONTROLLER
        }));
    }
})(jQuery, jQuery(document));