Motivation behind this
After posting my previous blog post Display Google Map using Salesforce Lightning Web Components leveraging modern JavaScript at Linkedin (My Post), there are few community members asked me if that component could be available in Salesforce Communities, which drives me to do one more proof-of-concept on how that component can be available at Communities.
Use Case
How to expose Lightning Web Component at Salesforce Community.
Expected Outcome
After adding LWC component at Community Page, it will look like this:
Solution Approach
Let's break down few steps to be performed:
1. Changes in Configuration File displayLWCMap.js-meta.xml
a) Need to add targets where this component will be exposed. lightningCommunity__Page and lightningCommunity__Default
b) Need to add targetConfigs which will contain property to be passed.
So, entire file will look like this:
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="displayLWCMap"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightningCommunity__Page</target> <target>lightningCommunity__Default</target> </targets> <targetConfigs> <targetConfig targets="lightningCommunity__Default"> <property name="accountNameParam" type="String" default="myValue"></property> </targetConfig> </targetConfigs> </LightningComponentBundle>
If the defined property is not exposed in js Controller we will receive error.
So, here I have used accountNameParam which is public reactive property (@api).
There will not be any other changes in HTML and JS controller files.
2. Enabling Community and use your own template.
For more information, refer Build a Custom Theme Layout Component for Lightning Communities
3. Adding Component to the Community Builder
When we try to add this component inside the page, we will see following alert message.
Solving Security Issues
Navigate to Builder à Settings à Security and find following settings:
Add the blocked URL as Whitelist URL.
We can also add trusted sites in the following screen.
Add the displayLWCMap component to the layout, publish the changes and our job is done.
No comments:
Post a Comment