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.






8 comments:

  1. Can you please advice if features work in this approach like
    - AEM personalization
    - Adobe analytics
    -

    ReplyDelete
  2. You need some additional effort/configuration to support the Personalization. Let me post some details on that

    ReplyDelete
  3. I get the following error on CMS connect(HTML):

    "Can't connect to server.
    The server returned code HTTP 0."

    Any idea what could be the issue here ?

    ReplyDelete
    Replies
    1. This error is displayed when the CORS headers are not sent by AEM. have you enabled the CORS settings in AEM for the community domains. Please check the browser console for errors and enable those domains URLs to the CORS configurations in AEM. are you accessing AEM directly or through Dispatcher? if you invoke through Dispatcher the headers may not be available for the subsequent requests as the response headers are not cached by default in the dispatcher, either enable the cache for the CORS related headers in dispatcher or add the CORS headers directly from the dispatcher(Apache) instead of enabling from AEM.

      Delete
    2. Yes, I have enabled CORS in AEM for the community domains. I am accessing AEM (local AEM author instance) directly. Please note that I have given my AEM author URL (https://localhost:5406) in CMS Connection Configuration.

      Delete
    3. have you checked the error in browser console or network tab? the localhost may not work, you should have a externally accessible DNS enabled with https

      Delete
    4. Yes, I get CORS error in browser console even after enabling cors on aem author. May be it will not work with localhost. Could you please call me @9036863324, just need to check with you if I have missed anything else. Thanks in advance.

      Delete
    5. You should enable a external facing domain with https, refer this for quick demo - https://youtu.be/XWDy_GphMZ4

      Delete