Tags:
Related
Recommended

Salesforce Community Cloud integration

Niclas Cedermalm

This blog posts describes how you setup Salesforce Community Cloud with SDL Tridion Sites.

In Salesforce Community Cloud there is a feature called CMS Connect that allows you to consume HTML fragments, which you publish from SDL Tridion Sites. Any content you use on your main site can be used on your community site (with help of fragment templates). In addition you can also reuse existing CSS and javascripts in the community portal. This helps you to keep your community site consistent with your main site as you can reuse content and look&feel as-is.

Creating a new community portal in Salesforce

Setting up new community portals using Salesforce Community Cloud is very straight-forward If you have this feature enabled in your Salesforce instance you should find Communities in your Setup menu. Please refer to the following documentation on how enable Salesforce Communities: https://help.salesforce.com/articleView?id=networks_enable.htm&type=5 

To create a new community portal you follow the steps described here: https://help.salesforce.com/articleView?id=networks_creating.htm&type=5 

Below shows some different templates that can be used to create a new community portal:

Configure CMS Connect

Follow the steps below to setup a CMS connection to your SDL Tridion Sites web site:

  1. Select 'CMS Connect' in your workspace menu of your community
  2. Click on 'New'
  3. Fill in the following details
    1. Name of your connection
    2. Select 'SDL' from CMS source drop-down
    3. Server URL to your DXA site with HTTPS (Salesforce requires HTTPS for accessing the fragments)
    4. Root Path: {component}
      • This is appended to the server URL when adding CMS content to your site. For multi-lingual sites, see next section
    5. Add your CSS files to be included in the community site. It can be for example the main CSS of your DXA site, e.g. system/v1.7/assets/css/main.css
    6. Add Javascripts to be included. Some scripts might collide with the built-in scripts of the community site. If you run into issues try the alternative approach described in the section below (Including your javascripts).

Now you should be able to include your CMS managed content into your community site. For more information about on how creating CMS connection, please refer to https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_cms_create_connection.htm.

Setup for multi-language support

If you want to use language mappings you have to setup your DXA site to use language postfixes for all publications including your main site, e.g.

In your CMS Connect setup you need to do the following:

  1. Setup Root Path to: {language}/{component}
  2. Make sure CSS has the language prefix, i.e. en/system/1.7/assets/css/main.css
  3. Setup language mappings for each language you would like to use on your community site. Example:

Customizing CSS

You might need to some additional tweaks on the style where your style collides with the style provided by the selected community template. There is a possibility to directly do it from the Builder interface. Select 'Branding' and then 'Edit CSS'. There you can add your changes. Those changes will then be merged into the community CSS files.

For more information about overriding community template elements with custom CSS: 
https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_css.htm 

Including your javascripts

There are several ways of including your scripts. Either by specifying them in the CMS connect setup or include them in the head markup for the community site. For DXA designs based on Bootstrap it works best to include them in the head markup to avoid conflicts with the provided community scripts. Make sure that you add defer=true for the scripts you normally include in the footer (not an optimal solution, but it is an easy workaround). You find the edit head markup feature here: Settings->Advanced->Edit Head Markup.

Example of head markup:

Additional Customization References

For more information on how to handle external CSS and javascripts on your community portal:
https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_cms_recommendations.htm 

Use custom fonts:
https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_font.htm 

Customizing the theme layout of community templates:
https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_theme.htm 

Using CMS Content

To use your content in the community portal you need to publish them as standalone HTML fragments to your public site. There are several possibilities such as:

  • Single-content pages using a strip-down page template without header and footer
  • Dynamic component presentations exposed through a simple Java servlet or a HTTP handler

I guess more options will be available when the new region concept is introduced in SDL Tridion Sites 9.

When rendering your HTML fragments, you can either just render the HTML of that particular content component or embed in in a base HTML structure container. Normally if using an existing CSS style it is easier to embed it in a HTML structure container to preserve the look&feel. Example:

If you’re using DXA there is already some basic support for standalone fragments where the header and footer can be accessed standalone (e.g. http://mysite.com/system/include/header & http://mysite.com/system/include/footer). In addition there is a simple DXA module available to expose any content as standalone fragments. See the following blog post on how to setup this module. It also is possible to consume JSON content in your community portal. Read more about this option here: https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_cms_connection_json.htm

Use CMS content in Salesforce Community Builder

To use your CMS fragments in your community portal you follow the below simple steps:

  1. Select the ‘Component’ menu in the builder and select CMS Connect (HTML). Drag & drop it to your template in the region you want to have it.




  2. Select your SDL Tridion CMS source and type the relative path to your HTML fragment excluding site URL and localization. Example: site.com/en/fragments/carousel => fragments/carousel.



  3. After specifying a valid component path your HTML fragment will appear in the builder.

Summary

The new Salesforce CMS Connect feature provides a nice way of embedding CMS fragments into Salesforce community sites. I expect more functionality will come in Salesforce Community Cloud including personalisation support etc.

In my next blog post I will go through how you quickly create a community site from scratch using vanilla DXA and the white label design.