Monday, February 13, 2017

What is in lightning component and how to use in lightning components?.

What is <aura:iteration> in lightning component and how to use <aura:iteration> in lightning components?.


aura:iteration iterates over a collection of items and renders the body of the tag for each item.

Data changes in the collection are rerendered automatically on the page. aura:iteration supports iterations containing components that have server-side dependencies or that can be created exclusively on the client-side.


Example Using Data from a Server-Side Controller

This example shows a dynamic iteration that displays data from a standard Opportunity object when user clicks on the button.

Apex Class:

public with sharing class OpporutnityLightningController {
   
    @AuraEnabled
    public static List<Opportunity> getOpportunities(){
        List<Opportunity> opplist = [select id,Name from opportunity];
        return opplist;
    }

}

Lightning Opportunity Component : 



Opportunity Component Controller.JS




Opportunity component App:





Output : 



In this example i am giving basic idea of how to use <aura:iteration> with apex class.

for more details you can refer salesforce documentation.







What are Server-Side Controllers in lightning components and how to use server-side controllers?.

What are Server-Side Controllers in lightning components and how to use server-side controllers?.


Server-Side Controller
Create a server-side controller in Apex and use the @AuraEnabled annotation to enable client- and server-side access to the controller method.
Only methods that you have explicitly annotated with @AuraEnabled are exposed. Calling server-side actions aren’t counted against your org’s API limits. However, your server-side controller actions are written in Apex, and as such are subject to all the usual Apex limits.
This Apex controller contains a serverEcho action that prepends a string to the value passed in.
public with sharing class SimpleServerSideController {

    //Use @AuraEnabled to enable client- and server-side access to the method
    @AuraEnabled
    public static String serverEcho(String firstName) {
        return ('Hello from the server, ' + firstName);
    }
}


In addition to using the @AuraEnabled annotation, your Apex controller must follow these requirements.
  •     Methods must be static and marked public or global. Non-static methods aren’t supported.
  •     If a method returns an object, instance methods that retrieve the value of the object’s instance field must be public.


Creating an Apex Server-Side Controller
Use the Developer Console to create an Apex server-side controller.
1.      Open the Developer Console.
2.      Click File | New | Apex Class.
3.      Enter a name for your server-side controller.
4.      Click OK.
5.    Enter a method for each server-side action in the body of the class. 
6.    Click File | Save
7.    Open the component that you want to wire to the new controller class. 
8.    Add a controller system attribute to the <aura:component> tag to wire the 
   component to the controller. For example:


<aura:component controller="SimpleServerSideController" >


Returning Errors from an Apex Server-Side Controller


Create and throw a System.AuraHandledException from your server-side controller to return a custom error message.

Errors happen. Sometimes they’re expected, such as invalid input from a user, or a duplicate record in a database. Sometimes they’re unexpected, such as... Well, if you’ve been programming for any length of time, you know that the range of unexpected errors is nearly infinite.

When your server-side controller code experiences an error, two things can happen. You can catch it there and handle it in Apex. Otherwise, the error is passed back in the controller’s response.

If you handle the error Apex, you again have two ways you can go. You can process the error, perhaps recovering from it, and return a normal response to the client. Or, you can create and throw an AuraHandledException.

The benefit of throwing AuraHandledException, instead of letting a system exception be returned, is that you have a chance to handle the exception more gracefully in your client code. System exceptions have important details stripped out for security purposes, and result in the dreaded “An internal server error has occurred…” message. Nobody likes that. When you use an AuraHandledException you have an opportunity to add some detail back into the response returned to your client-side code. More importantly, you can choose a better message to show your users.

Here’s an example of creating and throwing an AuraHandledException in response to bad input. However, the real benefit of using AuraHandledException comes when you use it in response to a system exception. For example, throw an AuraHandledException in response to catching a DML exception, instead of allowing that to propagate down to your client component code.


