Posts tagged "cq"

March 22, 2017

Rockstar Tips & Tricks for AEM Forms

 

AEM Rockstar at 2017 Adobe Summit

This year over 12,000 people, including attendees from 1,600 Partners, will be at Adobe Summit, making it the largest Summit ever. Over 200 sessions and labs are held during Summit, including the AEM Rockstar session. This year’s AEM Rockstar session features five winners who submitted their favorite Tips & Tricks for working with Adobe Experience Manager. In upcoming weeks, come back here to see more posts detailing the best tips & tricks from the five AEM Rockstar winners and some of the runners-up.

Todays’s guest post is written by AEM Rockstar runner-up Gary Howell, who is a Sr. Development Manager at iCiDIGITAL, a digital agency in Raleigh, NC that specializes in AEM. Gary has expertise in Adobe CQ5, Java, OSGi and Sling and has extensive frontend development and server-side coding experience. 

Five Tips and Tricks to use AEM Forms More Effectively

Forms are a part of nearly every site on the web. From Fortune 100 companies to the pizza place down the street.

There are many different form solutions you can use on your site, but for many of them you must install a plug-in or go through a complex set-up. However, if you are using an AEM platform, you have the benefits of AEM Forms, allowing users to easily create, manage, and track forms on their site.

There is a lot of good documentation on AEM Forms on the Adobe site, but I figured I’d save you some time by showing you five tips and tricks that my team and I have found to use AEM Forms more effectively.

1)    Form Fragments: Form fragments are most commonly used when you have sections or part of a form you want to reuse on multiple forms. They allow you to easily create part of a form – such as a signature – as a form fragment. You can then reference that specific form fragment on other forms across your site. The power of form fragments is that if you modify a piece of your signature form fragment, for example, the year, you have to change it only once and it will change on all your forms.

2)    Rule Editor: Normally you need to write custom code to execute specific rules on a form such as showing, hiding, validating a field, or disabling a piece of the form. But AEM Forms comes with a rule editor that allows you to easily add this functionality. For example, you can add a rule so that when a user selects a checkbox to have their billing address the same as their home address, it will prefill the billing address with the values they previously entered. Cutting down on the time a user spends on your form means getting one step closer to making a conversion.

 

3)  E-Sign: One of the major pain points with forms on the web – and one that halts conversions – is when the user has to print out a form, sign it and then resend it to you. With AEM forms, you no longer have to do that. AEM Forms comes out of the box with the E-Sign function to enable authors to create forms that can be safely and securely signed by designated users online, with no printing needed.

4)    Form Submission: If you’re managing multiple sites or have a fairly complex site, this feature can be one of the most important. AEM Forms allows developers to easily submit forms in a variety of different ways. For example, you can develop a servlet that submits to a REST endpoint that sends data to your SalesForce instance. Or when a user fills out a form, you can kick off a workflow that notifies a user group that there are new submissions in their inbox, so they can quickly get in touch with their users.

5) Output Service: Outputting forms in various formats such as PDF, PNG, or in a custom format has always been a challenge. Luckily with AEM Forms output service you have an API you can tap into to easily output your forms in a variety of formats. Not only does the output service allow you to generate printable PDFs, but it supports output design features of Adobe LiveCycle Designer ES4 – a key feature for anyone coming from a LiveCycle instance to AEM Forms.

With the release of AEM Forms, you no longer need to create a completely custom solution on your own, thereby reducing the difficulty of upgrading and maintaining your library of forms. AEM Forms frequently comes out with new releases, and each one has new enhancements and features. Keep a look out for what AEM Forms has to offer in the future!

3:42 PM Permalink
March 20, 2017

AEM Rockstar Tips & Tricks Blog Series

Our First AEM Rockstar Tips & Tricks Guest Blog!

Late last year we launched our first AEM Rockstar competition, where we asked for tips & tricks from you, the Rockstar AEM marketers and technologists who create and innovate within Adobe Experience Manager. Winners won a free pass to Summit and will present their tips & tricks to an audience of over 500 attendees and a panel of judges, who will award the best tip & trick winner with a cool prize! 

Thanks again to all the Rockstars who competed this year. If you are at Summit and want to attend the Rockstar session, on Wednesday, March 22, click here:  http://bit.ly/2kbauhJ!   We’ll see you at Summit!

We were rocked by the response to the Rockstar contest, but ultimately we could only choose five finalists to present at the 2017 Adobe Summit. However, we received so many impressive submissions from the AEM community that we decided to feature a series of guest blog posts, written by the runners-up. These tips & tricks range from favorite ways to use Forms, to more technical examples that can help you better synchronize content, use new tools, and much more.

Our first guest post comes from Sagar Sane, who is a Technical Architect at iCiDIGITAL (www.icidigital.com), a digital agency that specializes in AEM. He has over four years of experience working with AEM / CQ5; primarily focused on server-side development and integrations of AEM with other systems, and over five years of web development experience. He is based at the iCiDIGITAL location in Raleigh, North Carolina.

Grabbit – A Rockstar  Tool for Content Sync in AEM

Suppose you have an enterprise-scale AEM implementation with an author and multiple publishers in production. There is a staging environment mirroring closely to production from an infrastructure point of view, and you might even have development and UAT environments used for development and testing, respectively. The business stakeholders of your AEM implementation prefer that you keep the content synchronized as much as possible between these environments. Generally, you would use tools like Package Manager or vlt rcp to achieve this.

However, these tools do not scale well enough for large implementations where your AEM environments are geographically far away, or that have very large amounts of content to be synchronized. At the core, both these tools use the WebDAV protocol. WebDAV uses XML for serialization and deserialization and uses HTTP handshakes for every node that is synchronized between two AEM instances. This means that any latency on the network will hurt the content sync performance, in terms of time and space efficiency.

Grabbit: A Different Approach

The name Grabbit refers to this grabbing of content from one CQ/AEM instance and copying it to another. However, it also refers to Jackrabbit, the reference JCR 283 implementation that the content is being copied to and from. Grabbit is installed as any other AEM application and is available on bintray for anyone to download.

Grabbit takes a different approach to solve the problem of content synchronization. Grabbit’s goal is to make it easier and faster to sync content from one AEM instance (Grabbit Server) to another (Grabbit Client). Grabbit was developed as a content sync solution for one of our clients, with iCiDIGITAL members the primary contributors. Upon the success of the initial releases of the tool, Grabbit was ultimately open sourced by our client couple years ago.

How does it Work?

Unlike the other tools mentioned above that use HTTP handshakes for each node to be synced, Grabbit creates a stream of data over HTTP(s) from the Grabbit Server (source) to the Grabbit Client (destination). For serialization, Grabbit uses Google’s Protocol Buffers. Better than XML- based serialization, Protocol Buffers is extremely space efficient in transferring the data over the network. As its core underlying technology, Grabbit uses Spring Batch. Some of the core features of Spring Batch that Grabbit uses are Chunk-Based processing, Declarative I/O, start/stop a job and job processing statistics.

Grabbit needs to be installed on both the AEM instances; the instance that requests content to be copied to (the Grabbit Client) and the other one from which the content is copied from (the Grabbit Server). You initiate the request to copy content from Grabbit Server to Grabbit Client by providing a Configuration File to the client. For each path in the configuration file that needs to be synced, a new Grabbit Job is created on the Grabbit Client. Each job then opens only one HTTP(s) connection to the server and uses Protocol Buffers for data transfer marshaling / unmarshalling. There are several configuration parameters that can be set in the configuration file. You can find details about that here.

Grabbit also allows you to monitor the jobs on the client. The monitoring API provides basic information like the job start time/end time, current path, the number of nodes written, etc. Under the covers, Grabbit uses Spring Batch’s querying features for this. The job status is represented in JSON format as below:

To summarize, the basic sequence of Grabbit usage can be illustrated as below:

Why Use Grabbit?

