+ Start a Discussion
1542VeMan1542VeMan 

Newbie Problem deploying a Lightning Component

I am basically diving into Lightning Component Development as I generally learn faster applying examples to real-world problems. In this case, I am trying to replace a javascript button that launched a window with a Visualforce page that has its own styling, Unfortunately adding the launch as a quickAction will open the window, but I can't get the size to match the content, making it largely unusable, even with scroll bars. 

Instead, I figure since Lightning Components are so Javascript heavy anyway, why can't I just build a Lightning Component featuring a UI button, an APEX controller providing a method to return the record ID, and a js controller with a doInit()function that queries the record data, while the button click launches the newInterview() method which contains the original Javascript that opens the Visualforce page using the parameters from the current record. That's the idea anyway...

Here is how I tried to build it:

COMPONENT
<aura:component controller="AuraMethods" implements="flexipage:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId" access="global" >
	<aura:attribute name="opp" type="Opportunity"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ui:button label="New Interview" press="{!c.newInterview}"/>
</aura:component>

JS CONTROLLER
({
	doInit : function(component, event) {
		var action = component.get(c.findOppById("v.recordId"));
        action.setCallback(this, function(a) {
            component.set("v.opp", a.getReturnValue());
        });
        $A.enqueueAction(action);
	}
})

({
    newInterview : function(component, event){
        if(component.get("v.opp.School_Interview_Type__c")== '3W' || component.get("v.opp.School_Interview_Type__c") == '3W+School'){ 
        	window.location.href = "/apex/AM_Time_Slots2?id="+component.get("v.opp.Id")+"&Name="+component.get("v.opp.Name"); 
        } 
        else{ 
        	alert('please do not make an appointment AM time when the School Interview Type not equals 3W,only need to confirm the following AM given in the school time.'); 
        }
    }  
})

APEX CONTROLLER
public with sharing class AuraMethods {
    @AuraEnabled
    public static Opportunity findOppByID(String OppId){
        return [Select id, Name, School_Interview_Type__c from Opportunity where Id = :OppId];
    }
}


That's pretty much it. The Component appears in the Custom Components section of my Lightning Page Layout for the Opportunity in the App Builder, but when I try to place it I get the following error:

'Action failed: c:InterviewScheduling$controller$doInit [c is not defined] doInit()@components/c/InterviewScheduling.js:10:30'

I know I'm still a bit green to JS, as well so I may have missed something. More important, I've seen several posts about the difficulty of getting a javascript button's functionality to work in Lightning. I really just want to be able to launch this Visualforce page from within the Opportunity and have it appear in all its glory rather than in some dinky popup window where I can't adjust the width in the settings. 

I appreciate all responses. Kindness and patience is appreciated. I will learn this. 

Thanks!

V

Abhishek Sagar 1Abhishek Sagar 1
Instead of calling apex controller methods like:

var action = component.get(c.findOppById("v.recordId"));

call in following way:
 
var action = component.get("c.findOppById"); 
action.setParams({ 
        'OppId' : component.get('v.recordId');
});

Also inside your JS controller seaprate methods by comma ","

Unfortunately Ligtning errors are still NOT developer friendly
 
1542VeMan1542VeMan

Thanks for the response!! Definitely seems to have moved it forward. The previous errors are gone, however now I get this rather odd message:

'Cannot read property 'apply' of undefined'.

I'm finding this error is occurring for a lot of people for any number of reasons. If I comment out the entire doInit method, the button places on the page.
If I comment out the setcallback method only, I get this error. So the problem I'm guessing is happening somewhere in these lines:

 

var action = component.get("c.findOppById");
action.setParams({
    'OppId' : component.get("v.recordId");
})
As I mentioned, commenting out any other lines than these gives me the 'undefined' error above. 
Commenting out any of these lines yields a similar error to what I was getting previously. So, I have to think that the error is in here somewhere.

I've made the following fixes as well:
- Fixed the AuraMethods class name - 'findOppByID' to 'findOppById' - to match the JSController reference
- Checked all other upper and lower case on var and method references.
- added double quotes to the "v.recordId" reference, as shows above. 
- from another google search on this topic, I also provided a var for the returned Opportunity in the Callback method to check that something was actually returned.
Otherwise I've tried removing the single quotes around 'OppId' (which I saw someone do in a similar situation) with no luck. I also tried adding double quotes around the same value. Same error. 

I don't know where else to look. Any ideas?? Here is the current state of the code:
 
COMPONENT
<aura:component controller="AuraMethods" implements="flexipage:availableForAllPageTypes,
                      force:hasRecordId,
                      force:lightningQuickAction" access="global" >
    <aura:attribute name="opp" type="Opportunity"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ui:button label="New 3W Interview Schedule" press="{!c.newInterview}"/>
</aura:component>

JSCONTROLLER
({
	doInit : function(component, event) {
		var action = component.get("c.findOppById");
		action.setParams({
            'oppId' : component.get("v.recordId");
		})
        action.setCallback(this, function(a) {
            var foundOpp = a.getReturnValue();
            if(foundOpp){
                component.set("v.opp", a.getReturnValue());
            }
        });
        $A.enqueueAction(action);
	}
}),

({
        newInterview : function(component, event){
        if(component.get("v.opp.School_Interview_Type__c")== '3W' ||      component.get("v.opp.School_Interview_Type__c") == '3W+School'){ 
        	window.location.href = "/apex/AM_Time_Slots2?id="+component.get("v.opp.Id")+"&Name="+component.get("v.opp.Name"); 
        } 
        else{ 
        	alert('error message'); 
        }
    }  
})

APEX CONTROLLER
public with sharing class AuraMethods {
    @AuraEnabled
    public static Opportunity findOppById(String oppId){
        return [Select id, Name, School_Interview_Type__c from Opportunity where Id = :oppId];
    }
}

Again, I really appreciate any help. 

V
 
Abhishek Sagar 1Abhishek Sagar 1
Sorry for replying late. Its my mistake. Anyways you caught it right. This is the correct syntax
action.setParams({
            'oppId' : component.get("v.recordId")
      });
As said earlier, lightning error are sometimes very strange. If code above doesnt solve your issues, I am ok to go to your dev org and make changes myself.
1542VeMan1542VeMan
I appreciate the offer but unless you are a Salesforce Support person I can't let a non-employee log into a sandbox. The updated code reflects what I have written at this point. Even with the double quote fix I'm still getting the same error:
''Cannot read property 'apply' of undefined."

Its meant to be a button that sits on a detail page in Lightning. The button is designed to call a VF page that has its own styling built in as far as page size, etc... This is because using the standard Quick Action process, I can't define the size of the window that pops up to display the page, which is considerably smaller than required (strangely, there's no 'width' setting). 

if I remove the doInit method, the button places on the page. So, I'm thinking maybe get rid of the doInit method and handler altogether. It was only calling a query on the recordId to get some field values to determine if the page should open wihen the button is clicked anyway. So, I think I will try removing the doInit method altogether and run whatever code it launched in the button's press method. 

Again, feedback as to why I'm on the wrong track, or don't understand some fundamental concept is appreciated.