How to Use Lightning Web Components in Communities

Let’s discuss here how to use the lightning web component(lwc) in communities. In Aura, To appear in Community Builder, a component must implement the forceCommunity:availableForAllPageTypes interface. But in case of the Lightning web components we will use configure the details in configuration file—<component>.js-meta.xml file—that defines the metadata values for the componentMake a custom Lightning web component available in Community Builder, where users can drag it onto the page. After you configure the component, it appears in the Components panel of all Lightning communities in your Org.

sfdx force:lightning:component:create --type lwc --componentname communityexample --outputdir force-app\main\default\lwc

In this example, we will be using the custom component that will allow you to create a case from the community

 

communityexample.html

<template>
    <lightning-card title={title} icon-name="standard:record">
        <div class="slds-m-around_medium">
            <lightning-input label="Case Subject" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-input label="Case Description" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-button label={buttonlabel} variant="brand" onclick={submitCase}></lightning-button>
        </div>
    </lightning-card>
</template>

communityexample.js

import {
    LightningElement,
    track,
    api
} from 'lwc';
import {
    createRecord
} from 'lightning/uiRecordApi';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';
import CASE_OBJECT from '@salesforce/schema/Case';
import SUBJECT_FIELD from '@salesforce/schema/Case.Subject';
import DESC_FIELD from '@salesforce/schema/Case.Description';
import STATUS_FIELD from '@salesforce/schema/Case.Status';
import ORIGIN_FIELD from '@salesforce/schema/Case.Origin';

export default class Communityexample extends LightningElement {

    @api title;
    @api buttonlabel;

    @track subject = '';
    @track desc = '123234345345';

    handleChange(event) {
        if (event.target.label === 'Case Subject') {
            this.subject = event.target.value;
        }
        if (event.target.label === 'Case Description') {
            this.desc = event.target.value;
        }
    }
    submitCase() {
        const fields = {};
        fields[SUBJECT_FIELD.fieldApiName] = this.subject;
        fields[DESC_FIELD.fieldApiName] = this.desc;
        fields[STATUS_FIELD.fieldApiName] = 'New';
        fields[ORIGIN_FIELD.fieldApiName] = 'Web';

        const recordInput = {
            apiName: CASE_OBJECT.objectApiName,
            fields
        };
        createRecord(recordInput)
            .then(case =>{
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Case is submitted : ' + this.case.id,
                            variant: 'success',
                        }),
                    );
                })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

 

communityexample.js-meta.xml

To use a component in Community Builder, edit the file to define the component’s design configuration values.

• To make your component usable in Community Builder and in managed packages, set isExposed to true.
• To make your component available in the Components tab in Community Builder, define lightningCommunity__Page in targets. Without this tag, your component can’t appear in Community Builder.
• To include properties that are editable when the component is selected in Community Builder, define lightningCommunity__Default in targets and define the properties in targetConfigs.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Case Create</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="title" type="String" default="Submit Case"></property>
            <property name="buttonlabel" type="String" default="Submit Case"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

 

Add an SVG Resource to Your Component Bundle

To define a custom icon for your component, add an SVG resource to your component’s folder. If you don’t include an SVG resource, the system uses a default icon ().

An SVG resource must be named component.svg. You can only have one SVG per folder.

communityexample.svg

 

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
    <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red" />
</svg>

 

Push changes to scratch org and add the changes to a community builder. Go to community builder and you can able to the LWC in community builder as shown below