+ Start a Discussion
HNT_NeoHNT_Neo 

Lightning Event Handler for New Lead JavaScript

Hey all, 

Need your help and thank you in advance. 

Trying to create a lightning component that would invoke the New Lead Event action. For example from Lightning Experience in Winter 17, when you click the Lead tab, the +New Lead when pressed will call the New Lead popup window. 

I'm looking for the lightning component syntax that would call the Lead's event handler when the end user presses a button on a lightning component (CREATE).

I'm on a deadline to have 6 of these types created by tomorrow :( but if I can get an idea of what the aura component syntax would look like or the code that would fire this, I can create the rest of the buttons I need. 

I know I'm close of where the information I need may be at, but missing the component and client-side controller source. 

The Lightning Components Developer Guide (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component_example.htm ) has some syntax that I think is the one:
 
<!--c:ceNotifier-->
<aura:component>
    <aura:registerEvent name="cmpEvent" type="c:ceEvent"/>

    <h1>Simple Component Event Sample</h1>
    <p><ui:button
        label="Click here to fire a component event"
        press="{!c.fireComponentEvent}" />
    </p>
</aura:component>
OR 
<aura:component>
    <aura:attribute name="text" type="String" default="Just a string. Waiting for change."/>
    <input type="button" value="Flawed HTML Button"
        onclick="alert('this will not work')"/>
    <br/>
    <ui:button label="Framework Button" press="{!c.handleClick}"/>
    <br/>
    {!v.text}
</aura:component>

and would only need the correct name at .handleClick (i'm guessing, Lead in this case, I'll try after I post this if someone doesn't beat me to it). 

Thank you!

 
Best Answer chosen by HNT_Neo
Pankaj MehraPankaj Mehra
Hi Jh_Neo,

Do not put anything in helper class and your controller class will look like this :
 
({
	createRecord : function (component, event, helper) {
		var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
			"entityApiName": "Lead"
		});
		createRecordEvent.fire();
	}
})

 

All Answers

Pankaj MehraPankaj Mehra
Hi JH_Neo,

To call new Lead craete Popup from your lightning component simply create a button on the component
<ui:button label="Framework Button" press="{!c.createRecord}"/>

and in JS use following code:
 
createRecord : function (component, event, helper) {
    var createRecordEvent = $A.get("e.force:createRecord");
    createRecordEvent.setParams({
        "entityApiName": "Lead"
    });
    createRecordEvent.fire();
}

To edit a record in popup window use following syntax:
 
editRecord : function(component, event, helper) {
    var editRecordEvent = $A.get("e.force:editRecord");
    editRecordEvent.setParams({
         "recordId": component.get("v.contact.Id")
   });
    editRecordEvent.fire();
}


If you're satisfied with the answers provided, please don't forget to select a Best Answer.
Thanks!
 
HNT_NeoHNT_Neo

Does the JS go into the HELPER ?

Where the edit record popup syntax go?

Thanks!

Pankaj MehraPankaj Mehra
JS wil go in the controller and the popup will be displayed over the component you add this code. For example you have created a lighteing component Create_Lead then add button to this component and add the code in Create_LeadController.js

Add the component where ever you want , on detail page of record, on list view etc.
HNT_NeoHNT_Neo
I updated my component to this,
<aura:component >
    <div class="container">
        <aura:attribute name="lead" type="Lead" 
                        default="{ 'sobjectType': 'Lead'}"/>
        <ui:button label="Framework Button" onclick="{!c.createRecord}" />
    </div>
</aura:component>




but keep receiving an error (see attached)


User-added image
HNT_NeoHNT_Neo
This is my CONTROLLER syntax which is producing an error
 
createRecord : function (component, event, helper) {
    var createRecordEvent = $A.get("e.force:createRecord");
    createRecordEvent.setParams({
        "entityApiName": "Lead"
    });
    createRecordEvent.fire();
}

User-added image
HNT_NeoHNT_Neo
This is my HELPER syntax which is producing an error
 
createRecord : function (component, event, helper) {
    var createRecordEvent = $A.get("e.force:createRecord");
    createRecordEvent.setParams({
        "entityApiName": "Lead"
    });
    createRecordEvent.fire();
}

User-added image
Pankaj MehraPankaj Mehra
Hi Jh_Neo,

Do not put anything in helper class and your controller class will look like this :
 
({
	createRecord : function (component, event, helper) {
		var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
			"entityApiName": "Lead"
		});
		createRecordEvent.fire();
	}
})

 
This was selected as the best answer
Pankaj MehraPankaj Mehra
Hi JH_Neo,

Remove attribute from the Component and try saving:

<aura:component >
    <div class="container">
        <aura:attribute name="lead" type="Lead" 
                        default="{ 'sobjectType': 'Lead'}"/>

        <ui:button label="Framework Button" onclick="{!c.createRecord}" />
    </div>
</aura:component>

Thanks
HNT_NeoHNT_Neo
Unfortuantely get this error: 

User-added image
HNT_NeoHNT_Neo
I changed it to: 
 
press="{!c.createRecord}

and component saves.

I will test now and let you know. 
HNT_NeoHNT_Neo
I don't see the it listed under the custom component area in the lightning builder. Did i forget something? 
Pankaj MehraPankaj Mehra
Hi JH_Neo,

You need to make the compoent available in community builder and global , add this to component 
 
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">

 
HNT_NeoHNT_Neo
Hi Pankaj, 

Here's what i get: 

User-added image
Pankaj MehraPankaj Mehra
replace line 1 with 3, you cannot have 2 <aura:component> in a single file nested
HNT_NeoHNT_Neo
I was able to save the component but it still doesn't show up in the lightning builder. 


 
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <div class="container">
        <ui:button label="Framework Button" press="{!c.createRecord}" />
    </div>
</aura:component>

 
HNT_NeoHNT_Neo
Pankaj! Thank you! After fiddling around with it and applying your code, it worked!!

How do I get it to render the record types though? For example, I have 5 Lead Record Types and the button created only renders a new lead page. Thank you!
HNT_NeoHNT_Neo
Actually, I will post a new thread, since it will require more research. But thank you for this!