Grabbit is supported for most of the newer AEM versions and is under active development. We have already received and continue to receive a lot of feedback to improve Grabbit. In our experience, Grabbit has proved to be 2 to 10 times faster than other content sync alternatives in AEM, depending on the network conditions and the amount of content being synchronized. I encourage the users of Grabbit to submit issues, questions, or comments on GitHub. We hope that you give Grabbit a shot and that it proves to be useful for everyone in the AEM Community. Post a comment if you have any questions!

1:18 PM Permalink
July 22, 2014

AEM6 + Mongo Minimal Setup

With the release of AEM 6.0, clustering has been rethought in the form of Apache Jackrabbit “Oak” and the introduction to the concept of microkernels. The initial microkernel that supports clustering uses MongoDB (v. 2.6+) for persistence. This post will provide a real working example of a minimal authoring cluster using a fault-tolerant MongoDB microkernel.

If I receive enough demand, I can also post a production quality MongoDB setup.

What you’ll need:

  • MongoDB installed
  • AEM 6.0 quickstart jar
  • Oracle JRE 1.7

The examples provided were tested using an OS X host but should be compatible on Windows as well as other Unix hosts.

Prep Work

  1. Install the MongoDB binaries
    (I used homebrew: sudo brew install mongodb)
  2. Install the Oracle JDK/JRE v 1.7 (if you haven’t already)
  3. Create a directory for housing your mongo data. I used “aem6_cluster”.
  4. Inside that directory, create these directories: node0,node1,arb0
    The two node directories will be the data directories for two members of a replica set. The arb directory is the data directory for an arbiter.
  5. From the main cluster directory, create another folder named “author”.
  6. Copy your aem 6 quickstart jar and license file to that directory. (Rename the quickstart to this if needed: aem6-author-p4502.jar)

MongoDB Logo

MongoDB setup

  1. From the main cluster directory run this mongo command (from terminal or command prompt):
     mongod --dbpath node0/ --replSet aem6
  2. Enter the mongo util in another terminal window:
     mongo
  3. Initialize the replica set named in step 7:
     rs.initiate(rsconf = {_id: "aem6", members: [{_id: 0, host: "<hostname>:27017"}]})
  4. After the command is issued, it should return a json response with “ok”: 1. Keep this terminal window open.
  5. From the main cluster directory run this mongo command (from a new terminal or command prompt):
     mongod --dbpath node1/ --replSet aem6 --port 27018
  6. Back in the mongo util window that we kept open, issue this command to add the new node to the replica set:
     rs.add("<hostname>:27018")
  7. Once again, if the command executes correctly you should get a json response with “ok” : 1. Keep this window open (again).
  8. From the main cluster directory run this mongo command (from a new terminal or command prompt):
     mongod --port 27019 --dbpath arb0 --replSet aem6
  9. Back in the mongo util window that we kept open, issue this command to add this new node as an arbiter:
     rs.addArb("<hostname>:27019")

At this point we have a clean mongo replica set with 3 members. There should be a PRIMARY and SECONDARY with an aribter node to break up any ties for voting who is the PRIMARY. The two nodes provide minimal redundancy. If one goes down, the other takes over. If both go down, you’re up a creek.

AEM Logo

AEM 6 startup

From the author directory, issue this command:

 java -XX:MaxPermSize=512M -mx4g -jar aem6-author-p4502.jar -r crx3,crx3mongo -Doak.mongo.uri=mongodb://<hostname>:27017,<hostname>:27018

AEM should install and replicate automatically to the mongo nodes. Installation on pretty quick SSD-based mac takes less that 5 minutes (results may vary).

You can now repeat this process on any number of AEM instances as long as they are running on separate ports. Each AEM instance will be active+active in the cluster.

Note the run modes: crx,crx3mongo. The JVM settings can be left out – I just like to dedicate a bit more RAM.

Mongo Notes

To test out the fault tolerance, just ctl+c the mongo instance and watch the AEM driver switch to the elected PRIMARY.

Mongo replica sets must have an odd number of members. An arbiter is not required, but it allows you to have nicely divisible replica sets.

1:00 PM Permalink
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

AND

  • 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:

Note:

  • 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