Create a Community
What You’ll Learn
- 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.
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.
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.
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 Experience Builder. Then you apply the theme layout—and thereby the associated component—in each page’s properties.
- Default applies the Customer Service component to all pages, except the login pages.
- Login applies the Login Body Layout component to the login pages.
Curious why Experience 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?
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 Experience Builder, you create a new theme layout called Spring and assign the Large Header component to it.
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.
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!
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.
- From Setup, enter Communities in the Quick Find box, then select Communities Settings.
- Select Enable communities.
- 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.
- 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.
- Click New Community. The Community Creation wizard appears with different template options for you to choose from.
- Select the Customer Service template. You can use any Lightning template with custom theme layout components, but for this project, stick to Customer Service.
- Click Get Started.
- Enter a community name and URL. Name the community CloudKicksTheme and ensure that the final URL is https://[domain name].force.com/CloudKicksTheme.
- 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 Experience 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!