Customize the sites.html

Hi ,

I am able to add the new buttons to the action bar in sites.html by customizing the selection actions but not able to do any activities. I am adding here my sample code and approach please guide me what needs to do fix this.

Here is my code in apps

<jcr:content

        jcr:mixinTypes="[sling:VanityPath]"

        jcr:primaryType="nt:unstructured"

        jcr:title="AEM Sites"

        sling:resourceType="granite/ui/components/shell/collectionpage"

        sling:vanityOrder="{Long}301"

        sling:vanityPath="/sites"

        consoleId="cq-sites"

        modeGroup="cq-siteadmin-admin-childpages"

        omnisearchLocationPath="/libs/granite/omnisearch/content/metadata/site"

        pageURITemplate="/sites.html{+id}"

        targetCollection=".cq-siteadmin-admin-childpages">

        <actions jcr:primaryType="nt:unstructured">

            <selection jcr:primaryType="nt:unstructured">  

            <test

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/endor/actionbar/button"

                    class="foundation-collection-action cq-siteadmin-admin-actions-eahelp-preview cq-siteadmin-admin-actions-publish-activator"

                    foundation-collection-action="\{&quot;target&quot;: &quot;.cq-siteadmin-admin-childpages&quot;, &quot;activeSelectionCount&quot;: &quot;single&quot;}"

                    foundation-mode-group="cq-siteadmin-admin-searchpages"

                    foundation-mode-value="default"

                    text="Test"

                    variant="actionBar"/>

          </selection>

        </actions>

    </jcr:content>

</jcr:root>

client libs for this

Client lib properties :

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

    jcr:primaryType="cq:ClientLibraryFolder"

    categories="[granite.ui.foundation.admin]"/>

and JS file I am trying to capture the click event.

(function(window, document, Granite, $) {

    "use strict";

     alert("hi");

    var TWITTER_ACTIVATOR = ".cq-siteadmin-admin-actions-eahelp-preview";

    $(document).on("click", TWITTER_ACTIVATOR, function(e) {

        var selection = $(".foundation-collection").first().find(".foundation-selections-item").first();

        var path = selection.data("foundationCollectionItemId") || selection.data("path");

     alert (path);

etc .........

I am not seeing any action for this button.

Here I have couple of doubts

1. Am I using the correct category ?If not what is the correct one to use it.

2.  Where can I get the list categories used in AEM? I tried to get the list but not able to get it.

Here is the my screen output

Please advice what needs to correct here and what needs to add extra to see the actions on this button. Very Urgent.

Thanks In Advance.