Tuesday 18 December 2018

Lightning components

Lightning is different from apex, for apex developers it's very tough to get into it.
But salesforce coding is all about reading values from front end to back end and vice versa...

Task 1: Set default value dynamically in Lightning components

Component:
---------
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:attribute name="FirstName" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
    <ui:inputText class="slds-lookup__search-input slds-input leftPaddingClass" value="{!v.FirstName}" placeholder="search.."/>
    <p>{!'Name of Salesforce CEO is ' + v.FirstName}</p>
</aura:component>

JavaScript controller:
---------------------
({
    doInit: function(component,event,helper){
        component.set("v.FirstName", "Mark benioff");
    }
})

Task 2: Develop custom opportunity page using Lightning components, You can replace this component with standard New button.

Apex Class:
----------
public class CreateoppRecord {
    @AuraEnabled
    public static Opportunity createRecord(Opportunity oppobj){
        try{
            if(oppobj != null){
                insert oppobj;
            }
        }catch (Exception ex){
            System.debug('Exception -->'+ex);
        }
        return oppobj;
    } 
}

Component:
---------
<aura:component implements="lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="CreateoppRecord">
    <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css"
                  scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
    <aura:attribute name="oppobj" type="Opportunity" default="{'sobjectType': 'opportunity',
                                                              'Name': '',
                                                              'Amount': '',
                                                              'StageName': 'Prospecting',
                                                              'CloseDate': ''
                                                              }"/>
    <div class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">New Opportunity</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap ">
                <div class="slds-size--1-of-1 slds-p-horizontal_x-small">
                    <label>Opportunity Name</label>
                    <ui:inputText class="form-control" value="{!v.oppobj.Name}"/>
                </div>
                <div class="slds-size--1-of-1 slds-p-horizontal_x-small">
                    <label>Amount</label>
                    <ui:inputText class="form-control" value="{!v.oppobj.Amount}"/>
                </div>
                <div class="slds-size--1-of-1 slds-p-horizontal_x-small">
                    <ui:inputDate aura:id="closedate" label="Close Date" class="field" value="{!v.oppobj.CloseDate}" displayDatePicker="true"/>
                </div>
                <div class="slds-size--1-of-1 slds-p-horizontal_x-small">
                    <ui:inputSelect aura:Id="stagename" multiple="false" label="Stage" class="slds-size--1-of-1 slds-p-horizontal_x-small">
                        <ui:inputSelectOption label="Prospecting" text="Prospecting" value="true"/>
                        <ui:inputSelectOption label="Qualification" text="Qualification"/>
                        <ui:inputSelectOption label="Closed Won" text="Closed Won"/>
                        <ui:inputSelectOption label="Value Proposition" text="Value Proposition"/>
                        <ui:inputSelectOption label="Needs Analysis" text="Needs Analysis"/>
                    </ui:inputSelect> <br/>
                </div>
            </div>
         
            <div class="slds-modal__footer">             
                <lightning:button variant="neutral" label="Cancel" onclick="{!c.cancel}"/>
                <lightning:button variant="brand" label="Submit" onclick="{!c.saverecord}" />
            </div>
        </div>
    </div>
</aura:component>

JavaScript controller:
---------------------
({
    saverecord : function(component, event, helper) {
        var Opportunity = component.get("v.oppobj");
        if($A.util.isEmpty(Opportunity.Name) || $A.util.isUndefined(Opportunity.Name)){
            alert('Opportunity Name is Required');
            return;
        }
        var stagenm = component.find("stagename");
        if($A.util.isEmpty(stagenm) || $A.util.isUndefined(stagenm)){
            alert('Stage Name is Required');
            return;
        }
        if($A.util.isEmpty(Opportunity.CloseDate) || $A.util.isUndefined(Opportunity.CloseDate)){
            alert('Close Date is Required');
            return;
        }
     
        component.set("v.oppobj.StageName", stagenm.get("v.value"));
        var opprec = component.get("v.oppobj");
     
        var action = component.get("c.createRecord");
        action.setParams({"oppobj": opprec});
     
        action.setCallback(this,function(a){
            var state = a.getState();
            if(state == "SUCCESS"){
             
                var oppId = a.getReturnValue().Id;
             
                var newopp = {'sobjectType': 'opportunity',
                              'Name': '',
                              'Amount': '',
                              'StageName': '',
                              'CloseDate': ''
                             };
                component.set("v.oppobj",newopp);
                //  .reload();
                window.location.href =  '/lightning/r/Opportunity/'+oppId+'/view' ;
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
            }
        });
        $A.enqueueAction(action);
    },
 
    cancel : function(component, event, helper) {
        history.go(-1);
    }
})

5 comments: