Component not showing in Touch UI / SideKick of Classical UI in AEM

To see component in the Touch UIIf you want to see the component in touch UI components list. The component Should have cq:editConfig node

To See Component in the SideKick in Classic UI
The component should have dialog.
if the component has dialog and not showing in the sidekick. Check the title of Component it should start with a capital letter.

In AEM, can I prevent Sidekick from showing?

Under certain circumstances, I want to prevent the Sidekick from being displayed on a page. I tried some things:

Removing the init.jsp include. This works, but it also prevents certain CQ javascript libraries from being loaded, and I need these libraries.
Adding a jquery onload event to hide the sidekick.

$(function() {CQ.WCM.getSidekick().hide()});
This doesn't work because the sidekick isn't loaded yet.

Adding a jquery onload event with a timeout.

$(function() {
  setTimeout(function() {
    CQ.WCM.getSidekick().hide(); 
  }, 1)
});
But this is not reliable. Setting the timeout too low will have a high chance of failure. Setting it too high will cause it to appear then disappear, which is unacceptable.

Best How To:
There are various ways to achieve this.

If you want the sidekick to be unavailable in all the pages, just comment out the following piece of code available in the init.jsp

CQ.WCM.launchSidekick("<%= xssAPI.getValidHref(currentPage.getPath()) %>", {
    propsDialog: "<%= dlgPath == null ? "" : xssAPI.getValidHref(dlgPath) %>",
    locked: <%= currentPage.isLocked() %>
});
In case, you want the sidekick to be unavailable only under specific conditions, you can listen to the sidekickready event fired by the CQ.WCM class as shown below, and then hide the sidekick.

CQ.Ext.onReady(function(){
    var top = CQ.WCM.getTopWindow();
    if (top.CQ.WCM.isSidekickReady()) {
        top.CQ.WCM.getSidekick().hide();
    } else {
        top.CQ.WCM.on("sidekickready", function(sidekick) {
            sidekick.hide();
        });
    }
});
EDIT - Explaining the lengthy code

The above script is written to work in any component without issues, not just the init.jsp.

The CQ.Ext.onReady is to execute our code after the DOM is ready. CQ.WCM.getTopWindow() fetches the topmost window. In case our script is executed after the sidekick is ready, then the sidekickready event would have been fired already and hence our code might not execute.

Hence we first check if the sidekick is already available using top.CQ.WCM.isSidekickReady() and in case it isn't, we attach a listener to the sidekickready event, so that we are notified when it is ready.

Hide CQ Workflows in Sidekick Dropdown

If you'd like to hide non-applicable workflows from being seen by users, it is said that you can hide a custom you can remove a tag named 'Workflow:WCM' to control the workflow to display or to hide. No so true, at least not for CQ/WEM 5.6.1. My experiments show that to have a workflow shown in the sidekick, the workflow page/node must either have no tag at all or be tagged with 'Workflow:WCM."

Should you want to hide a workflow from the sidekick, the trick is to tag it with anything else, for example, "Workflow:Misc":


Remember to save (step #3) when you're done.

References
Hide workflows in sidekick dropdown?
Workflow in the sidekick

Component Group not visible in AEM Sidekick

Component Group not visible in AEM Sidekick
In this post, I will address a common issue which we face when we create a component with a new group.
Sometimes it happens that we create a component using CRXDE Lite and defined a new group there & when we go to our web page sidekick in design mode, we are not able to see this component group there.
Most AEM developers are suffering from this common issue and we are not able to find why this group not visible in the sidekick. In this post, I will show you what common mistake we did while we create a component using CRXDE Lite. So

Agenda
1). Why Component group not visible in sidekick?
2). How to resolve this issue?
3). How to make it work as it is i.e. without changing in the component?

NOTE: –
This problem is present in CQ5.x as well as AEM6 so it’s solution work for all CQ5.x and AEM6 version.

For addressing this issue I just create a new component with these properties –


