📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by April 19th. Learn more.
close

Create a Community

What You’ll Learn

In this project, you’ll learn how to:
  • Create a basic community.
  • Create a theme layout component.
  • Add a company logo.
  • Build a vertical navigation menu.
  • Build a custom search component.
  • Add configuration properties to the theme layout component.

Introduction

Get Cloudy Consulting is a Salesforce SI partner that specializes in building custom community implementations for their clients. Cloud Kicks, one of their main customers, wants to create a branded community with:

  • A side navigation menu
  • A custom search feature that searches accounts, contacts, and leads
  • A headerless layout

A custom theme layout component is the best way to give Cloud Kicks exactly what they want, because it can alter the structure of a Lightning community template and override its default styles.

Using the code samples in this project, you’ll create the skeleton structure for a custom theme layout component for Cloud Kicks, which uses a side navigation menu and a custom search component, and removes the header entirely.A community page with search and navigation on the left-hand sidebar.

How Do Custom Theme Layout Components Work?

A theme layout component defines the top-level layout for the template pages (1) in your Lightning community. It includes the common header and footer (2), and often includes navigation, search, and the user profile menu. In contrast, the content layout (3) defines the content regions of your pages, such as a two-column layout.A template with a theme layout area that includes a header and footer, and a content layout area with two columns.

Each Lightning community template includes theme layout components that control the layout of its pages. However, you can override a template’s default structure by creating a custom Lightning component in the Developer Console, which implements the forceCommunity:themeLayout interface.

To use the custom Lightning component in your pages, you must assign your component to a theme layout in Community Builder. Then you apply the theme layout—and thereby the associated component—in each page’s properties.

For example, the Customer Service template includes the following theme layouts and associated Lightning components.
  • Default applies the Customer Service component to all pages, except the login pages.
  • Login applies the Login Body Layout component to the login pages.

Customer Service default theme layout names and components

Curious why Community Builder doesn’t let you assign your custom Lightning component directly to a page? A key benefit of this arrangement is that you can instantly update the structure of every page that a theme layout applies to by simply swapping the Lightning component that’s associated with the theme layout. Because who wants to waste time updating every...single...page when your community needs a quick refresh?

Example

Let’s say you create three pages for your upcoming Spring campaign and you want to include a large header at the top to make a big splash. Using the forceCommunity:themeLayout interface, you create a custom theme layout component called Large Header in the Developer Console. Then in the Settings | Theme | Configure area of Community Builder, you create a new theme layout called Spring and assign the Large Header component to it.Custom theme layout for Spring campaign.

Next, you select the Spring theme layout in each page’s properties, which instantly applies the Large Header component to the pages of your Spring campaign.Apply Spring theme layout type in page's properties.

Everything looks rosy until the VP of marketing decides that the header takes up too much room. That’s an easy fix, however, because you don’t have to update the properties of each page again to change the theme layout component. Instead, in the Theme area, you can replace the Large Header component in the Spring theme layout with a Small Header component, and instantly update all three pages!Small header

Launch Your Trailhead Playground

To complete this project, you need a free Trailhead Playground. You can find it at the bottom of this page. Click Launch to open the Trailhead Playground in a new browser tab (login required).

It typically takes 3–4 minutes from the time you first sign up for Trailhead to create your Trailhead Playground.

Create a Basic Community

OK, first things first—let’s get started by turning on communities.

  1. From Setup, enter Communities in the Quick Find box, then select Communities Settings.
  2. Select Enable communities.
  3. Enter a unique name to be used as your domain name and click Check Availability. Keep in mind that you can't change the domain name after you save it. You have to call Salesforce to change it.
  4. Click Save, and then click OK. If you see a dialog asking to open a Salesforce page in a new tab, click Open.

Now let’s set up a basic community. You should have been redirected to the All Communities page in Setup, but if not, enter Communities in Quick Find, and select All Communities.

  1. Click New Community. The Community Creation wizard appears with different template options for you to choose from.
  2. Select the Customer Service template.
    Note

    Note

    You can use any Lightning template with custom theme layout components, but for this project, stick to Customer Service.

  3. Click Get Started.
  4. Enter a community name and URL. Name the community CloudKicksTheme and ensure that the final URL is https://[domain name].force.com/CloudKicksTheme.
  5. Click Create. Your community has been created in Preview status, which means that what you’ve created so far isn’t in the world yet.

Take a quick look around. This area is Community Workspaces, where you customize and administer your community. There are many additional features that you typically need to configure in a community, but for our purposes, we can dive right into the code for our custom theme layout. Onward!

retargeting