Wednesday, October 24, 2012

Previewing the Adobe/ExactTarget Connector

Having just put a wrap on my 2012 ExactTarget Connections experience, I wanted to briefly sum up the preview I got see of the ExactTarget/Adobe CQ5 connector, thanks to my friends at Adobe. Officially it’s called Adobe CQ Marketing Campaign Management (CQ MCM). Having only recently been exposed to the ExactTarget suite of tools, my first exposure to the email template creation tool was a light bulb moment. The ExactTarget content creation tool worked very much like a CQ authoring environment. You can create templates for entire emails and subtemplates to be used in multiple emails with a lot of drag & drop and in place content editing. My eyes of course lit up when I saw it and immediately saw why these tools found each other and why everyone saw a need for a coupling between them.

Getting started with ExactTarget inside of CQ is just like working with any other CQ Cloud Service; you’ll need to create the connection between CQ and ExactTarget in the same way as how you connect to a tool like Scene7. Simply navigate to the Cloud Services console, expand the ExactTarget dialog, clicking Configure Now and create an ExactTarget Configuration. Then you’ll be prompted to enter your company, username and password to connect to ExactTarget. Once you’re authenticated, you will have access to the ExactTarget Landing Page template type for creating content. The thing that really makes this coupling so compelling is the melding of CQ and ExactTarget functionality. When you pull an asset from the CQ5 Digital Asset Manager (DAM) into an ExactTarget Landing Page, CQ remembers where that asset was referenced, in the same way as when you use that assent on a typical CQ page, so no matter what channel your engaging your customers, you’re meeting them with a consistent professional message. With CQ MCM you can rapidly and more accurately identify the ROI of the campaign, which is essential in helping justify marketing expenditures which insures smiles from both the CMO and the CFO.

For my current customer who already uses ExactTarget and is considering CQ to replace their existing web content management system, this functionality is beyond valuable. They have significant privacy concerns and it’s essential for them to keep track of where every asset is used in case they need to remove that asset from their production email runs. Furthermore, you’ll have less replication of assets and little to no chance of assets becoming stale between DAM and ExactTarget. When you look at a platform that integrates content management, digital marketing and analytics, like this connector creates, it provides a tremendous value in being able to track content from creation through a marketing campaign, to the user clicking through on your website instantly in order to measure the effectiveness of your campaigns and content pages across your enterprise.

Once an ExactTarget Landing Page has been created in CQ, you can affect workflow processes on that page, just like any other CQ page before publishing that ExactTarget Landing Page to the ExactTarget platform. Once the Landing Page has been published to ExactTarget, you’re moving back into the realm of 100% ExactTarget, where you’ll need to log into the ExactTarget console to utilize the landing page for sending communications to your subscribers.

My preview was brief, but so is the nature of creating content in CQ for ExactTarget. So many features on these two platforms function in a similar fashion, it really quite simple for CQ administrators and content authors to create ExactTarget Landing Pages. Because of how intuitive the CQ authoring environment is and how similar it is to the ExactTarget templating environment. ExactTarget users will have very little learning curve for working within CQ and reaping the benefits that the CQ environment will bring to this powerful technology synergy.

Wednesday, August 22, 2012

Basic Template Inheritance Tutorial for Adobe CQ5

In coming to an engagement where I am helping one of the world’s most iconic fund raisers migrate from an aging and unwieldy Vignette integration to Adobe CQ5, one of their biggest concerns is with template creation and construction which for them is one of their primary pain points. While this might be an onerous task in Vignette, I don’t find the same to be true with CQ5, especially once you get your integration started and have a couple of master templates to inherit from. Having spent the day on the ground with the customer and the evening with a couple of new to CQ5 consultants, explaining how template inheritance work, I felt like capturing my thoughts and illustrating how quickly and easily a child template could be created. To start with, assume we have a basic parent template already created, with a fairly basic layout that is probably pretty common to many websites out there; a header, footer, left column navigation, a center content body and a right rail. Our parent template content component probably looks something like this:
homepage_main
content.jsp – includes some basic HTML & includes of the rest of the template content