Everything is looking right but when I go to your web page sidekick in edit mode, click on parsys edit button, in this list are not able to see this component group.

Cause of this issue.
My finding tells that jcr:title property started with a small letter, So that it’s not visible in a sidekick.

Solution
Just change this property value “blog” with “Blog” & again go to your web page. First clear your browser cache, then refresh your web page. goto sidekick. Here it is, your component is visible here.

Convention to create new Component According to my findings
As you see there are a lot of groups present in sidekick, all are started with a capital letter, so you just follow this assumption while creating a new component –

1). Keep jcr:title property values Starting with a capital letter. It’s a mandatory property for displaying this component group in the sidekick.
2). Keep componentGroup property starting with capital letter, while it’s not mandatory but for displaying it in sorted order in the sidekick, it’s good to have it. if you don’t define this property then this component will be visible under “NO GROUP DEFINED!” component group.

How to make it work without changing these properties?
Some of my colleagues ask me that we don’t want to change these properties then how to use this component group.
Answer is when you select a group from sidekick then it’s value will be stored at template node under design page jcr:content node. This design page property is a template level property and present at jcr:content node of your template. If you don’t define this property then AEM create a nt:unstructured node under /etc/designs/default/jcr:content node having name same as of your template name.

In my case, I don’t define any design page property so I have my design level properties under /etc/design/default/jcr:content node, with the name of my template name (homepage). This node is of type nt:unstructured.
Under this node we have a different node for different parsys, just go to any parsys node in my case it is par as displayed –

Select your par node, here you will see some properties on your right panel of the screen. it looks like –


If you select any of group like General or any other then you will see components property but if you don’t select any of group then this property will not be displayed. If you don’t have this property then Just create this property as a string array and set its value having syntax

Syntax – I
group:<new group name>
in my case it is
group:blog

Syntax – II
Copy and paste the relative path or absolute path of your component. In my case it is /app/blogComponent/components/content/blog

Here no need to define group: prefix.
Save it, go to your web page, clear browser cache, and reload the page now you are able to see you component group in the sidekick. This is the fix only but if you want to remove it from sidekick then it’s not possible to directly uncheck from sidekick as it is not visible in that list, So you have to do it manually.

AEM sidekick not visible

How to display sidekick in AEM page template.
In AEM the sidekick is an important UI to get access to various components in our application.
It's very important to get access to it while authoring our pages.

Here are some causes which answers the question

Why the AEM sidekick is not visible?
1. Viewing in Touch UI editor.
The latest versions of AEM opens a page to be authored in Touch UI. The sidekick is accessible in the Classic UI. To go to the classic UI you can do the following.

i. Replace the editor.html from the URL with cf#. So this means

Editor Mode (Sidekick Hidden): http://localhost:4502/editor.html/content/myProject/abc.html
Classic UI Mode (Sidekick Visible): http://localhost:4502/cf#/content/myProject/abc.html
ii. From the menu open Classic UI.

For doing this click on this button on the left top corner of the editor.

Select "Open in Classic UI" from the drop down menu.


2. Including the init.jsp file.
As the name suggests the init.jsp file helps to initialize vital components to load the sidekick. If you don't include this file then the AEM sidekick will not be visible.

To include the file copy and paste the line below to your Page Component. (Page component is the component which you use to create the page template.)
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>

3. A component causing error which prevents sidekick to load.
In some cases the sidekick is not able to load one of the components added to the paragraph system in design mode. This could be due to a problem with the component.

To fix this we need to delete our ewly added components one by one until the problem component is found.

To do this:
Log in to CRXDE.
Navigate to /etc/designs/[your application name].
The structure in /etc/designs is parallel to your templates' content structure.
For example, /etc/designs/geometrixx/jcr:content/homepage/par is a paragraph system in Geometrixx's homepage template.


On expanding the homepage node.


So we can one by one delete the components like section/colctrl/section/..... until the problem component is found.

Sidekick Customization

Sometimes it is necessary to override the default behavior of CQ Sidekick. For example, you need to reload the page when the author presses the "Preview" button to apply some javascript logic or rename buttons in Sidekick, etc.

There are two ways to do it:
1). Straightforward (ugly). You need to copy script init.jsp from "/libs/wcm/core/components/init" directly under your application folder, customize it, and include it from your page. (You can also copy this script under /apps but that would affect all other applications on this CQ instance).
Let's reload the page when the author clicks on the Preview button.

For that we need to change these lines:
    CQ.WCM.launchSidekick("<%= currentPage.getPath() %>", {
        propsDialog: "<%= dlgPath == null ? "" : dlgPath %>",
        locked: <%= currentPage.isLocked() %>,
        previewReload: "true"
    });
Notice previewReload property, it does the trick.

Next we need to include this script from our page component:
    <cq:include script="/apps/skywalker/init.jsp" />

2) Programmatic (preferable approach).
Inside your page component please use the following code:

<script>
    function checkSidekickStatus() {
        if (CQ.WCM.isSidekickReady()) {
            CQ.WCM.getSidekick().previewReload = true;
            clearTimeout(timeout);
        }
    }
    var timeout = setInterval(checkSidekickStatus, 1000);
</script>

In other words, we wait until sidekick is loaded and then modify its properties. In this case, we set previewReload to true. To check all available properties of sidekick please visit http://dev.day.com/docs/en/cq/current/widgets-api/index.html and search for "sidekick" there.

Reasons why my component doesn’t show in the sidekick

In this case, it was a component without authorable fields, instead of having the display pull from a central administration screen. I write this hoping I’ll save other new developers a lot of time in the future:

1. In order for a component to show in the sidekick, it MUST have either a dialog or design_dialog node defined as part of the component, even if there are no fields. In this case, I suggest using the cq:editConfig node to remove the “edit” action and change the layout to “editbar” — thus providing a top bar to make the component visible but avoiding the author's frustration of no editable fields.
2. Add the component to a componentGroup that doesn’t start with a period. Technically, you don’t have to assign it to any group but you REALLY should as a best practice. Any component group that starts with a period will be hidden in the sidekick, not just “.hidden”. This is for organizational purposes, you could still have groups like “.hiddenHeader” and “.hiddenFooter” if you needed. Neither of these will show in the sidekick.
3. The component or its group must be enabled for a parsys on the page in DESIGN mode. Once enabled, it will show up in the sidekick but you will only be able to drag it to locations for which the component has been enabled.

java.lang.NullPointerException:null at com.adobe.granite.workflow.core.WorkflowSessionFactory.isSuperUser(WorkflowSessionFactory.java:298)

The components are not listed in sidekick and the sidekick is empty while opening the pages in author with the following exception.



26.09.2015 07:29:40.868 *ERROR* [10.194.0.83 [1443270580848] GET /libs/wcm/core/content/pageinfo.json HTTP/1.1] org.apache.sling.engine.impl.SlingRequestProcessorImpl service: Uncaught Throwable

java.lang.NullPointerException: null at com.adobe.granite.workflow.core.WorkflowSessionFactory.isSuperUser(WorkflowSessionFactory.java:298) at com.adobe.granite.workflow.core.WorkflowSessionFactory.getWorkflowSession(WorkflowSessionFactory.java:326) at com.adobe.granite.workflow.core.WorkflowSessionFactory.getAdapter(WorkflowSessionFactory.java:461) at org.apache.sling.adapter.internal.AdapterManagerImpl.getAdapter(AdapterManagerImpl.java:147)

at com.day.cq.workflow.impl.CQWorkflowService.getWorkflowSession(CQWorkflowService.java:148) at com.day.cq.wcm.core.impl.DefaultPageStatusProvider.updatePageInfo(DefaultPageStatusProvider.java:155) at com.day.cq.wcm.core.impl.servlets.PageInfoServlet.doGet(PageInfoServlet.java:188)

