How do I manipulate the component groups allowed in sidekick according to different websites in my CQ5 instance?

Question

http://helpx.adobe.com/experience-manager/kb/HowToDefineComponentListDynamically.html
I tried above but due to incompleteness of the article, I failed. What exactly happens when a page loads?
Which js calls which js?
How do I override 'update' function of ComponentList.js?
How do I get it called?
I tried using listeners and failed(perhapse due to first time with listener?)

Answer 1

Each client side component also gets a cell search path and eventually a CQ.wcm.Cell >assigned. The array of allowed components is kept in a CQ.wcm.ComponentList class of which there is an instance per page.

The insert dialogs and the sidekick get the final list of component from that object.

The "updatecomponentlist" listener can be registered using the normal editConfig listeners on the container component

As per the documentation sidekick reads the component list from the design path and to modify that on the client side you have to add updatecomponentlist event listener in the edit config of a container component.

I won't be able to tell you the internals but I can tell you to manipulate the component list in the SideKick.

1. You have to extend the parsys component and for the purpose of this answer call it myparsys

2. Add an cq:listeners node inside the cq:editConfig node of myparsys.

3. Inside the node cq:listeners add a property updatecomponentlistener and its value should be the function provided here

   function MyHandler(cell, allowed, componentList) {
     // manipulate the 'allowed' array if needed
     if(allowed instanceof Array)
         allowed.push('your component group');
   }
   

4. In your page use the myparsys component

The only catch here is that it doesn't work if the allowed parameter is a string. That happens when you have single component or single group allowed in your design path for that page. So to make it work always, in your design path keep the allowed component list empty and change the allowed components in the runtime.

Also as per documentation, this is not supported properly

Please note that "runtime" manipulations of the component list is currently not supported. >i.e. if the list of allowed components depends on client side changes, this can't be >propagated to the dialogs.

This means that in the design dialogs, the components that you have allowed in runtime will not be shown selected to the authors.

So I would suggest you to consult a proper CQ developer or ask on official CQ forums or Adobe forums whether this use case is recommended or not.