Thursday, 27 April 2017

Adobe Experience Manager 6.3 is Live

Adobe Experience Manager 6.3 is now live.

Here are some good resources to check out:

Adobe Experience Manager 6.3 documentation

What’s New with Experience Manager 6.3

AEM 6.3 Feature Video Landing Page

Creating your First Adobe Experience Manager 6.3 website

Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  

Wednesday, 12 April 2017

Creating an Adobe Experience Manager project using Lazybones

You can create an Adobe Experience Manager 6.3 project by using Lazybones, which is a templating language that you can use to setup an Experience Manager project. For more information, see Lazybones.
This development article walks you through an efficient path to create a new Experience Manager project. This article covers the following tasks:
  • Create an Experience Manager project by using Lazybone.
  • Setup the project using the Eclipse plug-in.
  • How to use the Experience Manager Template Editor.
  • How to use the new Experience Manager Core Components. 
  • How to overlay Core Components. 
  • Create an advanced Experience Manager component that  renders markup with HTL (Sightly) and work with the underlying logic with Sling models.


This article will be released sometime in May 2017. 

Wednesday, 5 April 2017

Creating a custom action for an Adobe Experience Manager Form component

You can create an Adobe Experience Manager (AEM) form using various form components located in the Forms Category and submit the data to a custom form action. The custom form action can send the data to an Experience Manager service that can process the data using Java application logic to meet your business requirements. For example, you can store the data in the AEM JCR, in a relational database or send the data within an email message (as a few examples). However, to keep this article simple, the custom AEM service writes the posted data to the AEM log file.

An Experience Manager form can be consumed in a mobile device or a web browser running on a desktop. For example, consider a desktop user filling out the following form.



You can build a custom form action that is invoked when an end user fills out the form and clicks the submit button. In this article, the custom form action named customFormAction is created, as shown in the following illustration.



This article steps you through how to build a custom form action that sends data to an Experience Manager service build using Java APIs. To read this development article, click https://helpx.adobe.com/experience-manager/using/form_component_customaction.html.

Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  


Tuesday, 28 March 2017

Adobe Experience Manager Additional Community Content

This blog entry lists additional content that the community will find useful.

White Papers


Community Blogs

CQ Ops (Tumblr)
AEM CQ5 Tutorials(Community Member's AEM Blog)
Adobe CQ/Adobe AEM (Community Member's AEM Blog)
Ryan Lunka's Blog (Author of AEM in a Classroom)
Daniel Klco CQ/AEM Blog(Community Member's AEM Blog)
Himanshu Jain CQ/AEM Blog(Community Member's AEM Blog)
Adobe CQ/AEM Club Blog(Community Member's AEM Blog)
CQ5 AEM TRICKS OF TRADE(Community Member's AEM Blog)


Popular Articles

   
   
   
   
   
   
           
           

Monday, 27 March 2017

Creating your First Adobe Experience Manager 6.3 website

You can develop an enterprise scale website using Adobe Experience Manager 6.3 that contains different sections, based on existing HTML, such as:

  • header
  • body
  • menu
  • footer

In this development article, you will learn the process of building AEM 6.3 templates and components and adding HTML and CSS to build a site. You will also learn how to perform these tasks:
  • modularizing the page-rendering components 
  • defining local supertypes 
  • making use of AEM supertypes

The following illustration shows the website that is build by following the steps in this article.





Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  


Thursday, 9 March 2017

Managing multiple instances of the same Adobe Experience Manager OSGi service

When developing custom services for Adobe Experience Manager, you can define a service that can be configured using the Felix Configuration screen.


You define configuration fields that show up in the Felix configuration screen by using a @Property annotations. For example: 

@Property(description="adress to whom email is sent",value=DEFAULT_ADDRESS)
    private static final String ADDRESS = "mailservice.address";
    private String address;

You can configure your AEM service to use different configuration values. For example, you can configure 1 to many different instances of the same service. 

Assume you want to develop a custom email service that contain the following configuration values. 
  • the email address to which an email is sent
  • the email address from which the email is sent
You can configure the custom email service so that each service instance has a different value for these configuration settings. You can enter an AEM configuration value into an AEM configuration dialog, as shown here. 


In this configuration dialog, the to and from email addresses are configurable. You can configure additional configuration settings for the same service.  

When you use the custom Service within AEM, you can create a reference to the exact configuration service that you want to reference. To do this, you use the @Reference annotation and additional metadata such as: 


 @Reference(target = "(mailservice.label=InternetA)")
     MailService mailServiceA; 
     
     @Reference(target = "(mailservice.label=InternetB)")
     MailService mailServiceB;      


In the above dialog, there is a additional field named emailservice.label. You can reference the value in this field with the target value when using the @Reference annotation. 

This development article guides you through how to create an OSGi service where there are multiple configured services and how to use the  @Reference(target = "(mailservice.label=InternetA)") annotation properly.  


Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  





Wednesday, 8 March 2017

Using Granite DataSource objects to populate Experience Manager 6.2 Touch UI Select objects

You can create an Adobe Experience Manager (AEM) 6.2 Touch UI component that contains a drop-down control that can be used within the AEM Touch UI view. An AEM author selects drop-down values during design time. For example, an author can select a USA state value from an AEM component that displays address information. A drop-down control is populated by using a com.adobe.granite.ui.components.ds.DataSource object. For information, see DataSource.

Once you create a DataSource object, its data can be used to dynamically populate a drop-down control, as shown in this illustration.


This development article steps you through how to build an AEM 6.2 HTL component by using an AEM Maven Archetype 10 project. Then it discusses how to populate a drop-down field in the component's dialog using a DataSource object.



Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  

Tuesday, 7 March 2017

Integrating Adobe Experience Manager 6.2 with Activation - Dynamic Tag Management

You can integrate Adobe Experience Manager 6.2 (AEM) with Adobe Marketing Cloud Activation Core Services (formerly named Dynamic Tag Management). Activation is an Adobe Marketing Cloud Core Service that allows a digital marketer to manage Adobe and third-party tags used for tracking or other analytic purposes. It is done through client-side scripting that injects tag related code throughout the pages of the site.

You define rules in the Activation web client, as shown in this illustration.



The previous illustration shows an Activation rule named TestOnLoadChrome. This rule is basically an event handler that is fired when a web page page is opened. The condition is defined so that this rule fires only when the browser is Chrome. The logic that is defined is simply JavaScript that creates a pop-up message.

alert("Hello Chrome - this is a DM rule");

Once you define and approve Activation rules using the Activation web client, you can embed these rules into AEM web pages. When this rule is embedded into an AEM web page, this rule is fired when an AEM web page is opened in Chrome, as shown in this illustration.



To watch the video, click:





Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  

Friday, 3 March 2017

Programmatically manipulating Touch UI Fields

When developing Adobe Experience Manager custom components, you can programmatically interact with fields located in a Touch UI component dialog using an API. That is, you can control the behaviour of a field (such as a checkbox) using application logic. For example assume that you have a checkbox located within a component dialog and you want to have the ability to check a condition and then either check or uncheck the checkbox. Using JavaScript application logic, you can dynamically check the box so that the checkbox appears checked when an AEM author opens the dialog box, as shown in this illustration.


In the previous illustration notice the checkbox is set in the dialog. This dialog is set by using code, as discussed in this community article.

This development article steps you through how to build an AEM 6.2 HTL component by using an AEM Maven Archetype 10 project. Then it discusses how to dynamically check the checkbox using JavaScript application logic that involves creating a JS script in an AEM Clientlib and then coding. See the reference documentation here: https://docs.adobe.com/docs/en/aem/6-2/develop/ref/coral-ui/components/Coral.Checkbox.html#


Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  


Friday, 17 February 2017

Spring Editons of Ask the AEM Community Experts

Hello AEM Community. I wanted to let you know that we have lined up some very awesome sessions of Ask the AEM Community Experts for you:


  • In March we will focus on AEM and Analytics and how to work with these two products in AEM 6.2.
  • In April - we will do Responsive Layout with Lokesh. 
  • In May, we will focus on how to work with the Coral API when doing AEM development. 

This is your chance to attend and ask the community experts questions related to these subjects and see the use cases in action.

To watch the March Session, click: 

http://bit.ly/ATACE3282107



Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  



Wednesday, 15 February 2017

Creating a custom Experience Manager sling:resourceType for Touch UI

You can create a custom sling resource type that can be used in an Adobe Experience Manager (AEM) Touch UI component by using a JQuery plug-in. That is, if you want to define a field in a Touch UI component dialog that is not available with the available Granite API, you can define your own custom type. This is similiar to how you can define a custom xtype when working in the Classic UI. For information, see Creating your first Adobe Experience Manager custom xtype.

As an AEM developer working in the Touch UI, it is important to understand how to create a custom sling resource type to be able to define custom fields.  In the AEM community, there has been requests on how to develop a full color spectrum field for a Touch UI component dialog, as shown in this illustration.


To successfully get this color picker in an AEM Touch UI dialog, specify a path that references the JQuery plugin as a value of the sling:resourceType property in CRXDE Lite, as shown here.  




Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  



Tuesday, 7 February 2017

Creating an AEM HTL component that queries the JCR

You can create an Adobe Experience Manager (AEM) HTL (used to be known as Sightly) component that queries data located in the AEM Java Content Repository (JCR). To query data, you use an HTL Java class that extends the WCMUsePojo API and the javax.jcr.query.Query instance that belongs to the JCR Query API. This API supports both searching and querying operations. For example, assume that your AEM application tracks your organization’s customers. You can develop an AEM HTL component that is able to query the JCR to obtain a customer result set in which a digital marketer is interested.



Assume that you have customer data in the AEM JCR. 



Using an HTL component that extends WCMUsePojo, you can retrieve the JCR data and display it.



This development walks you through how to create an AEM HTL component that queries a result set from the JCR. To read this development article, click https://helpx.adobe.com/experience-manager/using/htl_jcr.html

Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  


Saturday, 4 February 2017

Adobe Experience Manager FAQs and other Tips

This post captures FAQs, and other tips for AEM that AEM Developers will find useful. We will update this list on an on-going basis.

I  am using AEM Forms,not AEM Sites

See these docs: https://helpx.adobe.com/aem-forms/6-1/help-tutorials.html

Can I use @Reference in an HTL Class that extends WCMUsePojo

You cannot use the @Reference annotation from a HTL class that extends WCMUsePojo. This can be used from a Java class that uses @Service to reference another service known as dependency injection. To learn about Dependency Injection in AEM, see this article: 


Now to learn how to get a referenece to another AEM service from a class that extends WCMUsePojo, see this article: 

Can I use @Reference  from within a Sling Servlet

You can use Dependency Injection from within a Sling Servlet. See this community article/video. 

Can I manipulate the Touch UI Rich Text Editor using code

See this community article - http://experience-aem.blogspot.ca/2015/01/aem-6-sp1-touch-ui-rich-text-editor-plugin-to-upper-case.html

How can I programmatically retrieve HTML from an AEM page

See this great community article by Nolle Yolles: http://www.nateyolles.com/blog/2015/10/get-rendered-html-for-an-aem-resource-or-component

What is cq.editconfig and when should i use it

Where do Lucene, Solr, ElasticSearch fit in the AEM Platform? 

Can i view an asset's metadata in CRXDE lite? 

Assume you have added metadata to a digital asset, as shown in this illustration. 


You can view the assets metadata by viewing a node named metadata under the asset in the AEM dam (/content/dam). For example, the above image is located here:

/content/dam/geometrixx-instore/cover-images/seasonal.jpg

The metadata is stored as node properties as shown in this illustration.


Can I programmatically work with Coral UI object such as checkboxes?

Yes you can. It involves creating a JS script in an AEM Clientlib and then coding. See the reference documentation here:


Given this setup in CRXDE Lite: 



You can get a reference to this checkbox object in a clientlibs folder. The name of the clientlibs folder for Touch UI dialogs is cq.authoring.dialog ( this is talked about here.  http://scottsdigitalcommunity.blogspot.ca/2015/05/using-event-handlers-in-adobe.html).

Code: 

(function ($, $document) {
    "use strict";

   

    $document.on("dialog-ready", function() {


        $('#kitten').attr('checked', true);     

        });


})(jQuery, jQuery(document));

The result is the checkbox is checked via code: 




Note - we are planning on conducting a full session of AEM Ask the Community Experts on AEM Developing with the Coral API April 2017. 

Can i use OAuth in AEM? 

Need to search for special characters when searching JCR via JCR SQL2

Read this topic -- https://wiki.apache.org/jackrabbit/EncodingAndEscaping. YOU  need to escape illegal JCR characters.

How can i work with custom JARs that are not in the Maven repository

You can place the JAR in your local Maven Repository and then reference it in your POM file. For example, to resolve myCustomJAR_1.0.0.jar within an AEM service, the myCustomJAR_1.0.0.jar file must be located in the Maven repository. You can upload the myCustomJAR_1.0.0.jar to Maven by using this Maven command: 

mvn install:install-file -Dfile=C:/plugins/myCustomJAR_1.0.0.jar -DgroupId=com.foo.reports -DartifactId=jrurbersrt1.0 -Dversion=1.0 -Dpackaging=jar -DgeneratePom=true

Notice that you must specify the location of the myCustomJAR file in the -Dfile argument. Also notice that you specify the Dgroup and DartifactID values. Once you upload the JAR to Maven using this command, you can reference this JAR file using this Dependency.

<groupId>com.foo.reports</groupId>
<artifactId>jrurbersrt1.0</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>C:\Users\scottm\.m2\repository\com\foo\reports\jrurbersrt1.0\1.0\myCustomJAR_1.0.0.jar</systemPath>
</dependency>

Notice that scope element is system and systemPath references the location of the JAR file in the repository. (This dependency is used later in this article to build the AEM service) 

How can i work with 3rd party JARs when i create an OSGi bundle

When working with OSGi bundles that use 3rd party JARs (that are located in the Maven Repository), you can embed the 3rd party JAR (for example, Simple JSON JAR) into a separate bundle and deploy to AEM. See this community article/video for details.


http://scottsdigitalcommunity.blogspot.ca/2013/06/posting-form-data-to-adobe-cq-using.html

Enable CORS Access-Control-Allow-Origin in AEM

If you use the default AEM JQuery, it has a token that lets you perform AJAX operations to AEM. 

AEM is experiencing slow page loading

How does Dispatcher Caching work

The dispatcher caches only files which have an extension; and the extensions which should be considered for caching can be configured in the dispatcher config as part of the caching rules.

So you need to add an extension to your service request (e.g. ".json"), and configure the dispatcher accordingly, then the caching will work.



 Capturing comments in a default email template used by an AEM 6.2 workflow

You can write a custom workflow step and inject values you want to populate into a email template with Java logic. For example: 

//Populate the MAP with the values 
 myMap.put("topic.subject",TopicSubject); 
 myMap.put("time",timeStamp); 
 myMap.put("host.prefix",hostPrefix); 
 myMap.put("forum.url",forumUrl); 
                     
 //Declare a MessageGateway service
 MessageGateway<HtmlEmail> messageGateway; 
                        
 //Specify the EMail template 
 String template ="/etc/notification/email/html/com.day.cq.collab.forum/en.txt";
              
 Resource templateRsrc = request.getResourceResolver().getResource(template);
               
 MailTemplate mailTemplate = MailTemplate.create(templateRsrc.getPath(), templateRsrc.getResourceResolver().adaptTo(Session.class));
                      
 HtmlEmail email = mailTemplate.getEmail(StrLookup.mapLookup(myMap), HtmlEmail.class);

A solution without coding is to use the variable ${item.data.comment} in the default en.txt. To see other variables that can be used, see https://docs.adobe.com/docs/en/aem/6-2/administer/operations/notification.html#Configuring the Workflow Email Notification Service.

Wednesday, 1 February 2017

Sign up to the AEM Dev Community Newsletter

We are starting a new program in the AEM Community. We are going to release a monthly AEM Community Newsletter. This will keep those whom subscribe up to date with everything going on in the AEM community - such as:

  • upcoming Ask the AEM Community Sessions
  • new content such as articles, Github examples, videos, etc
  • programs like Immerse and various AEM conferences
  • other interesting topics such as various announcements to contests, etc

We will release the first edition in March 2017. All you have to do is fill in this small online form:



Note: If you want to learn how to build your own HTL Newsletter component to use in your own projects - see Creating an Adobe Experience Manager Newsletter HTL component.

Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner



I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 18 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020