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

  • Did the below answer help you? please consider accepting the answer if this is the case. thanks! – glls Jul 2 '17 at 23:30
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?

  • 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. – Caspar Harmer Oct 4 '18 at 17:10
  • @CasparHarmer - no, I use it in other pages in my community, not in the password change page – Itai Shmida Oct 7 '18 at 6:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.