Account Creation VF Page with Lightening Look

VF Preview Screen 

Lightening Component :

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="AccountController">
   <aura:attribute name="newAccount" type="Account" default="{ 'sobjectType': 'Account'}"/>
 
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Gaurav Account</p>
                <h1 class="slds-text-heading--medium">My Account</h1>
            </div>
        </div>
    </div>
 
<div class="slds-col slds-col--padded slds-p-top--large">
         
            <fieldset class="slds-box slds-theme--default slds-container--large">
                <legend id="Accountform" class="slds-text-heading--small
                                                slds-p-vertical--medium">
                    Add Gaurav Account
                </legend>
             
             
                <div class="slds">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
                         
                            <div class="slds-form-element slds-is-required">
                                <div class="slds-form-element__control">
                                    <ui:inputText aura:id="account Name" label="Account Name"
                                                  class="slds-input"
                                                  labelClass="slds-form-element__label"
                                                  value="{!v.newAccount.Name}"
                                                  />
                                </div>
                            </div>
                         
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
                                                  class="slds-input"
                                                  labelClass="slds-form-element__label"
                                                  value="{!v.newAccount.SLAExpirationDate__c}"
                                                  displayDatePicker="true "/>
                                </div>
                            </div>
                         
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <ui:inputText aura:id="accountSLADate" label="Phone"
                                                  class="slds-input"
                                                  labelClass="slds-form-element__label"
                                                  value="{!v.newAccount.phone}"
                                                  />
                                </div>
                            </div>
                        </div>
                        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="expname" label="Account Site"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"
                                              value="{!v.newAccount.Site}"
                                              />
                            </div>
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="expname" label="SIC Description"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"
                                              value="{!v.newAccount.SicDesc}"
                                              />
                            </div>
                         
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="accountSerialNumber" label="SLA Serial Number"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"
                                              value="{!v.newAccount.SLASerialNumber__c}"
                                              />
                            </div>
                        </div>
                    </div>
                </div>
                <center>
                <div class="slds-form-element">
                    <ui:button label="Create Account" class="slds-button slds-button--brand" press="{!c.clickCreateAccount}"/>
                </div>
                </center>
            </fieldset>
    </div>
</aura:component>

Lightening Application:

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

</aura:application>

Controller JS :

({
    clickCreateAccount: function(component, event, helper) {
    var newAccount = component.get("v.newAccount");
    helper.createAccount(component, newAccount);
    alert("Account created Successfully!!");
 }
})

Helper JS :

({
    createAccount: function(component, Account) {
    var action = component.get("c.saveAccount");
    action.setParams({
        "accountObj": Account
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        alert("state");
        if (component.isValid() && state === "SUCCESS") {
            var newAccount = component.get("v.newAccount");
            component.set("v.newAccount", newAccount);
        }
    });
    $A.enqueueAction(action);
}
})

How to check for boolean variables in Lightning Components? Three possible values for Boolean variables: True, False, Undefined

Boolean variables can have three possible variables: true, false and undefined. To make it even more confusing, if you check for the value of an undefined variable in JavaScript, it returns false. But False, is not undefined! So how do you check for the value?

    ({
        buttonClick : function(component, event, helper) {
            var myBool = component.get("v.myBool");
            if (myBool == undefined) {
                alert("myBool was undefined");
            } else if (myBool) {
                alert("myBool was true");           
            } else if (!myBool) {
                alert("myBool was false");           
            }
        }
    })


The check for undefined has to be done first, then check for true and false!

If you check backwards it will never work! Let me show you with a full example..

    <aura:application >
        Undefined <c:Demo04a  />
        <hr/>
        True <c:Demo04a myBool="true" />
        <hr/>
        False <c:Demo04a myBool="false" />
    </aura:application>


    <aura:component >
        <aura:attribute name="myBool" type="Boolean" />
        <lightning:button label="Wrong" onclick="{!c.buttonWrong}" />
        <lightning:button label="Correct" onclick="{!c.buttonCorrect}" />
    </aura:component>  


    ({
        buttonWrong : function(component, event, helper) {
            var myBool = component.get("v.myBool");
            if (myBool) {
                alert("myBool was true");           
            } else if (!myBool) {
                alert("myBool was false");           
            } else if (myBool == undefined) {
                alert("myBool was undefined");
            }
        },
        
     buttonCorrect : function(component, event, helper) {
            var myBool = component.get("v.myBool");
            if (myBool == undefined) {
                alert("myBool was undefined");
            } else if (myBool) {
                alert("myBool was true");           
            } else if (!myBool) {
                alert("myBool was false");           
            }
        }
    }) 

