fbpx

Free Salesforce Developers Tutorials >

Chapter -14 Lighting Component Framework >

Create a Lightning Application Part -2

Create a Lightning Application Part -2

What You’ll Learn


S2 Labs

Types Of Controller

Aura framework consists of two types of controllers:

  1. Client-Side Controller: A client-side controller is basically a Javascript file, in which all the logic is written, which is responsible for the interactive view of the component.
  2. Server-side controller: A server-side controller is an Apex file(Backend), in which all the Business logic is written, to perform actions from the view.

Value Provider In Aura

Value Providers are the way to access data and methods in the component files.

There are two value providers:

  1. c: this ‘c’ value provider stands for the controller. It is basically used to access methods and values of the client-side controller and server-side controller.
  2. v: this ‘v’ value provider stands for the view. It is basically used to access attributes created in the component, to set and get their values.

Example to Create a Lighting Component(List of records)

//HTML File

<aura:component controller="c.contactContainer">
    <aura:attribute name ="contacts" type="Contact[]"/>
    <aura:handler event="c:searchKeyChange" action="{!c.searchKeyChange}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ul class="list-group">
    	<aura:iteration items ="{!v.contacts}" var="contact">
           <li class = "list-group-item">
              <a href = "{!'#contact/'+contact.Id}">
                    <p>{!contact.Name}</p>
                    <p>{!contact.Phone}</p>
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>
//JS File

({
doInit : function(component, event) {
	var action =component.get("c.findAll");
        action.setCallback(this,function(a){
                           component.set("v.contacts",a.getReturnValue());
        });
    $A.enqueueAction(action);
	},
    
searchKeyChange :function(component,event)
    {
    	var searchKey = event.getParam("searchKey");
    	var action = component.get("c.findByName");
    	action.setParams({
    		"searchKey" : searchKey
		});
	action.setCallback(this,function(a)
	{
    component.set("v.contacts",a.getReturnValue());	
	})	
    
    $A.enqueueAction(action);
}
})
LWC Training

Download Study Material

Get access to exclusive study material for Salesforce Certification and ace your exams!

Download Now

Our Salesforce Certification Courses

Hey there! Glad you made it through our Salesforce Developer Training for beginners . But wait! We've got some high-in-demand Salesforce courses for you to take your Salesforce skills to the next level, making you a desired professional in the Salesforce job market.

Post a Comment

Your email address will not be published. Required fields are marked *