Tuesday, September 4, 2018

Value provider in Salesforce Lightning

Value provider are a way to access data,with value provider v we can fetch value of attribute from component markup in javascript controller.Value provider is denoted with v(view) and
c(controller).

Value provider:

1) v ==>   This value provider enable us to access value of component attribute in component markup and javascript controller.

<aura:component>

 <aura:attribute type="string" name="myfirstattribute" default="first text"/> 

{!v.myfirstattribute}

</aura:component>

2)c ==> This enable us to handle actions,event,handlers for the component.

Ex:<aura:handler  name="init" value="{!this}" action="{!c.doinit}"/>

In Javascript controller,

({

doinit:function(component, event, helper) {

// some operations here

}

})

Let's understand with simple example.

Steps:

Step 1:Build a  lightningcomponent.

<aura:component  >
   
        <aura:attribute type="string" name="myfirstattribute" default="first text"/> 
    
    Default value of attribute:
    
    {!v.myfirstattribute} // Value provider 
    
    <lightning:button label="clickme" onclick="{!c.method1}" /> 

 // Handling on click event of  button by using c and calling the method of javascript controller.
   
</aura:component>

Note:We are using a string type attribute with default value as "first text",as the component loads we will get value as "first text"and on click on button we are changing the value from "first text" to "Second text".

Step 2: Build a controller.

({
method1 : function(component, event, helper) {
        
      var action=  component.get("v.myfirstattribute"); // using value provider in javascript controller to get attribute value.
        var secondvalue="Second text";
        component.set("v.myfirstattribute",secondvalue); //setting some other value in attribute.
       

}
})

Step 3:Build a lightning app for previewing component.

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

No comments:

Post a Comment