How to expose Lightning Web Component to Community with Design Attributes

Community builder is one of the snazzy things that salesforce admins and developers love to work with. As a developer, you would want to create a configurable component, which can have design attributes, which can be configured or customized from any experience, whether it is app builder, community builder or programmatically.

In this post, we are going to create a simple Lightning web component and expose that to the community, with some design attributes.

Note: To develop lighting web components, you must have a VS Code Editor and Salesforce CLI set up on your machine. If you don't know how to do so, here is my post that.

Ok, so without wasting any more time let's get started.

Here is our simple web component code. This component shows the Name of the currently logged user in the community.

1. Making the Lightning web component accessible to the community.

Here is the Js file = displayUserName.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { LightningElement, api, wire } from 'lwc'; import USER_ID from '@salesforce/user/Id'; import USER_NAME from '@salesforce/schema/User.Name'; import USER_EMAIL from '@salesforce/schema/User.Email'; import {getRecord, getFieldValue } from 'lightning/uiRecordApi'; export default class DisplayUserName extends LightningElement { @api showEmail; @api message; @wire(getRecord, { recordId: USER_ID, fields: [USER_NAME,USER_EMAIL]}) wiredUser; get userName(){ return getFieldValue(this.wiredUser.data, USER_NAME); } }

Here is the HTML file = displayUserName.html

1 2 3

<template> <div>User Name: {userName}</div> </template>

Now the important things you need to do in order to enable this component for the community are, you need to make the component visible by setting isExposed property of the meta XML file to true. And, by setting the target property of the XML file to lightningCommunity__Page.
See below the meta XML file.

1 2 3 4 5 6

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>47.0</apiVersion> <isExposed>true</isExposed> <target>lightningCommunity__Page</target> </LightningComponentBundle>

2. Exposing the design attribute of the component to the community.
You can expose any public reactive property i.e. @api property of the web component the community as a design attribute. The design attribute helps the admins to customize and reuse the components without changing the code.

Now I have made some changes to the above meta XML file to expose the design attributes to communities. I have added the targetConfig for each of the public reactive properties that I want to expose as the design attribute to the community.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>47.0</apiVersion> <isExposed>true</isExposed> <target>lightningCommunity__Page</target> <targetConfigs> <targetConfig targets="lightningCommunity__Default"> <property name="showEmail" type="Boolean" default="false" /> </targetConfig> <targetConfig targets="lightningCommunity__Default"> <property name="message" type="String" default="Type your messate here!!" /> </targetConfig> </targetConfigs> </LightningComponentBundle>

Note: The name of the public reactive property and the targetConfig must match and it is case sensitive. Now you can show/hide the user email from the community builder itself.

Thanks!

Resources
getRecord
getFieldValue