at org.apache.sling.api.servlets.SlingSafeMethodsServlet.mayService(SlingSafeMethodsServlet.java:269) at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.java:345)

at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.java:376)
at org.apache.sling.engine.impl.request.RequestData.service(RequestData.java:533) at org.apache.sling.engine.impl.filter.SlingComponentFilterChain.render(SlingComponentFilterChain.java:44)

The actual root cause of the issue is the workflow super user group configured in /apps/system/config/com.adobe.granite.workflow.core.WorkflowSessionFactory.config is not available in the system.

cq.workflow.superuser=["admin","administrators","workflow-superuser"]
cq.workflow.workspace="crx.default"
adapter.condition="If\\\ the\\\ ResourceResolver\\\ is\\\ a\\\ JcrResourceResolver\\\ or\\\ a\\\ Session."
cq.workflow.models="/etc/workflow/models"
cq.workflow.instances="/etc/workflow/instances"
cq.workflow.job.retry=I"3"
granite.workflow.inboxQuerySize=I"2000"

The issue got resolved after creating the user group(workflow-superuser) in the system with the required workflow permissions.

Sidekick is not loading in AEM

We can hide/disable sidekick in author mode in page component by removing/commenting or by not including "/libs/wcm/core/components/init/init.jsp" in any of the jsps of the page or its super/parent resource.

In Sightly we can use below code
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>

Customizing the Adobe Experience Manager Sidekick to improve the activate process

You can customize the AEM sidekick to add functionality to meet your business requirements. For example, typically, once you activate an AEM page in author, in order to view it in publish, you typically copy its URL, paste it in a new tab and change the host-name and port name to see the results. To simplify this use case, you can add a custom button to the AEM sidekick that performs these actions with 1 click.

The new sidekick button automatically gives you the link to the page in publish instance once you activate it. That is, with a single click, you can see your current page in publish instance.


To view this community article, click https://helpx.adobe.com/experience-manager/using/creating-touchui-component1.html.

AEM Author Mode Loading Multiple Sidekicks

When viewing a page in author mode, AEM automatically injects a sidekick into page components. This works great when viewing a single page, but what happens when one page needs to load all or parts of another page, like in the following example?

<!-- Code snippet to inject all child pages into current page -->
<%
Iterator<Page> childPages = resourcePage.listChildren();
while (childPages.hasNext()) {
Page childPage = childPages.next();
String childPageUrl = childPage.getPath() + ".html";
%>
<sling:include path="<%= childPageUrl %>" />

<% } %>

Problem: Nested AEM pages will spawn multiple Sidekicks, none of which will load correctly

The screenshot above illustrates this problem. The only javascript error outputs the following to the console per page loaded:

Uncaught TypeError: Cannot read property 'style' of undefined widgets.js:9872

Solution: Remove the Sidekick on child pages, either entirely, or just when viewing as a child page

Step 0: We’ll assume a page component has been overwritten for the project. This means all or some of the files from /libs/foundation/components/page/ have been copied over.

If this hasn’t occurred, do so, and make sure the child pages have a jcr:content/sling:resourceType property that points to your new page type.

Step 1: Now, find head.jsp and the line that includes /libs/wcm/core/components/init/init.jsp

Step 2: That line loads the Sidekick. Either remove it or get creative and only display it when the page is being viewed on its own.

Example:
<%@include file="/libs/foundation/global.jsp" %>

<!-- Load the sidekick only when viewing issue page on its own -->
<% if(currentPage.getPath().equals(resourcePage.getPath())) { %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<% } %>
Summary: Problems with AEM’s automatic component injection in author mode can be overcome by overriding parent components and adding more precise logic.

Source: http://aem.matelli.org/aem-author-mode-loading-multiple-sidekicks/

How to Customize Sidekick?

Have a requirement where we need to add 'Preview Publish Page' button/item under the Page tab in the Sidekick. On click of the button/item it would popup a new window with the target url of that page in Publishing instance.

