Sunday, November 6, 2016

Lightning component Create Record in custom object.

Step 1: Create custom object(Expnses__c) and associated fields.

Step 2: Create apex class as shown below(copy paste same code).

public class NewExpensesCreateRecord{

    @AuraEnabled// annotation indicates this method is enable for aura component(Lightning) 
    public static string createRecord1 (Expense__c newExpense){
        
        try{
            System.debug('CreateCandidateRecord::createRecord::candidate'+newExpense);
            
            if(newExpense!= null){
                insert newExpense;
            }
            
        } catch (Exception ex){
            
        }
        return newExpense.name;
    }  
}


Step 3: Create lightning component (expenses:component name)

<aura:component controller="NewExpensesCreateRecord" implements="force:appHostable,
flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"
access="global"> <!-- PAGE HEADER --> <div class="slds-page-header" role="banner"> <div class="slds-grid"> <div class="slds-col"> <p class="slds-text-heading--label">Expenses</p> <h1 class="slds-text-heading--medium">My Expenses</h1> </div> </div> </div> <!-- / PAGE HEADER --> <!-- NEW EXPENSE FORM --> <aura:attribute name="expenses" type="Expense__c" default="{ 'sobjectType': 'Expense__c', 'Name': '', 'Amount__c': 0, 'Client__c': '', 'Date__c': '', 'Reimbursed__c': false }" /> <ui:inputText aura:id="expname" label="Name" value="{!v.expenses.Name}" class="slds-input" labelClass="slds-form-element__label"/> <ui:inputNumber aura:id="ExpAmount" label="Amount" value="{!v.expenses.Amount__c}" class="slds-input" labelClass="slds-form-element__label"/> <ui:inputText aura:id="ExpClient" label="Client" value="{!v.expenses.Client__c}" class="slds-input" labelClass="slds-form-element__label"/> <ui:inputDate aura:id="ExpDate" label="Date" value="{!v.expenses.Date__c}" displayDatePicker="true" class="slds-input" labelClass="slds-form-element__label"/> <ui:inputCheckbox aura:id="Expbox" label="Reimbursed?" value="{!v.expenses.Reimbursed__c}" class="slds-input" labelClass="slds-form-element__label"/> <ui:button label="Create Expense" press="{!c.create}"/> </aura:component>


Step 4: click on controller on right side of component and copy paste below code.

({ create : function(component, event, helper) { var newExpense=component.get("v.expenses");// getting label of attribute expenses object //calling apex method var action=component.get("c.createRecord1"); action.setParams({ newExpense : newExpense });// passing patameters to methods.
action.setCallback(this,function(a){ //get the response state var state = a.getState(); if (state === "SUCCESS") { var newExpense = {'sobjectType': 'Expense__c', 'name': '', 'amount__c': '', 'client__c': '', 'Reimbursed__c': '', 'date__c': '' }; //resetting the Values in the form component.set("v.expenses",newExpense); alert('Record is Created Successfully'+a.getReturnValue()); } else if(state == "ERROR"){ alert('Error in calling server side action'); } }); //adds the server-side action to the queue $A.enqueueAction(action); } })


Step 5 :Create lighting application and copy paste below code.

<aura:application extends="force:slds"> <c:expenses /> </aura:application>


after done above steps click on Preview button on right side of application.

No comments:

Post a Comment