header.jsp – includes the html to render out top banner and site wide links
footer.jsp – includes html to render typical boiler plate at the bottom of the page
leftnav.jsp – includes the html or an include of the navigation component
contentbody.jsp – lets make this simple for now, just an include of a parsys
rightrail.jsp – same as contentbody, just a parsys
Now a page of type homepage_main is going to be pretty plain, with 2 separate content areas for authors to drop content in a free form manor that has become one of the key differentiators of CQ5. Now this is a fairly simple template that any even remotely practiced CQ5 developer could create in say, an hour or two, depending on how convoluted the front end code is. Now is where the inheritance model of CQ5 really comes into play and really empowers the developer to create additional new templates quickly. The requirements for the system state that a specific marketing tout appear at the top of the right rail on a significant percentage of the pages. So, quickly create a new template …

Create a new template called childpage under apps//component/page
Provide a name for this template, assign it properties for allowedParents, allowedChildren and then set up the sling:resourceSuperType
For the sling:resourceSuperType, set the value to apps//component/page/homepage_main

For simplicity sake, just grab the rightrail.jsp from homepage_main and add either the code for your marketing tout or an include of the appropriate component. You can either replace the parsys or leave it there under the marketing tout for further content.

Under apps//component/template create the template component of the same name and set the sling:resourceType on the _jcr_content node to point to your new page component These last 5 steps shouldn’t cost you more than 10-15 minutes and you’ve created a consistent look for a large group of pages, you’ve saved your content authors a ton of time going from page to page adding the marketing tout to the parsys and you’ve ensured that the content is right 100% of the time.

Now, lets say that we need a page type with a marketing tout and a specific title component above the parsys that displays the page’s jcrTitle. So repeat steps 1-5, but now set the sling:resourceSuperType to point to childpage. Instead of grabbing the rightrail.jsp, copy the contentbody.jsp and edit it to include your title component. And that’s it, you’ve created a page template in a modest amount of time and created its child and grandchild templates in a trivial amount of time. I hope this tutorial simplifies and demystifies the concepts of template creation and inheritance for all of you out there. As always, if you have questions or comments, feel free to contact me.

Keywords: WEM WCM WXM Adobe CQ5 CQ5.5 Java

Thursday, July 5, 2012

Modifying an extJS Authoring Interface in CQ5

