Tuesday, January 21, 2020

Sling Dynamic Include — Deep Dive | Dynamically Include Page Components in AEM

This tutorial deep dive into Apache Sling Dynamic Include and explains how to use different include types in AEM to dynamically include the page components in AEM.

SDI(Sling Dynamic Include) Introduction

  • Most of the cases AEM sites contain static data that can be cached in Dispatcher, CDN, or other caching layers.

SDI Include Types

Include tags helps to add dynamic data before returning the page to the client, Include tag types available on different layers between the dispatcher and client.

sling-dynamic-include-in-aem

SSI(Server Side Include) — Apache(Webserver)/Dispatcher layer process includes and replaces the includes with real content.

ESI(Edge Site Include) — CDN layer process includes and replaces the includes with real content.

Javascript Include — The browser process includes and replaces the includes with real content through AJAX call. Javascript Include may impact the page load time as the separate Ajax call is initiated to replace the placeholder with real content also this will create the problem with browser that won't support the JavaScript.

SSI Flow — Apache and Dispatcher Module

Image for post

This is the SSI include flow through Apache Webserver and Dispatcher Module, the Apache layer process includes and replaces with the real content before sending the response to the client. While the user requests the SDI enabled content, Dispatcher requests the content from the AEM server and cache the content response with the include enabled, on every request Apache/Dispatcher Module process and replace the include place holder with real content before sending the response to the client. The same flow is followed for other include type ESI and JSI, the include tags are processed and replaced with real content in different layers.

Configure SDI

As a first step install the “Sling Dynamic Include” bundle, the bundle can be downloaded from https://sling.apache.org/downloads.cgi

sling-dynamic-include-aem

Install the bundle to AEM and ensure the bundle is in Active state.

Image for post

I have enabled a dynamic component with the name “dynamicdata” that will display the current user logged into the system

dynamicdata.html

<h1>${currentSession.userID}</h1>

Let us now enable the required configurations in Apache/Dispatcher

As a first step load the mod_include.so module through httpd.conf or the configuration file that loads the modules.

LoadModule include_module modules/mod_include.so

Configure the virtual-host to process the includes

<VirtualHost *:8080>
ServerAdmin [email protected]
DocumentRoot "C:\opt\communique\dispatcher\cache"
ServerName demo.albinsblog.com
ServerAlias cdn.albinsblog.com

RewriteEngine On
#RewriteRule ^/$ /en.html [R=301]
#RewriteRule ^/content/wknd/ca/(.*)$ /$1 [NE,L,R=301]

<Directory />
<IfModule disp_apache2.c>
SetHandler dispatcher-handler
</IfModule>
Options Indexes FollowSymLinks Includes
# Set includes to process .html files
AddOutputFilter INCLUDES .html
AddOutputFilterByType INCLUDES text/html

AllowOverride None
</Directory>
</VirtualHost>

Now disable the cache for “nocache” selector in dispatcher farm files under the cache rules section

/rules
{
/0000
{
/glob "*"
/type "allow"
}
/0001
{

/glob "/libs/cq/security/userinfo.*"
/type "deny"
}

/0004
{
/glob "*.nocache.html*"
/type "deny"
}


}

SSI Include

Let us now enable the SDI configuration for SSI include, in this scenario Apache/Dispatcher replaces the include place holder with real content.

sling-dynamic-include-aem
enabled – set it to true to enable SDI
path – SDI configuration will be enabled only for this path
resource-types – which components should be replaced with tags
include-type – type of include tag (Apache SSI, ESI or Javascript)
Filter selector – selector added to HTTP request for particular component and is used to get actual content.

Now access the page enabled with “dynamicdata” component — this will display the logged in user name

Image for post

If you see the page source, the dynamic data is already replaced by Apache/Dispatcher before sending the response to the client.

Image for post

Let us review the cached content in Apache/Dispatcher — the content is enabled with include placeholder and replaced with real content on every request.

Image for post

JavaScript Include

Let us now enable the SDI configuration for Java Script include, in this scenario Browser replaces the include place holder with real content through additional Ajax call after the initial page load.

Image for post

Now access the page enabled with “dynamicdata” component — this will display the logged in user name

Image for post

The include is enabled with javascript to replace the dynamic data through the Ajax call.

Image for post

Let us review the cached content in Apache/Dispatcher — the content is enabled with javascript to replace the dynamic data through the Ajax call

Image for post

ESI Include

Let us now enable the SDI configuration for ESI include, in this scenario CDN replaces the include place holder with real content.

I am going to enable the ESI to include through Cloudflare — Akami supports the ESI by enabling some configuration, CloudFront won't support ESI by default.

Create a worker and assign the worker to a route in Cloudflare to process the ESI includes and replace it with real content before sending the response to the client.

esihandler



Image for post
sling-dynamic-include-aem

Now access the page enabled with “dynamicdata” component — this will display the logged in user name, the CDN process the ESI includes placeholder, and replace with real content.

sling-dynamic-include-aem

Let us review the cached content in Apache/Dispatcher — the content is enabled with “ESI include” to replace the dynamic data by CDN.

Image for post

The Sling Dynamic include supports different include options — SSI Include, ESI Include, and Java Script Include, each option has its own pros and cons. The include option can be selected based on the use case and the project requirement.

References






AEM Workflow Launcher - Exclude List

AEM Workflow Launcher - Exclude List

This video explains How to use Exclude List with AEM workflow Launcher.




How to Rotate Logs in AEM | Apache Sling Logging Writer Configuration

How to Rotate Logs in AEM | Apache Sling Logging Writer Configuration

This video explains How to Rotate Logs in AEM |  Apache Sling Logging Writer Configuration




Wednesday, January 1, 2020

Enable Salesforce Communities with AEM Content — Salesforce CMS Connect (HTML)

Enable Salesforce Communities with AEM Content — Salesforce CMS Connect (HTML)

This tutorial explains the details on enabling the Salesforce communities with Adobe Experience Manager(AEM) content through Salesforce CMS Connect (HTML).

Communities are a great way to share information and collaborate with people who are key to your business processes, such as customers, partners, or employees. The Salesforce Community Cloud allows us to set up the communities in a simple way.

Adobe Experience Manager (AEM) is a comprehensive content management solution for building websites and all of their complementary applications.

For the companies using both Salesforce Communities and external Content Management Systems e.g. AEM, the content will be duplicated in both the systems also the branding will not be consistent across all the websites. This can be overcome by using the Salesforce Communities CMS Connect components, Salesforce communities can pull the content and styles from external CMS systems e.g AEM through CMS connect.

CMS Connect

CMS Connect is a functionality that has been added by Salesforce to communities.

CMS Connect allows Community Cloud Customers to leverage the existing content and pull it in dynamically into their Lightning Communities. Allows you to centralize content in whatever the CMS system you have chosen, without having to recreate content when you want to leverage it in your communities. This will enable the Headless CMS experience, the content is managed through a centralized CMS system and consumed through different channels to support different business cases.

The supported 3'rd party systems are

  • Adobe Experience Manager
  • Drupal
  • SDL
  • Sitecore
  • WordPress

CMS Connect can pull content from Adobe Experience Manager, WordPress, Drupal, Sitecore, SDL, and others that support content structured as JSON or HTML fragments.

CMS Connect (HTML) allows you to integrate fragments of your HTML web content (i.e. headers, footers, and banners, etc) to have the same branding experience of your website into your communities.

CMS Connect (JSON) is best for when you want to bring in content lists (i.e. blogs, articles, product catalogs, files, etc) including authenticated content.

The CMS connect component can be configured to pull the AEM component-specific content to the Salesforce community website, the header and footer also can be pulled from AEM to provide the consistent look and feel between the websites. The styles and java scripts from AEM can also be pulled into a Community website to have consistent styling across the websites. The community websites will be updated whenever the content in AEM is changed, this helps to reduce the effort to update the content across multiple systems.

Configure CMS Connect(HTML)

As a first step, let us enable the communities to the Salesforce account. To enable the communities, log in to the Salesforce account and do a quick find for “communities”, click on “Communities Settings” and Enable the communities if not enabled already.

Select an available subdomain for the community and save the configurations.

The community is enabled now, if you want to change any additional parameter then go back to the “Communities Settings” page and update the required details. Let us now create a new community, go back to “All Communities” and click on “New Community”

