Apex Code Development You need to sign in to do that
Don't have an account?
Include Lightning Component in Sites VisualForce Page
I've started dabling in Lightning Components and worked through a tutorial last year and have done one of the trailheads a few days. So I know how to code basic Lightning components and apps. And I see in the metadata that these become AuraDefinitionBundles. I also so an example of some code where a bit of JS is added to an empty VF page and that always a Lightning Component to be spun up inside a VF page.
What I want to do is take an exist VF page that is exposed to the internet as a SF "Sites" application and port it to Lightning. What I included in the prior paragaph leads me to believe the page is codable. Here's what I don't know. When a Sites application is configured, you have to tell it what it has access to-- VF pages, Apex controllers, objects and fields, etc. I don't know how you would give it access to the Aura bundle. (Unless it's totally implicit and you don't have to and it automatically gets acces.)
Can anyone address the question of how to configure and deploy Sites application that includes a VF page that spins up an Lightning Component?
What I want to do is take an exist VF page that is exposed to the internet as a SF "Sites" application and port it to Lightning. What I included in the prior paragaph leads me to believe the page is codable. Here's what I don't know. When a Sites application is configured, you have to tell it what it has access to-- VF pages, Apex controllers, objects and fields, etc. I don't know how you would give it access to the Aura bundle. (Unless it's totally implicit and you don't have to and it automatically gets acces.)
Can anyone address the question of how to configure and deploy Sites application that includes a VF page that spins up an Lightning Component?
To be more specific, when you create a Sites application, it gets a special Public profile. You can then edit that profile. The question would then be on that Public Access Settings profile, can you grant permissions to Lightning Apps and if so how?
To be more general, on any profile you can grant access to VF pages and Apex classes. Or you can come at it from the Page or Class definition in setup and use the Security feature to select which profiles have access. I don't see any Security feature on the Lightning components listed under Setup->Development. So how is security on Lighning components maintained?
Did you got any solution for this ? With Spring 16 release, there is Lightning Out coming. That may be used to resolve the issue.
However, want to know if you have any workaround before that ?
Thanks,
Dayanand
This is the documentation that I've been following:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm
Mike
+1
Currently, I cannot get lightning components to work with a publically exposed visualforce page aka site in our Sandbox Org. I get a 401 unauthorized error.
Testing the VF Page on its own (logged in as admin), shows that lightning out does request the App via a faulty url (visual.force.com instead of lightning.force.com)
These errors might not be related to each other or rather one might solve the other. Nonetheless, I would appreciate a clear statement on: What do I need to do to get lighting components on my public sites.
Cheers,
Sz
Sz, thanks for doing the experiment. I've had other pressing priorities and haven't been able to. What you experienced is what I was worried about. For Sites, you have explicitly grant access to VF pages and Apex Classes. But there's no place (yet) to explicitly grant access to Lightning Apps. So I don't know if it even has a chance of working at all. The only thing I could think of is if there's a hack to override that URL that you mentioned is bad.
I wish we could get SF to speak up on these issues.
Does anyone know if Summer '16 will allow Lightning pages in Sites?
From what I understand, LightingOut will let a Lightning App run anywhere, even when not served by SF. But there may still not be a way to get Sites to serve the Lighning buddle. Perhaps the workaround would be to declare that guess access is allowed and then just server the bundle from an external web server.
I wonder if this would work--
I managed to embed a small lightning component inside a visual force page and displayed it on my sample force.com site, but it still needs authentication, I didn't manage to implement "ltng:allowGuestAccess"(any input is highly appreciated here).
I used Lightning Out( "ltng:outApp") below to embed my lightning component to my VF page and then used site login to navigate to my visualforce page.
<!----------------Lightning app which includes a lightning component---------> <aura:application extends="ltng:outApp"> <aura:dependency resource="c:YourComponent" type="COMPONENT"/> </aura:application> <!--------------VF page with above Lightning app---------> <apex:page showHeader="false" sidebar="false"> <apex:outputLink value="{!$Site.Prefix}/secur/logout.jsp" rendered=" {!NOT(ISPICKVAL($User.UserType,'Guest'))}">{!$Label.site.logout}</apex:outputLink> <!-- This loads the JavaScript file needed to use Lightning Components for Visualforce--> <apex:includeLightning /> <!-- div tag act as locator while calling Lightning.createComponent --> <div id="lightning" /> <script> $Lightning.use("c:YouAppName", function() { $Lightning.createComponent("c:YourComponentName", "", "lightning", function(cmp) { // do some stuff }); }); </script> </apex:page><!----- Lightning Out App -----> <aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess"> <aura:dependency resource="c:YourComponent"/> </aura:application> <!----- VF Page exposed in Sites -----> <apex:page showHeader="false" sidebar="false"> <apex:includeLightning /> <div id="lightning" /> <script> $Lightning.use("c:YourAppName", function(){ $Lightning.createComponent("c:YourComponent", "", "lightning", function(cmp){} ); }); </script> </apex:page>Application: myApplication <aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess"> <aura:attribute name="recordId" type="String" /> <aura:dependency resource="c:myComponent"/> </aura:application> Component: myComponent <aura:component > <aura:attribute name="record" type="Object"/> <aura:attribute name="simpleRecord" type="Object"/> <aura:attribute name="recordError" type="String"/> <aura:attribute name="recordId" type="String"/> <aura:handler name="accountChange" event="c:evtAccountChange" action="{!c.handleAccountChange}" /> {!v.recordId} <force:recordData aura:id="accoutRecord" recordId="{!v.recordId}" layoutType="FULL" targetRecord="{!v.record}" targetFields="{!v.simpleRecord}" targetError="{!v.recordError}" mode="VIEW" recordUpdated="{!c.recordUpdate}" /> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-opportunity" title=""> <lightning:icon iconName="standard:contact" size="small" alternativeText="Name"/> </span> </div> <div class="slds-media__body"> <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Header"> {!v.simpleRecord.FirstName} {!v.simpleRecord.LastName}</h1> Controller: recordUpdate : function(cmp, event, helper) { console.log('recordUpdate:'+cmp.get("v.recordId")); },public class cAuraCrewMember { @AuraEnabled public static Account getAccount(String aId) { system.debug('\n\n@@@ getAccount: aid='+ aId); // system.debug('\n\n@@@Accounts='+[Select Name FROM Account limit 10]+'\n\n'); Account a = new Account(); for (Account acc : [SELECT Name, LastName, Id, FirstName FROM Account WHERE id = :aID LIMIT 1]) { a = acc; } return a; } DEBUG LOG: @@@ getAccount: aid=001m000000bTHDH 04:26:40.0 (2239074)|SOQL_EXECUTE_BEGIN|[19]|Aggregations:0|SELECT Name FROM Account LIMIT 10 04:26:40.0 (6505053)|SOQL_EXECUTE_END|[19]|Rows:0 04:26:40.0 (6650510)|USER_DEBUG|[19]|DEBUG| @@@Accounts=() 04:26:40.0 (7710751)|SOQL_EXECUTE_BEGIN|[23]|Aggregations:0|SELECT Name, Id .... FROM Account 04:26:40.0 (22043357)|SOQL_EXECUTE_END|[23]|Rows:0<!-- Lightning Out App --> <aura:application extends="ltng:outApp" access="GLOBAL" implements="ltng:allowGuestAccess"> <aura:dependency resource="c:ProjectDetail"/> </aura:application> <!-- VF Page --> <apex:page standardController="Exhibition__c" standardStylesheets="false" applyBodyTag="false"> <apex:includeLightning /> <style> html, body { margin: 0; padding: 0; } #lightningComponent {width: 100%;} </style> <script> $Lightning.use("c:SiteProjectDetailApp",function(){ $Lightning.createComponent("c:ProjectDetail", {}, "lightningComponent", function(cmp){ } ); }); </script> <div id="content"> <div id="lightningComponent" /> </div> </apex:page>VF page
<apex:page showHeader="false" standardStylesheets="false">
<apex:includeLightning />
<div style="width:100%;height:100px;" id="lexContainer">
<div style="height:6rem;" id="sliderDemo">
<div role="status" class="slds-spinner slds-spinner_medium" >
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</div>
<script>
$Lightning.use("c:testaura", function() {
$Lightning.createComponent("c:smuzi",
{},
"lexContainer",
function(cmp) {
document.getElementById("sliderDemo").style.display = 'none';
});
});
</script>
</apex:page>
<aura:application access="Global" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:smuzi" />
</aura:application>
AND MAIN))) APEX
public without sharing class FetchOpportunitiesTabController {
@auraEnabled
public static List<Opportunity> fetchOpportunities(id account_id) {
List<Opportunity> Opportunities = [SELECT Name, Amount, CloseDate, Probability, StageName, ExpectedRevenue FROM Opportunity WHERE AccountId = : account_id ];
return Opportunities;
}
}