I wanted to share this piece of code with the community. It was developed by one of the other developers, Braxton Diggs, on my team integrating the new travel.state.gov site and I really felt like this was some cool code that I hadn’t seen anything like anywhere on the net. One of the customer needs was to have a precise control over the size of the content being entered by their authors. As you might imagine, an organization like the State Department of United States has a lot of authors and lot of sometimes arcane rules and operating procedures. To accommodate this need to control content size, we developed this counter code as well as a limiter. Here is code for how we count the characters being entered in a field of xtype richtext as well as display the counter on the top right corner of the richtext dialog. I think that this is a pretty slick integration, because it controls the content entry right at the point of content entry, rather than just truncating the user input or displaying an error message after the fact. To begin, we will need a design_dialog in our over ridden text component with a property called maxchar, which will be used to dynamically limit the input size for our richtext field. You could limit the text somewhere in the code we’re showing here or you could as we have done, allow a user with access to the Design mode to control the size of the input, making this a very flexible piece of code. Then as part of our authoring dialog, we need 2 particular items; a richtext field called text and an nt:unstructured node that we called listeners. The listeners node has a property called render, which this has bit of javascript as its value:
function(){ var dialog = this.findParentByType('dialog');//find dialog var rte = dialog.findBy(function(p){ return (p.getXType() == "richtext");})[0];//get dialog that contains richttext rte.on({ activate:function(textarea){//fires when user clicks inside textarea processContent(textarea.getId(), textarea.getValue()); } }); maxchar = MaxChar();//get maxmimum character dialog.on({ beforesubmit:function(textarea){//before sumbit/"OK" button if(ValidateText(textarea.getId(), maxchar)){//if passes return true; }else{ CQ.Ext.Msg.show({"title":"Houston we have a problem!", "msg":"You have too many characters in the textarea, please delete some characters!
You are only allowed "+maxchar+" characters."}).setIcon(CQ.Ext.Msg.WARNING);//custom dialog alert return false; } }, deactivate:function(textarea){ResetCounter(textarea.getId(), maxchar);//On close run reset function } }); }
The javascript in the text component code listed below catches each keystroke action and records if a character has been entered into the richtext area and increments or decrements the counter and cuts the user off from entering text beyond the limit specified in the maxchar property in the design_dialog.
function ResetCounter(id, maxchar){//Function fired when dialog is closed if (maxchar > 0) {//zero or less than disables limiter var txtlen = $("#"+id).find('iframe').contents().find('body').text().length;//Get Text Length $("#"+id+"_txtcount").html(txtlen+"/"+maxchar).hide();//Whenever dialog is re-opened it will have correct length } } function processContent(id, val){//Function initalizes text limit. id - open dialog unique ID. val - Not used var rte = "#" + id; var maxchar = <%=currentStyle.get("maxchar", 0)%>;//custom max characters if (maxchar > 0) {//zero or less than disables limiter if ($(rte+"_txtcount").length != 0) { $(rte+"_txtcount").html("");//show nothing if nothing is in textarea }else { $(rte).prev('div').find('table td[class*=right]').prepend('
');//disabled text limit } $(rte).next('div').find('iframe').contents().find('body').bind("keydown keyup keypress", function(e) {//attach event handler to textarea var char_code = e.which;//capture keystrokes var txtlen = $(this).text().length;//textarea length $(rte+"_txtcount").html(txtlen+"/"+maxchar).show();//show text if (!(txtlen < maxchar || char_code == 46 || char_code == 8)) return false;//do not allow typing if greater than limit, backspace and delete if (txtlen/maxchar >= 0 && txtlen/maxchar < 0.25) {//0-25% $(rte+"_txtcount").css("color","#008000");//change colors }else if (txtlen/maxchar >= 0.25 && txtlen/maxchar < 0.5) {//25-50% $(rte+"_txtcount").css("color","#cccc00"); }else if (txtlen/maxchar >= 0.5 && txtlen/maxchar < 0.75) { $(rte+"_txtcount").css("color","#ee7700"); }else if (txtlen/maxchar >= 0.75) { $(rte+"_txtcount").css("color","#FF0000"); } }); } } function ValidateText(id, maxchar) {//function fires when user hits ok button on dialog var txtlen = $("#"+id).find('iframe').contents().find('body').text().length; if (txtlen<=maxchar || maxchar == 0) { return true; }else{ return false; } } function MaxChar() {//get max character return <%=currentStyle.get("maxchar", 0)%>; }

Monday, January 23, 2012

The Business Case for Adobe CQ5

In making the case for an expensive software integration, short term vision is rarely going to bare out the costs. But midterm expenditures show, from a variety of viewpoints, the value and utility of an integration with the Adobe CQ5 platform. The coming updates (CQ5.5) on the venerable Adobe WCM/CMS will make an even more intuitive authoring environment that behaves more and more like the applications users utilize on a daily basis.


As an IT manager, the last thing you want to see is ANOTHER integration in your enterprise. CQ5 is different though: it lightens the load because it’s a self-contained system that takes full advantage of the Java technology stack. This means that you can stand up your CQ5 enterprise in a modular fashion, giving you a cohesive system without worry about being tightly coupled to the rest of your enterprise systems. It also allows you to integrate CQ5 with the rest of your backend systems at a pace that suits your enterprise.

From the point of view of the UX designer, CQ5 is a tool like many other WCM’s which can integrate any vision for your website or web application. CQ5 is flexible enough to allow the implementation to control what goes where and how authorable content appears. CQ5 provides a seamless platform for content governance. The design and implementation of the CQ5 templates, pages, and components, ensure that there is no way for unauthorized users to modify anything other than the content on designated areas, ensuring content approvers control what content is actually published. CQ5’s templating model ensures that new pages look and behave just as intended by the designer, controlling what kinds of content can be placed on different areas of the page.

As a business user or brand manager, CQ5 provides a nearly instant platform for delivering new or modified content to your users and customers. In a traditional application framework such as Struts, Spring, Java ServerFaces, PHP, ASP.NET, Cold Fusion, etc., business users need to change content, often resulting in a change order that has to be delivered to the software development department or software contractors. But with CQ5, as soon as you have your change requirements firmed up, content authors can make these changes and content approvers can publish them. Changing content on a CQ5 web page is frequently as easy as editing a Word or Power Point document.

A past customer was spending in the region of one million dollars a year maintaining about 400 hundred JSP pages with their out sourced IT partner, who on average took 3 weeks to turn around even the simplest modifications, such as changing verbiage on the page or swapping out a Flash presentation.

Now: imagine an enterprise where the manager of any given department decides that they need to update some content or revise some media. As soon as they know what content or media needs to be updated, they can begin editing page content and uploading new images, media, or files to the CQ5 Digital Assent Manager (DAM) and inserting those new files into new or existing pages. Then it’s just a matter of submitting the new or updated content to the content approver for publishing.

The publishing workflow can be as complex or as simple as needed, including content approvers from any corporate department, such as legal, IT, marketing, etc. Once the content approver(s) receive notice of a change and can approve it, the new content is published to your live site for your customers.

CQ5 is a complex platform and learning how to wield it to make real business changes is difficult. If you have any questions about CQ5 functionality, or want to know how NavigationArts is optimizing the platform, feel free to leave a comment below.

Adobe CQ5.5: A Preview of the Wicked New Functionality

Earlier this week Adobe hosted the DC Area CQ5 Users Group. The keynote of the evening was from Day Software founder and current CQ5 brand manager Cedric Heusler, previewing some upcoming functionality in CQ5.5.


On the sexy front, CQ5’s authoring interface moves closer and closer to a Windows application like user experience. They’ve added CTRL-Z functionality to the Authoring interface and in the demo, this functionality looks like it’s done and ready for prime time. You can undo any set of changes made during the current authoring session, regardless of the change. Properties, new components on the page, component property edits, etc. They can all be undone.

In the last year, Adobe acquired Omniture and you can expect to see significant Omniture functionality in CQ5’s Campaign tab and marketing functionality. It’s still up in the air if we’ll see any Site Catalyst functionality or some of Adobe’s other eRetail focused capability, although I did see some eRetail focused components in Cedric’s Sidekick when he was showing functionality in their new Geomatrixx site.

Adobe is also adding Bridge functionality to connect the Adobe Creative Suite of applications to a CQ5 DAM.

Cedric also demonstrated some Amazon Cloud functionality, by standing up a new VM with CQ5 already running in a matter of a couple of minutes. Cloud functionality was a big focus last month at Adobe Max where Adobe announced their Creative Cloud. So it looks like plenty of sizzle and steak for the coming year in CQ5.

Building Components in Adobe CQ5: A Tutorial

As a Java developer, I’m always on the hunt for tutorials that quickly and easily explain how to do something for whatever platform I find myself working with. I’ve been using CQ5 for awhile now and, I have to say, I’m a huge fan (just check out my last blog on Building Workflows).


On the NavigationArts’ Vimeo, I’ve recorded a step-by-step guide to building Components in Adobe CQ5. My hope is that this serves as a yard stick for developers when anticpating organizational web content management needs. As always, please leave comments below on any questions you might have around this webinar or CQ5 in general.

Building Workflows in Adobe CQ5

While developing websites and web apps is never an easy proposition, some parts of the process are getting easier to develop and fulfill the promise of next generation development platforms that trumpet easier application development. I have always been dubious about those claims and Adobe CQ5 defiantly offers up some challenges to even the most seasoned developers, however, one thing I found really easy was building basic, but highly relevant and useful workflows.
Log into the CQ5 server as a user authorized to create and edit workflows, click on the workflows link in the white box. From the models tab, click on ‘new’ and give your new workflow a name. A new window will pop up with the workflow editor. It looks like this.

The next step is to define a participant step which represents the content editor who is starting the workflow after editing or creating content. This first step is a Workflow Initiator Participant Chooser and looks like this.

These are the properties of the workflow initiator you just created.

Once you have created a workflow initiator you could have the workflow go directly to an approver or you could define a more complex approval process, while keeping it simple to implement. For example, let’s say that your content editor needs to have his or her work approved by their manager, the legal department and the marketing department. All we need to do to facilitate this is drag an ‘And Split’ from the Workflow menu onto the canvas. Double click the And Split and select 3 branches and click OK to accommodate all of our approvers.

Now add the approvers to the 3 new slots on the canvas. Those approvers are represented as ‘Participant Steps’. For each Participant step you will need to define a user or group of users to conduct the action required. Each user or group of users identified for a workflow step will receive an email notice when action is required, if the ‘Notify user by email’ checkbox is selected.

As seen above, I have set a 24 hour timeout and the Send Email as the Timeout Handler. There dozens of other stock handlers as well as having one of your developers script something custom, but that wouldn’t be so easy a manager could do it.

Now that we have added a couple of parallel approvers, who incidentally could also be organized in a sequential structure, but I figured that was obvious and didn’t show off as much of CQ5’s workflow capability. This is what our workflow looks like after adding the approvers.

Some organizations will add another approver at the end of the And Split, but for simplicity sake, let’s start wrapping this thing up. First we will version our content modification and then publish it. CQ5’s workflows come with versioning and publishing steps as built in functionality.

From the ‘WCM Workflow’ menu in Sidekick I added a ‘Create Version’ step and an ‘Activate Page’ step to complete the workflow. Don’t forget to save your work by clicking save in the upper left corner of the workflow editor. Now let’s have a quick look at how to use this workflow and what the notifications look like.
The content editor is done making their changes; they now need to go to the workflow tab Sidekick in which looks like the image below (left) and select a workflow and click the Start Workflow button. For workflow approvers, Sidekick will look like the image below (right) if they are in the workflow tab. The options available are to Complete (approve), Step Back (reject) or delegate the workflow approval to another user.

Workflow approvers get to the page they are trying to review by going to the CQ5 inbox which is accessible from the main page once a user logs in to CQ5. The inbox looks like your standard email inbox. A double click on the row will launch the page to be reviewed.

There it is a workflow you could create in less time than it took me to type this blog post.

As always feel free to contact me if you have any questions.

Reaping a rapid return on investment with Adobe CQ5

For the last few months I have been working with a spectacularly easy to use tool called Adobe CQ5, formerly Day CQ5. The beauty of CQ5 is how simple it is for a developer to create components that are easily used and reused by content editors, business analysts or other semi-technical staff members to create rich, consistent and professional looking web pages and even web applications. My clients were spending 12-16 weeks to build out custom Spring based portals. We built their first portal in less than 12 weeks and depending on the level of customization from one portal to the next, replication time ranges from less than a week to perhaps three weeks, thanks to CQ5’s built in functionality to replicate sites. A new site with different colors and images takes just a couple of days to replicate, QA and deliver to production.

Starting with static HTML, CSS and JavaScript created by a front end designer the developer can build components that are easily and edited and placed on pages by decomposing the UI code into CQ5 components that can be edited and placed on pages in a site. Even building a site with CQ5 is simple and straight forward exercise that does not require a degree in computer science. Simply log into the CQ5 administrative console, select the option to create a site and then within the new site, create a page hierarchy that makes sense for your organization or company. All you will need is for your developer to have created one or more CQ5 page templates based on the page layout provided by your front end designer. The possibilities are only limited by your imagination and the skill of your developers and front end designers.

With the front end code in one hand your web site layout in the other, your developer can begin creating components which are as simple or complex as your needs and front end code require. Nearly every aspect of your site’s look and feel can be edited from the CQ5 authoring interface which can be accessed from any browser of your choice. Colors, images, text size, font, textual content and a host of other content pieces of your site can be built out by the developer so they are editable by you or your content editors.

Since CQ5 is a web content manager (WCM) each instance of a component in your site, regardless of how often you use and reuse it, is a separate node in the content management system (CMS). This feature of a WCM allows endless reuse with very little effort on the part of the developer. An experienced Java/JSP developer should be able to build out even the most complex components in 4-8 hours and that number will decrease as the developer begins reusing functionality like in line text editors or drop zones for dragging in images or other files. Even without these extra features, the built in functionality for editing component content is really simple and intuitive.

Building a basic component editing interface is extremely easy because CQ5 makes use of a really slick JavaScript library called extJS. By selecting the xtype of a component property you can enter text, rich text, text lists, etc. There are 45 xtypes in extJS and most of them are input types that can be used in to enhance the authoring experience.

Because of CQ5’s JSP based components, it is very easy to take advantage of the entire Java technology stack. If you want a more application like site, as opposed to static content presentation, it can be achieved without too much difficulty given the capabilities of Java and CQ5. CQ5 hosts its own OSGi container to host bundles of Java classes so it is fairly easy to build web services into your web application. For developers, because everything within CQ5 is content, rather than actual files, CQ5 has its own SVN integration and it is also possible to use Maven to manage builds and code check in. CQ5 comes bundled with the popular Eclipse IDE which they have rebranded as CRXDE. CRXDE performs fairly well, but there are some hitches, because of the nature of how content is stored on the developers’ instance of CQ5, but the hang ups are not prohibitive in any way.

Setting up an instance of CQ5 is as simple as unzipping it and running the executable JAR file. The first startup of CQ5 takes a while, perhaps 15 minutes as it sets itself up, but after that it should start in just a couple of minutes. Most of CQ5’s configuration is handled through a couple of text or xml files that are easily managed by your local network administrator without too many headaches. The admins I have been working with all went through the Adobe CQ5 Administrators training class and have had a comfortable learning curve.

A couple of experienced developers and administrators combined with minimal training and the CQ5 WCM will allow your organization to rapidly develop an easy to maintain site that can be as sharp looking as any site on the net.

If you have any specific questions about CQ5 development and integration, please feel free to contact me through the comments section of this blog post.