In short I want the capability of the adding a feature in sidekick which will give me a publishing instance preview of the page.

My approach: We can find sidesick.js (libs/cq/ui/widgetes/source/widgets/wcm/SideKick.js) where all the properties like Copy Page,

Move Page, Activate Page and so on..are configured..
So I'm going to add one more entry called 'preview Publish page' in the Same sidekick.jse and I can able to see 'prview publish page' button in the sidekick.Now, I will configure that entry to open a new window which redirects to the publish page url.

Customize sidekick:
Here I’ve customized the SideKick.js such a way that it adds one more button called ‘Preview Publish Page’ under the Page tab in the sidekick. When we click on the button it opens a new window and opens the current page in preview mode.

Customization starts at Line no: 100 to 107 in SideKick.js

/** -------------- Custom ------------------**/

/**

 * @cfg {String} previewPublishText

 * The text for the Preview Publish button (defaults to "Preview Publish Page").

 */

previewPublishText: null,

 /** -----------------------------------------**/

 Customization starts at Line no: 558 & Ends at 607 in SideKick.js

/** -----------------------------------------**/

/**

 * Returns the config for the default Create Sub Page button.

 * @private

 * @return {Object} The config for the default Create Sub Page button

 */

getPreviewPublishPageConfig: function() {

  var allowed = CQ.User.getCurrentUser().hasPermissionOn("wcm/core/privileges/modifyhierarchy", this.getPath()) &&

   CQ.User.getCurrentUser().hasPermissionOn("create", this.getPath());

  return {

   "text": this.previewPublishText,

   "disabled": !allowed,

   "handler": function() {

    if (!CQ.WCM.isPreviewMode()) {

     this.wcmMode = CQ.WCM.setMode(CQ.WCM.MODE_PREVIEW);

     if (!this.previewReload) {

      CQ.WCM.getContentWindow().CQ.WCM.hide();

     } else {

      CQ.Util.reload(CQ.WCM.getContentWindow());

     }

     this.collapse();

    } else {

     // make sure the button stays pressed

     this.previewButton.toggle(true);

    }

    var myRef = window.open('' + self.location, 'mywin',

     'left=20,top=20,width=1000,height=700,toolbar=1,resizable=0', CQ.WCM.setMode(CQ.WCM.MODE_PREVIEW));

    /** 

    * This opens the specified url in new the tab

    window.open('http://www.techaspect.com/'); // --> this opens a new tab on my browser

    Ext.Ajax.request({

    url: 'PHP function call',

    success: function(response) {

    window.open('http://www.techaspect.com/'); // --> this opens a new window, not tab

    }

    });

    */

   },

   "context": [

    CQ.wcm.Sidekick.PAGE

   ]

  };

 },

 /** ----------------------------------------------------**/

 Added Line no: 3264

"previewPublishText": CQ.I18n.getMessage("Preview Publish Page"),

 Customization starts at Line no: 3680 - 3687

/** --------------------------------------------------------------***/

/**

 * The value for {@link #actions} to create a PreviewPublish page button.

 * @static

 * @final

 * @type String

 */

CQ.wcm.Sidekick.PREVIEWPUBLISH = "PREVIEWPUBLISH";

-- -- -- -- -- -- -- --- -- -- -- -- -- -- -- -- -- -- -- --

Added Line no: 3790

CQ.wcm.Sidekick.PREVIEWPUBLISH,

 After adding the above lines of code in SideKick.js, we can see a customized button in sidekick as shown in the above figure.

Customize AEM Sidekick and add a useful feature

Normally, once you activates a new page in author instance, in order to view it in publish instance you probably copy page its URL, paste it in new tab and change the host-name and port name to see the results. To simplify it here, we will add a custom button in our sidekick and convert it into a useful features.

The button we are going to add here will automatically give you the link to the page in publish instance once you activates it. With one click you can see your current page in publish instance.

The path where AEM sidekick code is present is: /libs/cq/ui/widgets/source/widgets/wcm/Sidekick.js

Follow the below steps :-

1. Create a folder inside /apps with name customsidekick
2. Create a node with type cq:ClientLibraryFolder inside /apps/customsidekick
3. Create a file name customSidekick.js
4. Create a file name js.txt inside /apps/customsidekick and write customSidekick.js in the this file
5. Add categories property with value cq.widgets to the clientlibrary created in step 2
6. Open the customSidekick.js file created in step 3 and paste the below code

CQ.Ext.ns("PublishButtonSidekick");

PublishButtonSidekick.Publish = {

 publishPageFn: function(sk) {

  var pagePanel = sk.panels["PAGE"];

  var button = pagePanel.findBy(function(comp) {

   return comp["name"] == "PUBLISH_PAGE";

  }, pagePanel);

  if (button && button.length > 0) {

   return;

  }

  button = {

   xtype: "button",

   scope: sk,

   name: "PUBLISH_PAGE",

   text: "Publish Page",

   "context": [

    CQ.wcm.Sidekick.PAGE

   ],

   handler: function() {

    var x, y, a, z, b, pp, url;

    CQ.HTTP.get("/etc/replication/agents.author.2.json",

     function(options, success, response) {

      if (!success) {

       CQ.Ext.Msg.alert(

        CQ.I18n.getMessage("Error"),

        CQ.I18n.getMessage("Something went wrong"));

      } else {

       pp = CQ.WCM.getPagePath();

       x = response.responseText;

       console.log(response);

       y = JSON.parse(x);

       a = y["publish"]["jcr:content"]["transportUri"];

       x = a.indexOf('/bin');

       y = a.substring(0, x);

       c = y.lastIndexOf('/');

       z = y.substring(c + 1);

       b = z.split(":");

       if (b[0] == "localhost")

        h = window.location.hostname;

       else h = b[0];

       p = window.location.port;

       url = "http://" + h + ":" + b[1] + pp + ".html";

       console.log(url);

       CQ.shared.Util.open(url);

      }

     }

    );

   }

  };

  pagePanel.insert(6, button);

  sk.actns.push(button);

 }

};

(function() {

 var c = PublishButtonSidekick.Publish;

 if ((window.location.pathname == "/cf") || (window.location.pathname.indexOf("/content") == 0)) {

  var SK_INTERVAL = setInterval(function() {

   var sk = CQ.WCM.getSidekick();

   if (sk) {

    clearInterval(SK_INTERVAL);

    c.publishPageFn(sk);

   }

  }, 250);

 }

})();

Once completed, Clear you browser cache and AEM Cache.

Now to see the button, Open any page with sidekick customize

How to test:-
Activate the page
Click on the “Publish Page” button to see the page in publish instance.

Behind the Scene story:-
When you click on the above “Publish Page” button, it makes an ajax call to get the list of replication agents configured in your author for publish. Once the response is received, it forms the page url in with the hostname and port present in the response and opens it.

This was tested in AEM 5.6.1 and AEM 6.1 and worked fine, however, if you feel any difficulty in implementing or getting expected output or bug please comment below. We will help you.

How to programmatically design mode select a component to be included in the sidekick

The problem you want to have a component programmatically available to authors without having to enter design mode and add a component for the template.

The solution Go to your relevant template's design mode. For this example, we 

will use the Geometrixx site, located at:
/etc/designs/geometrixx/jcr:content/contentpage/par

Then edit the components property to contain the path to your component, for 

Example:
/apps/geometrixx/components/customcomponent

Save, and reload the editor, and you should have the component added to your list.

Adding a button to the sidekick

The package can be downloaded from Clicking here

Steps are
Create client-side library (http://dev.day.com/docs/en/cq/current/developing/components/clientlibs.html)
In the source specify text, handler & context.

If everything is done correctly you could see custom in the sidekick. Sample