Archive for November, 2013

November 27, 2013

Static multi-image component with image preview

I recently got a requirement in which I had to build a component in which the user can Drag and Drop 2 main images (e.g.: hero) and 3 sub images ( icons,buttons,logos etc). The main requirement was being able to preview these images while the author is creating content for that page.

I got it working after few trials and I am sharing the same.

Environment: CQ561

1. Create a single image component extending the OOTB (xtype=’html5smartimage’) image component. This should be fairly simple and if you need any information on this leave a comment and I can help.

Screen Shot 2013-11-27 at 4.37.12 PM


2. Now create another tab in your component structure by copy/pasting your current working image cq:Panel. For E.g.: in my case I copied /apps/blog/components/content/hero/dialog/items/items/imagetab1 and pasted it under /apps/blog/components/content/hero/dialog/items/items/ to create /apps/blog/components/content/hero/dialog/items/items/imagetab2

Screen Shot 2013-11-27 at 4.42.23 PM


3. Next to avoid confusion I also renamed the image cq:Widget at /apps/blog/components/content/hero/dialog/items/items/imagetab2/items/image to /apps/blog/components/content/hero/dialog/items/items/imagetab2/items/image4

Screen Shot 2013-11-27 at 4.44.59 PM


4. Now we will have to update the properties under image4 cq:Widget (/apps/blog/components/content/hero/dialog/items/items/imagetab2/items/image4) to make this work.


table { }td { padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 12pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri,sans-serif; vertical-align: bottom; border: medium none; white-space: nowrap; }

Property Name New Value
cropParameter ./image4/imagecrop
fileNameParameter ./image4/fileName
fileReferenceParameter ./image4/fielReference
name ./image4/image4file
rotateParameter ./image4/imageRotate

Screen Shot 2013-11-27 at 5.12.56 PM


5. Now when you go back to your content page you should have 2 different tabs and both having the image drag and drop functionality. You can extend this concept for more images as long as you make sure the properties are updated correctly for the image cq:Widget.

Screen Shot 2013-11-27 at 5.19.22 PM                                            Screen Shot 2013-11-27 at 5.19.11 PM

6:28 PM Permalink

Installing AEM from command line without sample content (Geometrixx)

When you install a new instance of Adobe Experience Manager a bunch of content is provided as Sample content. By sample content I am referring to the Geometrixx sites (Geometrixx, Geometrixx Mobile, Geometrixx Outdoors and Geometrixx Outdoors Mobile) that are provided as samples and references. They can be removed by uninstalling packages available in AEM. It is also a recommendation to Uninstall example content and users as part of the Adobe Experience Manager 5.6.1 Security Checklist specially in your Production environment.

The good part is that now we also have a  run mode option for installing or not installing the sample content while installing CQ from command line. These modes allow you to control the use of sample content. The sample content is defined before the quickstart is built and can include packages, configurations, etc:

Installation run modes are provided out-of-the-box:

  • author
  • publish


  • samplecontent
  • nosamplecontent


Environment in which I have successfully used it had:

  • Oracle Linux
  • java version “1.6.0_65”
  • 64 bit VM


These are two pairs of mutually exclusive run modes; for example, you can:

  • define either author or publish, not both at the same time
  • combine author with either samplecontent or nosamplecontent (but not both)


Command line installation:


  • You will need to configure your -XX:MaxPermSize and Xmx based on 32bit or 64bit VM and how much memory you can use.
  • I have renamed my CQ 561 jar to cq56-author-p4502.jar for author instance and cq56-publish-p4503.jar for publish instance.

Author instance installation command:

java -server -XX:MaxPermSize=256m -Xmx1024M -jar cq56-author-p4502.jar -r author, nosamplecontent

Publish instance installation command:

java -server -XX:MaxPermSize=256m -Xmx1024M -jar cq56-publish-p4503.jar -r publish, nosamplecontent

Once CQ gets installed you verify that none of the Geometrixx related content should have got installed.

5:21 PM Permalink
November 25, 2013

How to fix AEM-SiteCatalyst connection problem

Cloud Serivces in CQ 5.5 / AEM 5.6 allows easy integration with other Adobe Marketing Cloud products. These enablements usually involve inputting credentials for an account that has API access privilege. Adobe SiteCatalyst is among one of these Cloud Services.



Lately I’ve seen customers not able to enable the integration even they have ensured that they put in the right credentials. They got frustrated and had to open support tickets with Adobe to address the problem. It turns out that majority of these connection issues can be fixed if you understand which SiteCatalyst data center you should be using, and how to change the configuration from within CQ/AEM.

Here I will walk you through the steps one by one:

  1. See if you can connect to SiteCatalyst using your provided credential (with Web API Access):
  2. If you’re not able to log in, then try using the same credential to log into or
  3. Once you’re logged in, you should be landed on:
    • etc.
  4. See the pattern above? the subdomain (sc, sc2, sc3, sc4, www, www2, www3, www4, etc.) tells you exactly which Site Catalyst data center you’re connected to. You should use the same data center in CQ/AEM for the integration. However, CQ/AEM is defaulted to the San Jose data center (sc, or www) out of the box. If you’re using another data center, you need to configure CQ to point to the appropriate one.
  5. To do that, go to System Console in CQ/AEM at http://<domain>:<port>/system/console.
  6. Log in and go to the configuration page.
  7. And locate the Configuration “Day CQ Analytics SiteCatalyst HTTP Client”.
  8. The Data Center URLs is defaulted to Change it to the data center you should be connecting to. For example:
  9. Click Save.
  10. Now, go back to the Cloud Services Configuration and connect again with the same credential (CQ pointing to the correct SiteCatalyst data center now), you should be able to connect successfully.
4:41 PM Permalink
November 24, 2013

AEM HealthCheck exercise

Recently I stepped into a few engagements to assess and evaluate how CQ/AEM was implemented for customers, be the implementation done by in-house developers, or via a solution partner. Since the “health check” area is a little vague, I want to use this post to list some of the exercises usually covered by such engagements. Note that some of the following might not necessarily be covered in all engagements, it varies depending based on customers needs and time given.

  • Study the solution via written documentation or direct interviews with customers and system integrators.
  • Review user interface, identify opportunities to optimize the performance for various experiences (web, mobile, kiosk, etc.)
  • Review CQ authoring process and work with customer to streamline and optimize the authoring experience.
  • Provide general performance optimization strategies including but not limited to: caching, use of CDNs, delivering the right fidelity assets at the right time, etc.
  • Provide general architectural guidance (Gap analysis between reference architecture and customer’s implementation) and environment audit.
  • Provide development and deployment best practices, including but not limited to:
    • Review templates and components for reusability.
    • Review information architecture.
    • Review OSGi configurations.
    • Review build and package management tools, source control being used, etc.
  • Code review and scoring using code analysis tools.
  • Validate the application of security checklist and go-live checklist.

At the end of the exercise, Adobe Consulting Services will compile and consolidate all the information collected, and will provide a document on all the findings from the engagement as well as suggestions and next steps.

Healthcheck is usually carried out onsite, and it typically lasts from a few days to a few weeks.

3:03 PM Permalink
  • Authors

  • Archives

  • Developer Resources