Tag Archives: Lightning

Salesforce Lightning Value Providers

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 below component the name of the attribute is defined as “whom” String, If no value is specified, it defaults to “World”. Where “v” is the value provider for a component attribute which represent the view.

<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 below component the name of the attribute is defined as “text” String, If no value is specified, it defaults to “Just a string” and “v” is the value provider for a component attribute which represent the view. The Lightning framework button wires the onclick attribute in the lightning:button component to 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>

Component Controller:
A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions.

The controller is a JavaScript object in object-literal notation containing a map of name-value pairs. Each name corresponds to a client-side action. Its value is the function code associated with the action. Client-side controllers are surrounded by parentheses and curly braces. Separate action handlers with commas (as you would with any JavaScript map).

In the below Component Controller handleClick function, notice that the first argument to every action is the component to which the controller belongs. One of the most common things you’ll want to do with this component is look at and change its attribute values.

cmp.get("v.attributeName") returns the value of the attributeName attribute.

cmp.set("v.attributeName", "attribute value") sets the value of the attributeName attribute.

({
    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);
    }
})

Each action function takes in three parameters:

cmp — The component to which the controller belongs.
event — The event that the action is handling.
helper — The component’s helper, which is optional. A helper contains functions that can be reused by any JavaScript code in the component bundle.

Custom Label in Salesforce

Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language. Custom labels are custom text values that can be accessed from Apex classes, Visualforce pages, or Lightning components. The values can be translated into any language Salesforce supports.

We can create up to 5,000 custom labels for your organization, and they can be up to 1,000 characters in length.

Setup | App Setup | Custom Labels | Click ‘New Custom Label’ Button

Fill in the details and Click ‘Save’ button.

 

Custom Label in Visualforce page:
$Label.CustomLabel for Visualforce page.

<apex:page standardController="Account">
	
<h1>Example for Custom labels</h1>

	<apex:outputLabel value="{!$Label.Message}"/>
</apex:page>

 

Custom Label in Apex Class:
System.Label.Label_name for apex class

String msg = System.Label.Message; 

 

Custom Label in Lightning Component:
$Label.c.labelName for the default namespace.
$Label.namespace.labelName if your org has a namespace, or to access a label in a managed package.

<aura:component implements="flexipage:availableForAllPageTypes">
    
<div onclick="{!c.clickLabel}">
        <ui:outputText value="{!$Label.c.Message}}" />
    </div>

</aura:component>

 

Custom Label in Javascript:
$A.get(“$Label.c.labelName”) for the default namespace.
$A.get(“$Label.namespace.labelName”) if your org has a namespace, or to access a label in a managed package.

({
    clickLabel : function(component, event, helper) {
        var label = $A.get("$Label.c.Message");
        alert(label);
    }
})