public with sharing class SimpleErrorController {     static final List<String> BAD_WORDS = new List<String> {        'bad',        'words',        'here'    }; 
    @AuraEnabled    public static String helloOrThrowAnError(String name) {         // Make sure we're not seeing something naughty        for(String badWordStem : BAD_WORDS) {            if(name.containsIgnoreCase(badWordStem)) {                // How rude! Gracefully return an error...                throw new AuraHandledException('NSFW name detected.');            }        }     
        // No bad word found, so...        return ('Hello ' + name + '!');    } 
}



Calling a Server-Side Action

Call a server-side controller action from a client-side controller. In the client-side controller, you set a callback, which is called after the server-side action is completed. A server-side action can return any object containing serializable JSON data. A client-side controller is a JavaScript object in object-literal notation containing name-value pairs. Each name corresponds to a client-side action. Its value is the function code associated with the action Let’s say that you want to trigger a server-call from a component. The following component contains a button that’s wired to a client-side controller echo action. ServerSideLightningController contains a method that returns a string passed in from the client-side controller.
Example : Component

 Controller

Output : 


for reference  :

Tuesday, February 7, 2017

How to know which button was pressed in lightning component?

How to know which button was pressed in lightning component?


To find out which button was pressed in a component containing multiple buttons, use Component.getLocalId().

Let’s look at a component that contains multiple buttons. Each button has a unique local ID, set by an aura:id attribute.

<!--c:buttonPressed-->
<aura:component >
    <aura:attribute name="whichButton" type="String" />
    
    <p>You clicked: {!v.whichButton}</p>

    <ui:button aura:id="button1" label="Click me" press="{!c.nameThatButton}"/>
    <ui:button aura:id="button2" label="Click me too" press="{!c.nameThatButton}"/>
</aura:component>


Use event.getSource() in the client-side controller to get the button component that was clicked. Call getLocalId() to get the aura:id of the clicked button.

/* buttonPressedController.js */
({
    nameThatButton : function(cmp, event, helper) {
        var whichOne = event.getSource().getLocalId();
        console.log(whichOne);
        cmp.set("v.whichButton", whichOne);
    }
})


Example Component: 



Controller.Js  : Highlighted code



out put:





for reference : 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_which_button_pressed.htm


Monday, February 6, 2017

What are the standard components in lightning components?


What are the standard components in lightning components?


Components are reusable applications components. There are 2 types of components in salesforce.

1).Standard components can be used in salesforce one applications as well as in lightning application also.

2).Force.com components can only be used in salesforce one application.
Example of standard component is

aura:iteration iterates over a collection of items and renders the body of the tag for each item.

Data changes in the collection are rendered automatically on the page. aura:iteration supports iterations containing components that have server-side dependencies or that can be created exclusively on the client-side.

 


Example :
Here is my component 




Here is my component controller code

Defined getNumberList function in controller, and set the values from this controller. If you observer line number 8 I prepared listOfNums and passed to component variable “listOfNumbers”.






Finally the output is :



For reference:


What are Global Value Providers in lightning components?

What are Global Value Providers in lightning components?


Global value providers are global values and methods that a component can use in expressions.




First we will see how to use $Browser global value provider to check the browser I am running my lightning component.




Output is:

Similarly, you can check browser information in a client-side controller using $A.get().

({
    checkBrowser: function(component) {
        var device = $A.get("$Browser.formFactor");
        alert("You are using a " + device);
    }
})


Similarly, you can check locale information in a client-side controller using $A.get().


({
    checkDevice: function(component) {
        var locale = $A.get("$Locale.language");
        alert("You are using " + locale);
    }
})




You can refer in salesforce documentation:

How to use conditional statements IF, Else in lightning components?.

How to use conditional statements IF, Else in lightning components?.


In the below example components I am using IF and Else conditions in components.

IFComp:



In the above screen shot I am using aura:attribute  to define variable with name as “change”, data type as boolean for this I assigned a default value as TRUE.
In line number seven I am starting IF condition with <aura:if> tag. If you want to define conditional expression in lightning components we have to use <aura:if>  . if the change variable value is TRUE then I am displaying button with test as “I am True”, else I am displaying button with label as “I am false”
In line number ten I am using else block for the above if condition, for this we have to use the tag of <aura:set attribute=”else”/>


<ui:button> is used to create buttons in lightning components.

Output 1: 

Here I will the button the button label as true, because of I assigned default value for the “Change” variable as true.



Output 2:











Sunday, February 5, 2017

What are Nested components and component composition in lightning?

What are Nested components and component composition in lightning?


Component composition is nothing to use to ease the process.  Let’s say if you have 3 to 4 components so instead of calling all those components into your application what we do is create another component which is knows as nested component or wrapper component which calls all these components in itself and then in the application finally we can call that wrapper/Nested component only.

To save our time we are going to use this a lot in lightning applications.  Here is the example

I have 2 components as shown below


Component 1 :  LC.cmp 



Component 2 :  LC2.cmp


Wrapper Component / Nested Component:



Application:  Here I am including/adding that wrappercomponent in my NestedComponent application.

Finally what I am doing here is instead of calling LC,LC2 components, I am calling wrappercomponent that includes booth LC,LC2 components.



Once you click on the preview of your application you can see this output.




 
| ,