Develop Lightning App and Lead Form step by step

Step 1: Enable namespace in your Developer Org.

• goto Setup->Build->Create->Packages
• Click on Packages link
• Provide Namespace prefix. see below.

Step 2: Install Lightning Design System framework in your Org. click on this link https://login.salesforce.com/packaging/installPackage.apexp?p0=04t61000000kZwH

above link will install one static Resource in your org. This framework consist of images, icons and css for lightning page design.

Note:Please read more about this framework here https://www.lightningdesignsystem.com/

after installation is done you can see the static resource will be available in your Org. goto Setup->Develop->Static Resources here you will see file name "SLDS100".

Step 3: Now Open Developer Console to create Lightning App and Lightning Component

• Create one Apex class File->New->Apex Class name called "Leadcontroller"

public class LeadController {
   
     @AuraEnabled
    public static Id createLead(Lead newLead) {
        insert newLead;
        return newLead.Id;
    }
   
    @AuraEnabled
    public static Id createLeadRec(Lead newLead) {
        lead led=new Lead();
        led.FirstName='Kushal';
        led.LastName='Mishra';
        led.Company='KMISHRA';
        led.Email='kmishra@kloudrac.com';
        led.Status='Open';
        insert led;
       
        return led.id;
    }
   
   
    @AuraEnabled
    public static List<Id> createLeads(String newLeads) {
        List<SObject> newSObjectsList = convertJSONToListOfSObject(newLeads);
        insert newSObjectsList;
        List<Id> newIds = new List<Id>();
        for (SObject o : newSObjectsList) {
            newIds.add(o.Id);
        }
        return newIds;
    }
   
   
    private static List<SObject> convertJSONToListOfSObject(String json) {
        Object[] values = (Object[])System.JSON.deserializeUntyped(json);
        List<SObject> newSObjectsList = new List<SObject>();
        for (Object v : values) {
            Map<String, Object> m = (Map<String, Object>)v;
            Schema.SObjectType targetType = Schema.getGlobalDescribe().get((String)m.get('sobjectType'));
            SObject o = targetType.newSObject();
            Map<String, Schema.SObjectField> fields = targetType.getDescribe().fields.getMap();
            for (String fieldName : m.keySet()) {
                // Filter out any psuedo fields such as LastNameLocal
                Schema.SObjectField fi = fields.get(fieldName);
                if (fi != null) {
                    if (fi.getDescribe().isCreateable() && fi.getDescribe().isUpdateable()) {
                        o.put(fieldName, m.get(fieldName));
                    }
                }
            }
            newSObjectsList.add(o);
        }
        return newSObjectsList;
    }
   
    @AuraEnabled
    public static Lead newLead() {
        return (Lead)Lead.sObjectType.newSObject(null, true);
    }
}

• Build one component name called "inputLeadList" After opening Developer console goto File->New->Lightning Component name "inputLeadList".
• Copy and Paste following Code

<aura:component controller="LeadController">

      

    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system.min.css"/>

    <aura:attribute name="items" type="Lead[]"/>

    <aura:attribute name="newLead" type="Lead"

                    default="{ 'sobjectType': 'Lead' }"/>

    

    

         

    

    <!-- Event handlers -->

    <aura:handler name="init" value="{!this}" action="{!c.handleInit}"/>

  

    <div class="slds-form-element">

    <ui:inputText aura:id="firstName"

                  label="First Name" value="{!v.newLead.FirstName}"

                  required="false"  class="slds-input" />

    <ui:inputText aura:id="lastName"

                  label="Last Name" value="{!v.newLead.LastName}"

                  required="true"  class="slds-input" />

    <ui:inputText aura:id="company"

                  label="Company Name" value="{!v.newLead.Company}"

                  required="true" class="slds-input"/>

    <ui:inputEmail aura:id="email"

                   label="Work Email" value="{!v.newLead.Email}"

                   required="true" class="slds-input"/>

    <ui:inputText aura:id="Status"

                  label="Status" value="{!v.newLead.Status}"

                  required="true" class="slds-input"/>

</div>

 

    <ui:button label="Add Lead" press="{!c.addLead}" class="slds-button--neutral"/>

    <ui:button label="Submit Lead" press="{!c.save}" class="slds-button slds-button--brand"/>

  

</aura:component>

• Now from inputLeadList component click on Controller and helper button and copy paste following "inputLeadListContrsoller.js" and "inputLeadListHelper.js"
• inputLeadListContrsoller.js

({

    addLead : function(component, event, helper) {

        var leads = component.get("v.items");

        leads.push(component.get("v.newLead"));

        component.set("v.items", leads);

        

        helper.initNewLead(component);

    },

    handleInit : function(component, event, helper) {

        helper.initNewLead(component);

    },

    save : function(component, event, helper) {

         var self = this;

         var led=component.get("v.newLead");

         led.sobjectType='Lead';

        

        var createLead = component.get("c.createLead");

        createLead.setParams({"newLead": led});

        createLead.setCallback(self, function(a) {

            console.log("returned: %o", a.getReturnValue());

        });

        

        $A.enqueueAction(createLead);

    }

})

• inputLeadListHelper.js

({
    initNewLead : function(component) {
        var self = this;  // safe reference
        alert('initNewLead');
        var getNewLead = component.get("c.newLead");
        getNewLead.setCallback(self, function(a) {
            console.log("returned: %o", a.getReturnValue());
            component.set("v.newLead", a.getReturnValue());
        });
       
        $A.enqueueAction(getNewLead);
    }
})

• Create one Lightning App called "oneLead.app" goto File->New->Lightning Application
• name called "oneLead"
• copy and paste following code

<aura:application controller="LeadController">

    <aura:attribute name="leads" type="Lead[]"/>

    

<div class="slds-page-header">

          <div class="slds-grid">

            <div class="slds-col slds-has-flexi-truncate">

              <p class="slds-text-heading--label">Lightning to Lead</p>

              <div class="slds-grid">

                <div class="slds-grid slds-type-focus slds-no-space">

                  <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">New Lead</h1>

                </div>

              </div>

            </div>

          </div>

        </div>

    

    <c:inputLeadList items="{!v.leads}"/>

    

    <table>

        <thead>

            <tr>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Company</th>

                <th>Email</th>

            </tr>

        </thead>

        <tbody>

            <aura:iteration items="{!v.leads}" var="lead">

                <tr>

                    <td>{!lead.FirstName}</td>

                    <td>{!lead.LastName}</td>

                    <td>{!lead.Company}</td>

                    <td>{!lead.Email}</td>

                </tr>

            </aura:iteration>

        </tbody>

    </table>

    

    <ui:button label="Submit Leads" press="{!c.save}"/>

</aura:application>

• Now Click on Controller button for oneLeadApp and you have to create this "oneLeadController.js"
• Copy and paste following code and save it 

({
    save : function(component, event, helper) {
        var self = this;
        var createLeads = component.get("c.createLeads");
        createLeads.setParams({
            "newLeads": $A.util.json.encode(component.get("v.leads"))
        });
        createLeads.setCallback(self, function(a) {
            if (a.getState() === "SUCCESS") {
                console.log("returned: %o", a.getReturnValue());
            } else {
                alert($A.util.json.encode(a.getError()));
            }
        })
        $A.enqueueAction(createLeads);
    }
})

• Now from oneLead.app click on Preview button you will see one lightning form like this

• Wish you all the Best. For further help please contact me at amulhai@gmail.com/+91-95823-88885.