Hello Ohana!!

Hope you all are doing well.

I started blogging so that I can share my experiences and tech tips with others who need help with your projects. And I always like to go back and check statistics to see how am I faring in this.

So I found that my blog Adding Lightning Components to Public Sites using Lightning Out!!! had the maximum number of views, thanks you to all. So may be I thoughts it’s time to upgate it and teach you all how to add LWC components to public sites.

So I am taking the same example here as in my old blog, which means I am considering that you already knew:

  1. how to create Lightning Web Components,
  2. how to create Visualforce pages,
  3. and how to create Force.com sites.

At first, let’s create a simple apex controller to get Accounts from your org.

AccountViewController.cls

public class AccountViewController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id,Name,Phone FROM Account];
    }
}

Now, create a Lightning Web Component to display list of contacts. I have named my bundle accountView.

AccountView.html

<template>
    <div style="height: 300px;">
        <lightning-datatable 
            key-field="id" 
            data={accounts} 
            columns={columns}>
        </lightning-datatable>
    </div>
</template>

AccountView.js

import { LightningElement, wire, track} from 'lwc';
import getAccounts from '@salesforce/apex/AccountViewController.getAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AccountView extends LightningElement {
    @track accounts;
    @track columns = [
        {
            label: 'Account Name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Phone',
            fieldName: 'Phone',
            type: 'text',
            sortable: true
        }
    ];

    @wire(getAccounts)
    wiredAccounts({data, error}) {
        if(data) {
            this.accounts = data;
        }
        else if(error) {
            const errEvent = new ShowToastEvent({
                title: 'Accounts Not Found.',
                message: error.body.message,
                variant: 'error',
            });
            this.dispatchEvent(errEvent);
        }
    }
}

As our Lightning Web Component is ready, let’s create a Lightning Out dependency app (named AccountViewApp) as shown below:

AccountViewApp.app

<aura:application extends="ltng:outApp" access="GLOBAL" implements="ltng:allowGuestAccess">
    <aura:dependency resource="c:accountView" />
</aura:application>

Once done, let’s create a Visualforce page to show the Aura App.

In your page, at first add the <apex:includeLightning /> tag.

Next, add a Javascript code to load and activate your lightning app. Here, we are using two main markup functions, $Lightning.use() and $Lightning.createComponent(). To know more about them, check here.

AccountViewPage.page

<apex:page showHeader="false" standardStylesheets="false">
    <apex:includeLightning />
    <div id="dataTable" />
    <script>
        $Lightning.use("c:AccountViewApp", function() {
            $Lightning.createComponent(
                "c:accountView",
                {msg: "Account View LWC."},
                "dataTable",
                function(cmp) {
                    console.log('LWC Component Created.');
                }
            );
        });
    </script>
</apex:page>

That’s it. We are ready with our Visualforce page. All you need to do now is to create a public site, give access to Account object, the visualforce page and the apex class.

For your reference, check my Git Repo.

Happy Coding Folks!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s