Introduction to Lightning Web Components for Public Access
Lightning Web Components (LWC) offer a contemporary approach to crafting swift and scalable web components that are platform-agnostic. Notably, LWCs can be utilized to construct public sites accessible by anyone on the internet, sans the need for authentication. This article will guide you through the process of developing a public site using Visualforce Pages within Salesforce. First, however, it’s essential to grasp the concept of a Salesforce public site.
Understanding Salesforce Public Sites
A Salesforce public site is an online platform that allows unrestricted access to internet users without the necessity for login credentials. Such sites serve various purposes, including information dissemination, data collection, or provision of services to external stakeholders. These sites can either be hosted on a custom domain or reside as a subdomain under force.com.
Developing a Public Site in Salesforce Leveraging LWC Step 1: Crafting a Visualforce Page
A Visualforce (VF) page acts as a display for LWC components within a public site. To create one, navigate to Setup > Develop > Pages and select ‘New’. Name your VF page – for instance, ‘PublicLwcSite’ – and proceed. In the code workspace, input the following structure:
<apex:page standardStylesheets="true" sidebar="false" applyBodyTag="false"
showHeader="false">
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</header>
<!-- Incorporating the LWC component via Lightning Out -->
<apex:includeLightning />
<div id="lwcHost"></div>
<script>
// Initializing the component post Lightning runtime load
$Lightning.use("c:customLwcApp", function() {
$Lightning.createComponent("c:customLwcComponent", {},"lwcHost");
});
</script>
</apex:page> This snippet facilitates the loading of an LWC component through Lightning Out – a feature that allows LWC components to function outside of the Lightning Experience. The script initializes the Lightning runtime and subsequently renders the component within a div element identified by ‘lwcHost’. It’s crucial to specify your LWC component’s namespace and name, such as ‘c:customLwcComponent’.
Step 2: Assembling a Lightning Application A Lightning application serves as an encapsulation for your LWC component, delineating its dependencies and accessibility scope. To forge a Lightning application, head over to Setup > Develop > Lightning Components and hit ‘New’. Assign a name like ‘customLwcApp’ and confirm your choice. In the coding area, introduce the following syntax:
<aura:application extends="ltng:outApp" access="GLOBAL" implements="ltng:allowGuestAccess">
<!-- Stipulating your LWC component's dependencies -->
<c:customLwcComponent/>
</aura:application>This code generates a Lightning application based on ‘ltng:outApp’, which is foundational for employing Lightning Out. The ‘aura:dependency’ element specifies your LWC component’s requirements, such as ‘c:customLwcComponent’. The ‘access’ attribute must be set to ‘GLOBAL’, ensuring that any Visualforce page can access your Lightning application.
Step 3: Crafting Your Own LWC Component
Building Blocks of an LWC Component
An LWC component is essentially a custom element that you can create using HTML, CSS, and JavaScript.
Initiating an LWC Component
To begin, navigate to Setup > Develop > Lightning Components and select ‘New’. Name your component, for example, ‘myCustomLwc’, and confirm with ‘Submit’. In the code workspace, input the following structure:
<template>
<div class="content-center">
<template if:true={isMessageVisible}>
<p class="info-message">{messageContent}</p>
</template>
<lightning-button label="Click Here" onclick={onClickHandler} variant="brand" class="unique-button"></lightning-button>
</div>
</template>
import { LightningElement, track } from 'lwc';
import componentTemplate from './myCustomLwc.html';
import componentStyles from './myCustomLwc.css';
export default class MyCustomLwc extends LightningElement {
@track isMessageVisible = false;
@track messageContent = '';
// Connect the HTML template
static template = componentTemplate;
// Link the CSS styling
static styles = componentStyles;
// Event handler for button click
onClickHandler(event) {
this.isMessageVisible = true;
this.messageContent = 'Success! Your LWC is now live on the homepage.';
// Conceal the button post-click
const buttonRef = this.template.querySelector('.unique-button');
buttonRef.style.display = 'none';
}
}.content-center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.info-message {
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 20px;
}
.unique-button {
color: white !important;
font-size: 1rem !important;
padding: 1.5rem 1rem !important;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<description>My inaugural LWC component.</description>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>This setup results in an LWC component that utilizes standard HTML alongside specialized Lightning Web Components tags like lightning-button.
The JavaScript file houses a function that handles the click event of the button, revealing a congratulatory message. The template confirms steps one and two with a display message.
Step 4: Launching a Public Site on Salesforce
Public Site Fundamentals
A public site is essentially an open-access web platform that doesn’t require user authentication.
Creating Your Public Site
Head over to Setup > Develop > Sites and choose ‘New’. Provide your site with a name and label, such as ‘PublicLwcPlatform’, and save your changes. On the Site Details page, opt for ‘Edit’ in the Site Visualforce Pages section.
From the list of Available Visualforce Pages, pick out the VF page you established in Step one, like ‘PublicLwcPlatform’, and add it to your site. Remember to save your progress. To make your site operational, select ‘Activate’ on the Site Details page.
Step 5: Evaluating Your Public Site’s Performance
Testing Procedures To assess your public site, proceed to Setup > Develop > Sites and click on your site’s name, such as ‘PublicLwcPlatform’. On its details page, use ‘Preview As Admin’ to view your site in a new browser tab.
You should be able to see your LWC component in action on the public site. For external testing, copy the URL of your public site and enter it into a different browser or device to check its functionality without Salesforce credentials.
In Conclusion:
Expanding Reach with LWC on Public Sites And there we have it! By integrating an LWC into a Salesforce public site, you capitalize on LWC’s efficiency and power to create captivating web pages that are universally accessible.
