In my previous blog post I described how to setup a standard Salesforce Community Cloud portal to consume SDL Tridion Sites content. This blog post I will describe some simple steps to quickly get started with Salesforce Community Cloud and vanilla DXA using the white label design.

Introduction

DXA comes with with some standard fragments for header and footers. To easily use fragments for other type of content you need to define some additional templates and DXA views to get this working. I have created some examples in a simple DXA module found here: https://github.com/NiclasCedermalm/dxa-fragment.

 This DXA add-on module can be used to publish your content as standalone HTML fragments. It comes in two different flavours (two different Tridion page templates):

• Clean Fragment Page – renders the content HTML as-is without anything else
• Fragment Page – renders the content in the DXA HTML container which works with your current CSS

To expose your content as HTML fragment you just simply add the content component as usual on pages and select one of the above templates. Publish the page and your fragment is ready to be consumed by your community portal(s).

Setup

DXA Preparations

The following is needed to be done in SDL Tridion Sites and DXA:

1. Setup SSL for your DXA site (the site needs to be publicly available as well)
2. Install the DXA fragment module (see instructions on https://github.com/NiclasCedermalm/dxa-fragment)
3. Publish the fragments to your site, for example under a directory called 'fragments'

1. Create Community Site

Create a new community site in Salesforce according the instructions given in my previous post. Use the 'Napili' template to create a fully functional portal for customer service.

2. Setup CMS Connect 

Create a new CMS connection as described here. Setup CMS connect to point to your HTTPS-enabled DXA site as following:

Make sure to use the following CSS URL: system/[DXA version]/assets/css/main.css.

3. Apply CSS customisations

Open up the CSS editor found under Branding->Edit CSS in the Salesforce Community Builder.There you can add CSS customisations to make the white label design to work properly within the Napili template. Add the following CSS changes:

.main-nav {
    display: none;
} 

#page-header {
    border-bottom: 0;
    margin-bottom: 8px;
}

.page-row { 
    display: table-cell !important;
    width: 10000px;
} 

.uiContainerManager {
    height: 0;
} 

.page-row-expanded>.container-fluid {
    margin: 15px auto;
} 

main .page-border {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.search-field-wrapper {
    margin-top: -24px;
}

4. Update head markup

Add the following to head markup (found under Settings->Advanced in Salesforce Community Builder):

<script src="https://[your site]/system/[DXA version]/assets/scripts/header.js"></script>
<script defer="true" src="https://[your site]/system/[DXA version]/assets/scripts/main.js"></script>

Do not forget defer=true otherwise the scripts won’t work.

5. Setup header & footer

The header and footer fragments comes from the OOTB include pages in DXA. To setup the header & footer in your community site you do the following:

1. Go into Salesforce Community Builder
2. drag & drop 'CMS Connect (HTML)' from the 'Component'-menu and drag and drop a new component to top of the page. Select your CMS source and enter 'system/include/header' in the component path:
   
   
3. Do the same for the footer but drag and drop to the bottom of page and use 'system/include/footer' in the component path

6. Consume content fragments

Now you are ready to consume your published fragments on the community site. Open Salesforce Community Builder and drag & drop 'CMS Connect (HTML)' from the 'Component-menu onto your page. Select your CMS source and type the relative path to your HTML fragments, e.g. fragments/carousel:

7. Publish site

After populating the site with content fragments your community site ready for use. You can customise the other parts of the community portal as well such as drag&drop standard Salesforce widgets, modifying navigation etc. Click on the 'Publish'-button in the top-right corner to make your site available. After a few minutes you will get notified by an e-mail that your site is available.

Below is one example of a Salesforce community site powered by DXA fragments: