1

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? errors

1
  • Did the below answer help you? please consider accepting the answer if this is the case. thanks!
    – glls
    Jul 2, 2017 at 23:30

1 Answer 1

0

I use something like this in my community and it works well:

<apex:page showHeader="false" cache="true">

    <apex:includeLightning />

    <div id="test_id" />

    <script>
        $Lightning.use("c:B2B_Partners_Migration_APP", function() {
            $Lightning.createComponent(
                "c:B2B_Partners_Migration",
                {},
                "test_id",
                function(cmp) {
                    // do some stuff
                    console.log('component created');
                    console.log(cmp);
                });
        });
    </script>
</apex:page>

Maybe replacing <script src="/lightning/lightning.out.js"></script>

With this <apex:includeLightning /> should help?

2
  • I am facing the same issue that the asker faced... can you confirm that you use this code for the password change page? I ask this because this is a very unique page and the usual technique that you are describing does not work for me. Oct 4, 2018 at 17:10
  • @CasparHarmer - no, I use it in other pages in my community, not in the password change page Oct 7, 2018 at 6:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .