Saturday, September 22, 2018

Lightning Components Basics : Attributes, Expressions and Value Providers

Attributes
Attributes are just like apex class member variables which holds some value and can be used in performing any operation.
Same like apex class member variable, you need to define name of attribute, datatype of attribute and you can also define default value which is optional.
Below is syntax to define attribute:

        <aura:attribute name="firstname" type="string" default="Sunil"/>

Other attributes are:
  • access- Indicates whether the attribute can be used outside of its own namespace. Possible values are public (default), and global, and private.
  • required - If it is required to specify the value of attribute. The default is false.
  • description - Specify the purpose and usuage of attribute.
Supported values for type are Boolean, date, datetime, decimal, double, integer, long, string, collections (list,set,map), standard and custom objects and user defined data types(wrapper class).

Please refer below URL for more information on basic data types:

Component Attributes Types
                                   
Note:
Salesforce recommend using type="Map" instead of type="Object" to avoid some deserialization issues on the server. For example, when an attribute of type="Object" is serialized to the server, everything is converted to a string. Deep expressions, such as v.data.property can throw an exception when they are evaluated as a string on the server. Using type="Map" avoids
these exceptions for deep expressions, and other deserialization issues.

Checking for Types
To determine a variable type, use "typeof" or a standard JavaScript method instead. The "instanceof" operator is unreliable due to the potential presence of multiple windows or frames.

Expression

Expression are kind of formula which can be used within expression delimiters (“{!” and “}”)in expressions, you can specify attributes or different operators to give you output.

          <aura:attribute name="msg" type="String"/>  
            <p>{!'Hello! ' + v.msg}</p>

Value Providers

Value providers helps you to access attributes values and you can use them either in component markup or in JavaScript functions. Using value providers, you can either set or get attributes values.

        <aura:attribute name="msg" type="String"/>  
            <p>{!'Hello! ' + v.msg}</p>

  • Way to find attribute value in controller.js:

               var msgValue = component.get("v.msg")

  • How to set attribute value in controller.js

              component.set("v.msg","Sunil Kumar");

Friday, September 14, 2018

Lightning Component For Timer

I have created a lightning component to display timer. This is useful when you want to display timer to end user so that he/she can understand remaining time.

This component can be used if you are planning to create time tracking app or online exam screen.


Below is complete code snapshot:

Hope this will help!!

Lightning Component for Stopwatch

I have created a lightning component which can work as stopwatch and will display time in "hh:mm:ss" format.



Below is complete code for this lightning component:

Hope this will help!!

Monday, September 3, 2018

lightning:isUrlAddressable Interface: Way to get URL parameters in Lightning Components

In Summer'18 release, Salesforce introduces new interface for lightning components which can be used to fetch URL parameters in lightning components.

Before this, we have to write logic in controller.js function to get current URL and split the url parameters.

If we are using lightning tab and displaying lightning component, then we can fetch URL param by using "{!v.PageReference.state.xxxxx}" where xxxxx is URL parameter name.

I have created a lightning component "SK_URLParamCmp.cmp" in order to explain the usage of this interface. Below is code snapshot:

Now I have created a lightning tab "SK_URLParam_Tab", which will open this lightning component.  Pass any value in URL as "accname" as parameter. Below is sample URL:

"/lightning/n/SK_URLParam_Tab?accname=sunil"

Below is UI snapshot:


Hope this will help!!

Note:

If changes to lightning Components are not reflecting immediately in lightning tabs, then you have to disable the "Enable secure and persistent browser caching to improve performance" option under Caching section in Session settings.

For more details on this setting, please refer below URL:
Improved Performance with Secure Client-Side Caching