Can we access @AuraEnabled variables in @AuraEnabled methods?

Yes, you can access static variables, but there's no point for your specific use case. @AuraEnabled is used to expose custom classes and methods to Lightning. Static variables will be reset between each transaction, just as they are in Visualforce.

public class Payload {
    @AuraEnabled public Integer counter;
}
@AuraEnabled public static Payload someMethod(Payload state) {
    if(...) {
        state.counter++;
    } else {
        state.counter--;
    }
    return state;
}

doSomething: function(component, event, helper) {
    var action = component.get("c.someMethod");
    action.setParams({ state: component.get("v.state"); });
    action.setCallback(function(result) {
        // Not included, but remember to check isValid/result status
        component.set("v.state", result.getReturnValue());
    });
    $A.enqueueAction(action);
} 

How to iterate map in Salesfore Lightning?

Apex Class:

public class LightningController {
    @AuraEnabled
    public static Map < String, String > fetchMapData() {
        Map < String, String > mapCustomer = new Map < String, String >();
        mapCustomer.put('Sample', 'Value');
        mapCustomer.put('Sample1', 'Value1');
        mapCustomer.put('Sample2', 'Value2');
        mapCustomer.put('Sample3', 'Value3');
        system.debug(mapCustomer);         
        return mapCustomer;
    }
}

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="LightningController">
    <ui:button label="Fetch" press="{!c.fetch}"/>
    <br/><br/>
    <aura:attribute name="showBool" type="Boolean" default="false"/>
    <aura:attribute name="customers" type="List" />
    <aura:renderIf isTrue="{!v.showBool}">
        <aura:iteration items="{!v.customers}" var="cus" indexVar="key">
            {!cus.key} - {!cus.value}<br/><br/>
        </aura:iteration>
    </aura:renderIf>
</aura:component>

Controller:

({
fetch : function(component, event, helper) {
        var custNo = component.get("v.custNo");
var action = component.get("c.fetchMapData");   
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {                
                var custs = [];
                var conts = response.getReturnValue();
                for ( key in conts ) {
                    custs.push({value:conts[key], key:key});
                }
                component.set("v.customers", custs);
                component.set("v.showBool", true);
            } 
});           
        $A.enqueueAction(action); 
}
})

App:

<aura:application >
    <c:MapComponent/>

</aura:application>

Lightning Experience Permission

Under System Permissions, select Lightning Experience user.

This permission helps the user to access the Salesforce Lightning Experience. Users with this permission can individually enable or disable this user interface

Admin # LightningChallenge

you’re invited to participate in the first ever Admin #LightningChallenge

If you successfully complete all 10 challenges, you’ll score yourself an awesome SWAG pack! You may even be selected to be a special guest on this. 

Please go through below link :

https://admin.salesforce.com/lightningchallenge

 

Calculator for Addition,Subtraction,Multiplication,Divided in Lightening component !!

Calculator for Addition,Subtraction,Multiplication,Divided





Here is the code for Calculator: 

Lightening Application :

<aura:application >
    <aura:attribute name= "text" type ="integer" />
     <aura:attribute name= "Mytext" type ="integer" />
     <aura:attribute name= "MMYtext" type ="integer"/>
     <ui:inputnumber label = "Inpupt 1" value="{!v.text}" updateOn="Click"/>
     <ui:inputnumber label = "Inpupt 2" value="{!v.Mytext}" updateOn="Click"/>
   
     Final Result: <ui:outputnumber value="{!v.MMYtext}"/>
    <ui:button label ="Press Me" press ="{!c.Pressme}"/>>
    <ui:button label ="Press Minus" press ="{!c.PressMinus}"/>
    <ui:button label ="Press MultiPlication" press ="{!c.MultiPlication}"/>
    <ui:button label ="Press Divide" press ="{!c.Divide}"/>
   
 </aura:application>

Lightening Controller JS:

({
    Pressme : function(component, event, helper) {
     component.set("v.MMYtext", component.get("v.text")+component.get("v.Mytext"));
     component.set("v.MMYtext", component.get("v.text")+component.get("v.Mytext"));
    },
   
     PressMinus : function(component, event, helper) {
     component.set("v.MMYtext", component.get("v.text")-component.get("v.Mytext"));
    },
   
    MultiPlication : function(component, event, helper) {
     component.set("v.MMYtext", component.get("v.text")*component.get("v.Mytext"));
    },
   
     Divide : function(component, event, helper) {
     component.set("v.MMYtext", component.get("v.text")/component.get("v.Mytext"));
    }
   
})

Created by @Gaurav!!