Integrate Adobe AEM with Salesforce

Adobe AEM provide its extendable capabilities to integrate with other products. Below demonstration describe how to connect Adobe AEM with Salesforce which is the market’s leading cloud based CRM System. AEM provide OOTB components for the integration purpose. It helps the organization to target the customers through web channels as per their status in CRM.

Steps to Connect to Salesforce:

AEM uses OAuth mechanism to connect to Salesforce. So , first we need to create an connected app inside salesforce to get customer secret and access token.

Go to login.salesforce.com. Click on Setup on the top right corner. Search for Apps and create a custom app. Fill in required details as shown in below images. Callback Url here accept only https urls, so our AEM must be SSL configured. Check here how to configure SSL in AEM. Callback url is the url of cloud service that we will create in AEM.

Create new custom app

Enable SSL for AEM author instance

Accessing site over https is must. AEM has capability to access entire site or few pages https.

There are two ways to access site or pages by https:

Using OSGI service Apache Felix Jetty Based Http service. (To access entire instance using https).
Using crxde, manually creating nodes. (To access few pages using https).

Create credential for SSL development

Use the Java keytool to create a self-signed credential and to store it in a keystore file. The following procedure uses a single command that includes all of the information needed to create the keystore. For complete information about the command, see the Oracle Java SE Documentation.

Create a directory named ssl in the directory where the quickstart JAR file is located.
In the command prompt, type the following command to create the credential and keystore:

keytool -genkeypair -keyalg RSA -validity 3650 -alias cqse
 -keystore [quickstart_dir]/ssl/keystorename.keystore  -keypass key_password 
-storepass  storepassword -dname "CN=Host Name, OU=Group Name, 
O=Company Name,L=City Name, S=State, C=Country_ Code"

Scaffolding in AEM

Scaffolding is a functionality to create structure-wise similar content based on a - well - old-fashioned form-based input screen. Boring, you might say, and definitely nothing any editor used to drag'n'drop fun would like to use. Especially, since swapping back and forth to scaffolding mode from the sidekick doesn't work properly if the content structure changed by e.g. adding new components or removing / re-adding the text-image. Still, if there's some casual user who just once in a while has to type in some news entry or blog post, that scaffold might work - sort of. But the scaffold is not much to talk about. Let's reconsider this.

What is scaffolding actually? Basically, it's form based editing of existing or new pages. The form is defined as a static dialog within the CMS. You can have a look at the example and the dialog definition in your CQ5.5 instance (links require running it on localhost:4502).

This scenario can be used not only for quickly creating structured content (and works quite well for that use case), but I also used the functionality of the scaffold to provide advanced functionality:

OSGi Configuration via JCR Nodes

The reasons to configure OSGi services via content nodes is obvious:

Configurations are deployed with the code
Configurations can be transferred with content packages
Configurations can be managed with source control

Defining an OSGi configuration with content nodes is pretty simple:

You create a sling:Folder 'config' and add nodes below it of type sling:OsgiConfig. This node has to have the name of the persistence ID, usually that's the fully qualified class name of the service you want to configure, e.g. com.day.cq.wcm.core.impl.VersionManagerImpl.

Therefore, you can configure the service with an xml file in the folder /apps/yourproject/config with the name com.day.cq.wcm.core.impl.VersionManagerImpl.xml and the following content:

<?xml version="1.0" encoding="UTF-8">
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primartyType="sling:OsgiConfig"
versionmanager.maxNumberVersions="{Long}5"
versionmanager.ivPaths="/"
versionmanager.purgePaths="[/etc/feeds,/home/users/public,/home/groups/public]"
versionmanager.createVersionOnActivation="{Boolean}true"
versionmanager.maxAgeDays="{Long}3"
versionmanager.purgingEnabled="{Boolean}true" />

You can add factory configurations (multiple settings for one configuration) by adding a unique identifier to the file name, separated by a hyphen. Setting up the MCM configuration e.g. can be done by providing a file named com.day.cq.mcm.impl.MCMConfiguration-myConfiguration.xml. This will create a binding to the configuration.

Only one open topic remains: You usually have one code base, but multiple configuration according to the various systems: An integration test author system has different configurations compared to a production publish system. The instances can be distinguished by using different runmodes, and the configurations can be runmode specific as well:

Just add the name of the runmode the set of configurations apply to the config-folder, like 'config.author' or 'config.publish'. By this you can maintain all applicable configurations in the version control, deploy the code, activate the packages - and the instance itself picks the proper settings. Pretty neat, isn't it?

Debugging Adobe Dynamic Tag Management (DTM)

Adobe Analytics is a powerful tool to analyse almost anything that can be tracked on a website. Unfortunately, any additional, customised code and feature increases the risk of introducing bugs as well.

Setting up the debugging environment

We already briefly discussed the advantages of DTM and how to include it into a digital marketing platform in a prior article on our blog. Once DTM is set up and all the necessary rules that help tracking the right data are defined, the fun begins: Seeing them in action. When testing if everything works the way it should two things need to be considered:

The rule is firing successfully
The variables are mapped correctly

In order to properly manage to monitor this you need a packet analyser (or network analyser). Don't get intimidated though, you have one installed already, and you love to watch youtube with it.

Yes, your browser most surely has a packet analyser already built in. It's normally the "network" tab of the “web console” or “developer tools” of your preferred browser. The name changes from one browser to another, but you should be able to find it in the browser's options. Also, there are some add-ons and plug-ins that can also do the same thing.

For simplicity I'll stick with Google Chrome's console (which you can bring up by hitting F12 on a PC, or ⌥⌘j on a Mac), and the Adobe Marketing Cloud Debugger plugin. Follow the instructions on Adobe's website to set everything up correctly.

Customize AEM Sidekick

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

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

Populating AEM Component Dialog fields using JSON data returned by Sling Servlets

You can invoke an Adobe Experience Manager (AEM) Sling Servlet to populate fields that appear in AEM component dialog. That is, instead of hard-coding values in JavaScript, you can populate a dialog drop-down using a Servlet's return value (for example, JSON data), as shown in the following illustration.

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 requires properties that are configured by using the Felix Configuration screen.

AEM Configuration screen

Creating a custom Adobe Experience Manager PDF service

You can create a custom AEM service that creates and modifies PDF documents. For example, consider a use case where a user submits data to Adobe Experience Manager (AEM). A custom service creates a PDF document, writes the data to the newly created document, and saves the document in the AEM Digital Asset Manager (DAM). This development article walks you through the process of creating a custom AEM service that is able to perform this use case by using Apache PDF BOX API. For information about this API, see http://pdfbox.apache.org/.

WHAT IS AKAMAI?

Akamai is a CDN (Content Delivery Network) that has servers all over the world, delivering the content of a website and caching that part of the content that doesn’t need to be constantly updated.

Beyond AEM, as CDN, among Akamai’s pros we can find some remarkable points:

Faster delivering content: Is not the same that an user access to the website servers than could access to Akamai. In Akamai the content is available in closer servers and cached.
Better balancing of the content: apply an Internet-centric approach to global load balancing and real-time fail-over. Designed to ensure high availability and responsiveness to user requests.
Safety: put another wall between the user and your website.
Improve user experience: Due to previous points the user has a better experience when requests content.

Get the rendered HTML for an AEM resource, component or page

It's easy to retrieve a rendered component by making a GET request. Apache Sling's SlingMainServlet and DefaultGetServletwill process GET requests, take the path's extension into account, and return the rendered resource. The most obvious example of triggering this process is simply typing the component's path into the browser's address bar or making an AJAX call. You can retrieve the HTML markup (or JSON, XML, txt, PDF, etc...) for a component as well as a page if you provide the correct path. After all, they're both just Sling resources.

Trying to get the rendered HTML of a component on the server side is still easy, but requires a little more work. Without knowing the inner workings of Sling, you might use Java's java.net.HttpUrlConnection class to construct and make an HTTP request from within your application to your application.

The better way is to use the SlingRequestProcessor service as the entry point into Sling's process. The processRequest method of the SlingRequestProcessor takes an HttpServletRequest, HttpServletResponse, and Resource Resolver as parameters. The only trick is that you need to provide a request that enables you to set the request path and a response that enables you to get the OutputStream as a String.

AEM provides the RequestResponseFactory where you can easily get such a request and response.

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.

A drop-down control populated by using a DataSouce object

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) by 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 dynamically check or uncheck the checkbox (this is shown later in this article).

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.

Things to know about AEM Touch UI

Adobe introduced a new touch-optimized UI with AEM 5.6 for the author environment. This differs considerably from the original classic UI as it is designed to operate on both touch and desktop devices. The basic principles of the touch-optimized UI are:

Mobile first (with desktop in mind)
Responsive design
Context relevant display
Reusable
Include embedded reference documentation
Include embedded tests
Bottom-up design to ensure these principles are applied to every element and component

Display dynamic popup using GTM

There are different ways to display a dynamic modal popup, one of the best way is displaying the modal popup using google tag manager, as there will not be any code required. All changes to be done in GTM console.

Dynamic modal using GTM

Touch UI (Rich Text) Overlay Component does not work when included statically on the template

Included Statically on a Template. When Tries to Edit the dialog :

I see error in console

GET http://localhost:4502/content/a/b/c/jcr:content/richText.json?_=1458055488719 404 (Not Found)

But when I drop the component statically on a template it works fine.

This is because when you include it that way, the "text" resource is technically null and not available. Since you're including it in your page component, modify the associated template and pre-set the text node. Example:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:description="Page Template"
          jcr:primaryType="cq:Template"
          jcr:title="Page Template"
          allowedPaths="[/content/site/en(/.*)?]"
          ranking="{Long}100">
    <jcr:content
            jcr:primaryType="cq:PageContent"
            sling:resourceType="site/components/page/interior"
            cq:designPath="/etc/designs/site">
            <text jcr:primaryType="nt:unstructured" sling:resourceType="wcm/foundation/components/text" />
    </jcr:content>
</jcr:root>

Subscribe to: Posts ( Atom )

AEM Guide

Wednesday 29 March 2017

Adobe AEM curl commands

Find “all” page references for a given image/asset in a jcr path. The below command will return in JSON format:

You can also specify the required number of page references; something like below which will return only 20 page references:

To find all pending Jobs

Tuesday 28 March 2017

Salesforce: Can't refresh access token. Response: {"error":"invalid_grant","error_description":"token validity expired"}

Saturday 25 March 2017

Access OSGI service from the WCMUse-class in Sightly

Friday 24 March 2017