In this Salesforce tutorial, we are going to learn about value provider and global value providers in Salesforce lightning Components. In our previous Salesforce lightning, we learned about expressions in lightning components.
What is a value provider?
Value Providers in lightning Component encapsulate related values together and used to access data. In Salesforce lightning, we have two value providers for a component they are v (View) and c (Controller).
v (View) Value Provider.
Using this Value provider, user can access the values of a lightning components attribute in the component markup.
Example
<aura:application>
<aura:attribute name="prasanth" type="String" default="world"/>
Hello {!v.prasanth}!
</aura:application> As shown above, the name of the attribute is defined as “prasanth”, where v is the value provider for a component attribute which represent the view.
c (Controller) Value Provider.
c (Controller) Value Provider enables us 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.
What are global Value providers in lightning components?
Global Value providers in lightning components are global values and methods that a component can use in expression.
In Salesforce, we have five global value providers they are
| Global value provider | Description |
| globalID | It returns global ID for a component and every component will have unique globalId. |
| $Browser | This return information about system hardware and Operating system. |
| $Label | The $Label global value provider enables you to access labels stored outside your code. |
| $Locale | It returns the information about current user’s preferred locale. |
| $Resource | This provider lets you reference images, style sheets and JSP. |
Lightning component
<aura:component>
Browser is on Tablet : {!$Browser.isTablet}<br></br>
Is it running of IOS : {!$Browser.isIOS}<br></br>
IS the mobile device is Iphone : {!$Browser.isPhone}<br></br>
Is it running on Android : {!$Browser.isAndroid}<br></br>
Where I am running : {!$Browser.formFactor}<br></br>
</aura:component> Output
