5

Scenerio:

Create a custom button on order layout. On clicking of this button it will display order information in lightning.

To achieve this:

  1. Create a custom button
  2. Created a apex controller to get the order details
  3. Created a lightning component to display order details
  4. Created a VF Page and put that component in that page
  5. put that page in the button

Problem:

I do not why doInit method is being called twice, where first time it gets the id as null and in second time it gets the id perfectly. I checked it using Console.log.

<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForRecordHome" controller="OrderController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="ord" type="order"/>
<div >
    Order No:- {!v.ord.OrderNumber}<br/>
    Account No:- {!v.ord.Account.Name}       
</div>
</aura:component>

VF Page:

<apex:page standardStylesheets="false" sidebar="false"     showHeader="false" standardController="Order">

 <apex:includeLightning />
<div id="lightning" /> 
<script>
    $Lightning.use("c:OrdersMainApp", function() {
    $Lightning.createComponent("orderComponent",
                               { recordId:'{!Order.Id}'
                                 },
                               "lightning",
                               function(cmp) {

                               });
                               });


</script>
</apex:page>

Client Side Controller:

 ({
doInit : function(component, event, helper) {
    var recordId = component.get("v.recordId"); 
    console.log('test##'+recordId); **// prints 2 times. First time value is null and second time proper order id** 
    var action = component.get("c.getOrderDetails");
    action.setParams({
            "OrdId": recordId
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var ord = response.getReturnValue();
         //   component.set("v.orType", ord.Type);
            component.set("v.ord", ord);
        }
    });

    $A.enqueueAction(action);

}
})

Apex Controller:

public with sharing class OrderController {

@AuraEnabled
public static Order getOrderDetails(Id OrdId) { // In debug console I can see this method gets executed two times 
    System.debug('####'+OrdId); **//  First time it gives null which causes list has no rows error** 
    Order orders =  
            [SELECT Id, AccountId, Account.BillingStreet, Account.BillingCity, Account.BillingState, Account.BillingPostalCode,
             Account.BillingCountry,Account.Name,Status, ContractId,Account.Phone, OrderNumber, Contract.ContractNumber,TotalAmount,Name, EndDate FROM Order Where Id= :ordId limit 1 ];
    return orders;
    }
}

Application:

<aura:application access="GLOBAL" extends="ltng:outApp" >
  <c:orderComponent /> 
</aura:application>
5

Because you have the component in your app as an actual component and not just a dependency. Thus it runs when the app is loaded and when the VFP create it and injects it into the page

Change it to this:

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

You only need to define the dependency in the App if you are using it in the Lightning out VFP.

2
  • Thanks a lot Eric !!! It worked. You are the Savior. Cheers !!! – Arpit Sethi Mar 24 '17 at 6:18
  • @ArpitSethi glad I could help – Eric Mar 24 '17 at 6:18

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.