Select the required template to build the community, you can “Build your own” if required. I am going to use the “Customer Service” template for the demo. Click on “Get Started” after selecting the template.

Create the community by entering the name and context path if required.

Click on “Content Management” and “CMS Connect” to connect to “Adobe Experience Manager”.

CMS Connection

Add a new CMS Connection to connect the community to the AEM server to pull the required content.

Enter a name for the connector and also select the “CMS Source” as AEM

Select “Connection Type” as public, if you select “Authenticated” the “Named Credential” should be provided, the Authenticated “Connection Type” can pull data only from JSON source.

Enter the server base URL — https://test.albinsblog.com(Exposed AEM publisher through external domain), the domain should be enabled through SSL(HTTPS)

Enable the root content path — content/wknd/us/{language} (parameterizing the language so that the content can be pulled based on the language enabled in Salesforce)

Add the required CSS and JavaScript to the connection- I am enabling only the CSS required to support the wknd website styling.

Enable the language mapping between the Salesforce community and AEM.

Save the configuration now and go back to the Builder

Add the “CMS Connect(HTML)” component to the required location.

Click on the component and link the CMS Connect source to the community, define the component path to pull the data to this specific component instance.

I am going to pull the content for the below-specified section from the WKND sample website home page(e.g en.html).

The content in AEM is build based on different individual components — self-contained section of the websites, the individual components are exposed externally as an HTML fragment. The HTML data of the components can be used in the external websites to display the section of the content by applying the required styles.

The component-specific path can be retrieved from AEM.

The component path is going to be /content/wknd/us/en/jcr:content/root/responsivegrid/responsivegrid_1679842506, as the base path is already configured as content/wknd/us/en, the actual component path for the CMS Connect component is jcr:content/root/responsivegrid/responsivegrid_1679842506.html — the component path should be appended with “.html” to pull the HTML fragment of the component.

Now you will receive an exception related to cross-origin when the community tries to pull the data from AEM.

CORS Configuration

By default the cross-origin requests are blocked by AEM, we should enable the CORS(Cross Origin Resource Sharing) in AEM to share the content with Salesforce Communities, Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served, the origin(community domain) — https://techforum1-developer-edition--live.na123.force.com (refer the console error for actual domain) should be added as an allowed origin in AEM to support the Cross-Origin request from the salesforce community to AEM.

The CORS configuration can be enabled through the “Adobe Granite Cross-Origin Resource Sharing Policy ” OSGI configuration

Add https://techforum1-developer-edition--live.na123.force.com (the DNS value is different for your community configuration) into the “Allowed Origins” configuration

Now the configurations are ready, refresh the page and preview the community. The community is now pulling the required content from AEM and also applying the styles based on the CSS from AEM.

Enable the public access for the community so that the external users can access the community without providing the credentials. The community URL can be copied from here or Salesforce also sends an email with URL upon publishing the community. The other required configurations e.g SEO can be enabled if required through the settings.

The community is now ready for publishing, the community URL can be accessed to view the content. This time you may not see the content from AEM as the CORS setting should be also enabled for the live domain — https://techforum1-developer-edition.na123.force.com

Now the community can be accessed by the external users, the custom community domains(DNS) can also be configured if required.

If required you should be able to pull the header and footer from AEM. The header and footer can be configured through settings. This provides a consistent “look and feel” across websites.

CMS Connect allows Community Cloud Customers to leverage the existing content and pull it in dynamically into their Lightning Communities. CMS Connect allows you to centralize content in whatever the CMS system you have chosen, without having to recreate content when you want to leverage it in your communities. The CORS headers should be enabled in AEM to accept the request from Salesforce Community. This will enable headless CMS configuration, the content is managed centrally in a selected CMS and different channels can retrieve the content from CMS through different channels e.g HTML, JSON, etc, and display the content to end-users. This will reduce the effort required to manages the content for multiple channels.






Wednesday, December 25, 2019

How to integrate AEM with Magento e-Commerce platform through CIF framework

How to integrate AEM with Magento e-Commerce platform through CIF framework

This video explains how to integrate AEM with Magento e-Commerce platform through CIF framework