Hello Folks!!!

You may all be aware of this super feature called Lightning Out, using which you can literally show a Lightning Component anywhere.

So why not use it on public sites then. Let’s see how it works!!!

Before starting the exercise,  below are the prerequisites for you:

  1. You already know how to create Lightning components.
  2. You know how to create Visualforce pages.
  3. You know how to create force.com sites.

If not, please learn about them by clicking the links above.

Now let’s create a simple lightning component to display a list of contacts available in your org. Below given is the code for the same.

Apex Controller

public class ContactViewerController {
@AuraEnabled
public static List<Contact> getContacts() {
List<Contact> lstContact = [SELECT Id, Name, Phone, Email
FROM Contact];
return lstContact;
}
}

Lightning Component

Component

<aura:component controller="ContactViewerController">
<aura:attribute name="contacts" type="Object" />
<aura:attribute name="columns" type="List" />
<aura:handler name="init" value="{! this}" action="{! c.doInit}" />
<lightning:datatable data="{! v.contacts}"
columns="{! v.columns}"
keyField="Id"
hideCheckboxColumn="true"
resizeColumnDisabled="true"/>
</aura:component>

I have used lightning:datatable tag to display contacts here. To know more about this, check here.

Controller

({ doInit : function(component, event, helper) {
component.set('v.columns', [
{label : 'Contact Name', fieldName : 'Name', type : 'text'},
{label : 'Phone', fieldName : 'Phone', type : 'phone'},
{label : 'Email', fieldName : 'Email', type : 'email'}
]);
helper.getData(component);
}
})

Helper

({
getData : function(cmp) {
var action = cmp.get('c.getContacts');
action.setCallback(this, $A.getCallback(function(response) {
var state = response.getState();
if(state === "SUCCESS") {
cmp.set('v.contacts', response.getReturnValue());
} else if(state === "ERROR") {
var errors = response.getError();
console.log(errors);
} else {
console.log('UNKNOW ERROR');
}
}));
$A.enqueueAction(action);
}
})

Lightning Out Dependency App

Now that we have our lightning component ready, let’s create Lightning Out dependency app as shown below:

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

The lightning dependency app must:

  1. set access control to GLOBAL
  2. extend from ltng:outApp
  3. must list all components as a dependency.

By implementing ltng:allowGuestAccess, we are enabling the lightning app for public access through communities, public sites or any other sites outside Salesforce.

Now, let’s create a visualforce page to display the lightning component.

Visualforce Page

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.

<apex:page showHeader="false" standardStylesheets="false">
<apex:includeLightning />
<div id="dataTable" />
<script>
        $Lightning.use("c:ContactViewerApp",
            function(){
                $Lightning.createComponent(
                "c:ContactViewerCmp",
                    {},
                    "dataTable",
                    function(cmp){
                    console.log('done');
                    }
                );
            }
        );
    </script>
</apex:page>

That’s it. Now since we are ready with the Visualforce page, all you need to do is to create a public site and set this VF page as the main page for the site.

Try it out and let me know if you get stuck somewhere.

Adios!!!

Advertisements

8 thoughts on “Adding Lightning Components to Public Sites using Lightning Out!!!

  1. hi Thanks for the great Article, in my use case I need to pass some parameters in the Public site URL. How can I achive this, my url would be like :

    Like

  2. Hi, Thanks for this article. I’m doing basically the same thing, except instead of using a datatable, I’m using a recordEditForm. When I try to load it with a recordId, I get a big RED message: [object Object]. Do you have any ideas? I tried to put without sharing on my controller, I opened up all the fields on the public access settings, the form loads and creates new records when there is no record id.

    Like

      1. Thanks for having a look! The post doesn’t help me because the form does show up correctly with no recordId, it’s only once there’s a record that it runs into issues. Also, I’ve tried opening up org wide sharing on Account & Contact and that didn’t help.

        Like

      2. Component:

        Saved!

        App:

        VF Page:

        // Here ‘VfApp’ Is Lightning Application Name
        $Lightning.use(“c:doctorEditFormApp”, function() {
        /* ‘LcForVf’ is Lightning Component Name which we are Displaying In Vf Page
        * syntax for create lightning component dynamically :
        * $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
        $Lightning.createComponent(“c:doctorEditForm”,
        {recordId: ‘{!$CurrentPage.parameters.recId}’},
        “doctorEditFormDisplay”,
        function(component) {
        // create component Callback, Lightning Component has been Created,
        // Now you can set more lightning Component attributes here,
        // and do more cool stuff here
        console.log(‘the rec id: {!$CurrentPage.parameters.recId}’);
        //component.set(“v.recordId” , ‘{!$CurrentPage.parameters.recId}’);
        });
        });

        Apex Controller:

        public without sharing class doctorEditFormController {

        @AuraEnabled
        public static Contact validateId(String docId){
        try{
        System.debug(‘the doc id: ‘ + docId);
        Id theId = (Id)docId;
        System.debug(‘the doc id: ‘ + docId + ‘, and the Id: ‘ + theId);
        Contact doc = [SELECT Id, Email, Birthdate, Doctor_Id__c, npe01__PreferredPhone__c,
        npe01__Preferred_Email__c, HomePhone, npe01__HomeEmail__c, MobilePhone,
        npe01__AlternateEmail__c, OtherPhone, npe01__Primary_Address_Type__c,
        npe01__Secondary_Address_Type__c, FirstName, LastName FROM Contact WHERE Id = :theId AND
        RecordType.Name = ‘Clinician’];
        return doc;
        }
        catch(Exception e){
        System.debug(‘the error: ‘ + e.getMessage());
        //whatever is wrong – bad id, no id, no clinician with id, return null
        return null;
        }
        }
        }

        Like

Leave a Reply to Shyam Nair Cancel 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