I am trying to set a visualforce page with lightning components in it as the default change password page. But I am not succeeding. Here is the code:
This is the component:
<aura:component implements="forceCommunity:availableForAllPageTypes" controller="B2B_Partners_Form_Controller">
<!-- <ltng:require styles="{!$Resource.slds + '/assets/styles/salesforce-lightning-design-system.css'}"/> -->
<aura:attribute name="stepnumber" access="public" type="integer" description="number of step" default="2"/>
<aura:attribute name="highestNumber" access="public" type="integer" default="1" description="highestNumber of steps reached"/>
<aura:attribute name="identityRequest" type="Identity_Request__c" access="public"/>
<aura:attribute name="message" type="String" access="public" />
<aura:attribute name="isManditory" type="boolean" access="public" default="true" />
<aura:attribute name="header" access="public" type="integer" description="header yes or no 0=no 1=yes" default="0"/>
<aura:attribute name="fieldLabels" type="Object" access="public" description="test" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="jobRoles" type="boolean" access="public" />
<c:DBO_SObjectLabels sObjectName="Identity_Request__c" fieldLabels="{!v.fieldLabels}" />
<!-- Include the header -->
<c:Partners_Header stepnumber="{!v.stepnumber}" header="{!v.header}" identityRequest="{!v.identityRequest}"/>
<body class="slds-grid_frame">
<div class=" backgroundWhite">
<div class=" slds-container--center slds-container--large">
<!-- Include Progressbar -->
<div class="slds-col slds-m-top--large slds-p-top--medium">
<aura:if isTrue="{!v.stepnumber!=6}">
<c:B2B_Partner_Progress_Bar_Migration identityRequest="{!v.identityRequest}" stepnumber="{!v.stepnumber}" isManditory="{!v.isManditory}" highestNumber="{!v.highestNumber}"/>
</aura:if>
</div>
<!-- <div>{!v.message} {!v.identityRequest.Language__c} {!v.identityRequest.Terms_And_Conditions__c}</div>-->
<div>
</div>
<aura:if isTrue="{!v.stepnumber==1}">
<c:B2B_Partners_SetupPassword identityRequest="{!v.identityRequest}" labels="{!v.fieldLabels}" highestNumber="{!v.highestNumber}" stepnumber="{!v.stepnumber}" isManditory="{!v.isManditory}"/>
</aura:if>
<aura:if isTrue="{!v.stepnumber==2}">
<c:B2B_Partners_PersonalDetailsForm identityRequest="{!v.identityRequest}" isManditory="{!v.isManditory}" labels="{!v.fieldLabels}" highestNumber="{!v.highestNumber}" jobRoles="{!v.jobRoles}"/>
</aura:if>
<aura:if isTrue="{!v.stepnumber==3}">
<c:B2B_Partners_CompanyDetails_Migration identityRequest="{!v.identityRequest}" isManditory="{!v.isManditory}" labels="{!v.fieldLabels}" highestNumber="{!v.highestNumber}"/>
</aura:if>
<aura:if isTrue="{!v.stepnumber==4}">
<c:B2B_Partners_Overview identityRequest="{!v.identityRequest}" isManditory="{!v.isManditory}" labels="{!v.fieldLabels}" stepnumber="{!v.stepnumber}" highestNumber="{!v.highestNumber}"/>
</aura:if>
<aura:if isTrue="{!v.stepnumber==6}">
<c:B2B_Partners_VerificationSent labels="{!v.fieldLabels}" />
</aura:if>
<!-- Button to go to previous/next step + Explanation * -->
<aura:if isTrue="{!v.stepnumber!=6}">
<div class="slds-grid ">
<div class="bookFont">
<aura:if isTrue="{!v.stepnumber==2}">
<div class="slds-col">
<p class="slds-text-align--left slds-p-left--large slds-p-top--x-large slds-m-top--xx-large slds-m-bottom--xx-large"> {!$Label.c.B2B_Partners_Asterix}</p>
</div>
</aura:if>
<aura:if isTrue="{!v.stepnumber==1}">
<div class="slds-col">
<p class="slds-text-align--left slds-p-left--large slds-m-top--xx-large slds-m-bottom--xx-large bookFont"> {!$Label.c.B2B_Partners_Asterix}</p>
</div>
</aura:if>
</div>
<aura:if isTrue="{!v.stepnumber!=1}">
<div class="slds-col slds-grid_vertical-align-center">
<div class=" slds-m-right--xx-large">
<div class=" slds-m-top--large slds-m-top--xx-large slds-p-top--large slds-text-align--right slds-p-bottom--medium slds-m-bottom--xx-large">
<!-- go back button -->
<lightning:button label="{!$Label.c.B2B_Partners_Previous}" variant="bare" onclick="{!c.onClickSubtract}" disabled="{!'false' + (v.stepnumber==1?'true':'')}" iconName="{!$Resource.B2B_Partners_goBack}" class="slds-m-horizontal--small buttonSize boldFontBlue">
<div class="slds-grid">
<div class="slds-col">
<img class="goBack slds-m-right--x-small" src="{!$Resource.B2B_Partners_goBack}"/>
</div>
<div class="slds-col slds-m-right--medium previousColor">
<p>previous</p>
</div>
</div>
</lightning:button>
<!-- go to next button -->
<aura:if isTrue="{!v.stepnumber==2}">
<lightning:button label="{!$Label.c.B2B_Partners_NextStep}" variant="brand" disabled="{!v.isManditory}" onclick="{!c.onClickAdd}" class="sfdc_button slds-p-left--large slds-p-right--large borderButton boldFontWhite"/>
</aura:if>
<aura:if isTrue="{!v.stepnumber==3}">
<lightning:button label="{!$Label.c.B2B_Partners_NextStep}" variant="brand" disabled="{!v.isManditory}" onclick="{!c.onClickAdd}" class="sfdc_button slds-p-left--large slds-p-right--large borderButton boldFontWhite"/>
</aura:if>
<!-- submit button -->
<aura:if isTrue="{!v.stepnumber==4}">
<lightning:button label="{!$Label.c.B2B_Partners_Submit}" variant="brand" disabled="{!v.isManditory}" onclick="{!c.onClickAdd}" class="sfdc_button slds-p-left--large slds-p-right--large borderButton boldFontWhite"/>
</aura:if>
</div>
</div>
</div>
</aura:if>
</div>
</aura:if>
<!-- End Buttons + explanation -->
</div>
</div>
<!-- Include footer -->
<div class="slds-col">
<c.Partners_Footer/>
</div>
</body>
</aura:component>
This is the lightning app:
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:B2B_Partners_Migration"/>
</aura:application>
This is the Visualforce page:
<apex:page showHeader="false" sidebar="false" >
VFPTEST
<script src="/lightning/lightning.out.js"></script>
<div id="test">ja</div>
<script>
$Lightning.use("c:B2B_Partners_Migration_APP", function() {
$Lightning.createComponent(
"c:B2B_Partners_Migration",
{},
"test",
function(cmp) {
console.log("Component created!");
});
});
</script>
</apex:page>
When I test my VFP outside of the community(Aloha template) the lightning component is being rendered. But when I place the visualforce page inside of the community by replacing it the default page the lightning component disappears. I only see 'VFPTEST'(my check to see if it loads the vfp page). These are the errors my console gives. How do I solve this?
