Chuyển đến nội dung chính

[WCM] AEM CQ 561 - Add a button to Sidekick Bottom Toolbar

Problem

Add a button for viewing the page in wcmmode disabled. Here, on clicking the button added to sidekick bottom toolbar (beside Edit button), allows the user to view page in wcm disabled mode.

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/sidekick-button-wcmmode-disabled

2) Create node /apps/sidekick-button-wcmmode-disabled/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) We need a button icon, so create file (nt:file) /apps/sidekick-button-wcmmode-disabled/clientlib/css.txt and add

#base=source
wcmmode-disabled.css

4) Add the following code in /apps/sidekick-button-wcmmode-disabled/clientlib/wcmmode-disabled.css

#CQ .cq-sidekick .x-window-bbar .cq-sidekick-wcmmode-disabled {
    background-image:url(wcmmode-disabled.png);
}

5) Download below image and named wcmmode-disabled.png and commit to /apps/sidekick-button-wcmmode-disabled/clientlib

6) Create file (nt:file) /apps/sidekick-button-wcmmode-disabled/clientlib/js.txt and add

#base=source
add-wcmmode-disabled-button.js

7) Create file (nt:file) /apps/sidekick-button-wcmmode-disabled/clientlib/add-wcmmode-disabled-button.js and add the following code

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.Sidekick = {
    WCMMODE_DISABLED_BUTTON_ID: "experience-aem-sk-button-wcmmode-disabled",

    //add the button to sidekick bottom bar
    addWCMModeDisabled: function(sk){
        var bbar = sk.getBottomToolbar();
        var dButton = bbar.getComponent(0);

        //if the sidekick is reloaded, remove existing and add a fresh one
        if(dButton.getId() == this.WCMMODE_DISABLED_BUTTON_ID){
            bbar.remove(dButton, true);
        }

        dButton = new CQ.Ext.Button({
            id: this.WCMMODE_DISABLED_BUTTON_ID,
            iconCls: "cq-sidekick-wcmmode-disabled",
            tooltip: {
                title: "Disabled",
                text: "Switch to wcmmode=disabled"
            },
            handler: function() {
                var win = CQ.WCM.isContentWindow(window) ?  window.parent : window;
                win.location.href = sk.getPath() + ".html?wcmmode=disabled";
            },
            scope: sk
        });

        //add the button as first component in bottom toolbar
        bbar.insert(0, dButton );
    }
};

(function(){
    var E = ExperienceAEM.Sidekick;

    if( ( window.location.pathname == "/cf" ) || ( window.location.pathname.indexOf("/content") == 0)){
        //when the sidekick is ready CQ fires sidekickready event
       CQ.WCM.on("sidekickready", function(sk){
            //after the sidekick content is loaded, add wcmmode disabled button
           sk.on("loadcontent", function(){
                E.addWCMModeDisabled(sk);
            });
        });
    }
})();

8) Here is the extension structure in CRX


Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

[PERFORMANCE] Adobe WEM/CQ performance tuning

Adobe WEM/CQ performance tuning Contents Caching-related configurations CRX Bundle cache CRX Search index handler (Lucene) cache Tar PM index cache Scalability Maintenance Optimizing Tar Files (for Tar Persistence Manager) Data Store Garbage Collection Main documentation you should consult first: http://dev.day.com/docs/en/cq/current/deploying/performance.html http://dev.day.com/content/kb/home/cq5/CQ5Troubleshooting/performancetuningtips.html Caching-related configurations CRX Bundle cache CRX caches bundles, consisting of a node with all its properties. This is used by all bundle-based Persistence Managers. The default size of BundleCache is 8 MB. If this is too small it can cause an excessive number of read-accesses to the underlying persistence layer. Set the bundleCacheSize to something larger than the default. See more here: http://dev.day.com/docs/en/cq/current/deploying/performance.html#CRX%20Bundle%20Cache CRX Search index handler (Lucene...
Đăng nhận xét
Đọc thêm

[Query Builder] Advanced Search

Using the Advanced Search When using a list, select from the 'Build list using' options 'Advanced Search.' This will open a new tab in the list window with one text box labeled: 'Querybuilder Predicate Notation.' This is asking for a few lines of code to define search parameters. Example Code - With Explanations of Results Searching for Pages type=cq:Page property=jcr:content/jcr:title property.value=Places 'type' defines what sort of object you'll be searching for (it's usually a page). 'property' defines what property of the object you'll be filtering by; in this case, its by the title. 'property.value' defines your search term. So this search would be searching all PAGES with the TITLE of PLACES. So it would find every page titled Places. *IMPORTANT* Searches by title ARE case-sensitive, so 'Places' is not the same as 'places'. type=cq:Page path=/cq/sandbox property=jcr:cont...
Đăng nhận xét
Đọc thêm

How to custom CQ Login Module

In order to manage the login process in our project, we will use a custom CQ Login Module. We will admit the root URL of CQ instance is: http://localhost:4502/ . This value may change depending of your environment. The %CQ_HOME% variable we will mention refers to the CQ install path. It admits you have defined %CQ_HOME% as an environment variable. 1.         Update the repository definitions The login module must be referenced in the repository definitions. You have to edit the next file: %CQ_HOME%/crx-quickstart/repository/repository.xml Do a copy of repository.xml to repository.xml.original In repostiory.xml, replace  security  part of repository.xml with following: <Security appName="com.day.crx">         <SecurityManager class="com.day.crx.core.CRXSecurityManager"> <WorkspaceAccessManager class="org.apache.jackrabbit.core.security.simple.SimpleWorkspaceAccessManager"/>  ...
Đăng nhận xét
Đọc thêm