Providers of Value in Salesforce Lightning

/ apex, Salesforce / By

Value providers are a way to access data. Value providers encapsulate related values together, similar to how an object encapsulates properties and methods. The value providers for a component are v (view) and c (controller).

v (View) Value Provider: This value provider enables you to access the value of a component’s attribute in the component’s markup.

Component:

In the following component, the attribute ‘whom’ is defined as a ‘String’ data type. If no value is specified for this attribute, it will default to ‘World.’ The ‘v’ value provider is used to access and represent the view for a component attribute

<aura:application>
    <aura:attribute name="whom" type="String" default="World"/>
    Hello {!v.whom}!
</aura:application>

c (Controller) Value Provider: This value provider enables you to wire up event handlers and action for the component. Client side controller handles events within a component. It’s a JavaScript resource that defined the functions for all of the components actions.

Component:

“In the following component, an attribute named ‘text’ is declared with a ‘String’ data type. When no value is explicitly provided, it defaults to ‘Just a string.’ The ‘v’ value provider is responsible for representing the view of this component attribute. Additionally, the Lightning framework button links the ‘onclick’ attribute in the ‘lightning:button’ component to trigger the ‘handleClick’ action in the controller.”

<aura:component>
    <aura:attribute name="text" type="String" default="Just a string."/>
    <lightning:button label="Framework Button" onclick="{!c.handleClick}"/>
     
    {!v.text}
</aura:component>

Element Controller

A client-side controller manages events within a component and is a JavaScript resource that defines functions for all the component’s actions.

The controller is represented as a JavaScript object using object-literal notation, containing a map of name-value pairs. Each name corresponds to a client-side action, and its value represents the function code associated with that action. Client-side controllers are enclosed in parentheses and curly braces, and action handlers are separated by commas, similar to any JavaScript map.

In the following ‘Component Controller’ example, take note that the first argument for every action is the component to which the controller is attached. One of the most common tasks performed with this component is inspecting and modifying its attribute values.

To retrieve the value of the ‘attributeName’ attribute, you can use ‘cmp.get(“v.attributeName”).’ Conversely, to set the value of the ‘attributeName’ attribute, ‘cmp.set(“v.attributeName”, “attribute value”)’ is used.

({
    handleClick : function(cmp, event, helper) {
        var attributeValue = cmp.get("v.text");
        console.log("String Value: " + attributeValue);
        var changeStringValue = 'Change the string value';
        cmp.set("v.text", changeStringValue);
    }
})

Every action function accepts three parameters:

  1. cmp — The component associated with the controller.
  2. event — The event being managed by the action.
  3. helper — The component’s optional helper. This helper contains functions that can be utilized by any JavaScript code within the component bundle

Related Posts