SalesForce Lightning Tutorial Learning Path – Complete Guide [ Step-In]

Last updated on 29th Jul 2020, Blog, Tutorials

Salesforce Lightning is a platform that provides tools to build next-generation UI and UX in Salesforce. Salesforce Lightning helps organizations create a modern productivity-boosting user experience. Let’s now talk about what Lightning Experience is for getting a better understanding of Salesforce Lightning.

What is salsforce lightning?
Lightning Experience

The term ‘lightning’ refers to real lightning (one that comes with storms) which indicates the power of this tool. Lightning Experience is used to create fast, beautiful, and unique user experience so that sales teams and sales reps can sell faster and be focused on what’s more important. Lightning Experience uses the open-source Aura framework. However, it has a completely re-designed framework that creates a modern user interface. Let’s see what’s new with Salesforce Lightning Experience.

Look at the Salesforce Classic interface:
Salesforce classicNow, see the Salesforce Lightning Experience interface:

lightning experience : You can see how the whole interface has changed. Salesforce Lightning provides modern user experience across every device and also provides various tools that help build/update new applications with Lightning App Builder and Lightning Component.

What is Lightning Component in Salesforce ?

•  The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices.
• Modern framework for building single-page applications with dynamic, responsive user interfaces for Salesforce.com apps.
•  Components are the self-contained and reusable units of an app.
•  The framework supports partitioned multi-tier component development that bridges the client and server.
•  It uses JavaScript on the client side and Apex on the server side.

•  It’s comes with some exciting tools for developers.
•  Is ideal for use with the Salesforce1 mobile app and Salesforce Lightning Experience.
•  A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UIs.

Why We are use the Lightning Component ? 

• Comes with an out-of-the-box set of components
• Comes with Rich component ecosystem.
• Better Performance and Faster development.
• Event-driven architecture for better decoupling between components.
• Responsive design and cross browser compatibility.

Where we can use lightning components ?

We can use components in many different contexts. Like :

• Lightning Experience and Salesforce1 App
• Lightning Pages
• Community Builder
• Lightning Apps
• In Visualforce Pages
• Any App with Lightning Out (Beta).
• To create stand-alone apps that are hosted on Salesforce.

What is an Attribute in Lightning ?

Attribute is like a member variable in our regular coding (like declare variables in Apex, JavaScript). In simple words, attributes are used to store information to be referenced and used in our lightning component code. Attribute will make your lightning component more dynamic.

How to Add or Declare attributes in lightning component or lightning application ?

Below is the syntax of using attribute in lightning component or application -:

• So basically in the above sample syntax we have a ‘aura:attribute’ In which, attribute Name is ‘yourName‘ and its Type is String. and we are give it default value as ‘Marc Benioff’.
• Attributes are always declare with aura: namespace.
• In the attribute creation, attribute Name and attribute Type is mandatory properties.

Apart from name, type,default and description we have some more attributes (properties) of aura:attribute such as:

• name : Name of an attribute. [Required/Mandatory]
• type : Type of information to be stored. [Required/Mandatory]. ( Click Here to see supported basic type values of and aura:attribute.)
• default : Default value of an attribute.
• access : Indicates whether the attribute can be used outside of its own namespace. Possible values are public (default), and global, and private.
• required : Is it required or not – Possible Values: true or false(default)
• description : Summary of an attribute and its usage.

An attribute can have a type corresponding to a standard or custom object. Such as : 

How to Use or Access aura:attribute In Lightning Component or Lightning Application?

To access attribute in our Lightning Component or Lightning Application, we have to use value providers. (we will cover value providers in-depth in upcoming lesson). for now, assume value provider is just a syntax to access ‘aura:attributes’ to lightning component code.

To access a attribute in component markup using the expression {! v.attributeName} syntax. here ‘v.‘ gives you a ‘control’ to access the component attributes.

Example 1:

Open Developer Console and Create a lightning component (File > New > Lightning Component)

Enter name “testAttribute“. and write following code.

testAttribute.cmp

Create an app to see component output:

Open Developer Console and Create a lightning Application (File > New > Lightning Application) Enter name “testApplication”. and add your “testAttribute” component on it.

testAttribute.app :

Click on the preview button in developer console sidebar.

Output:

• In the above “testAttribute” lightning component code, first we have create 3 ‘aura:attribute’, with specific attribute type such as : string, Integer and Boolean.
• For use this attributes value in lightning component we are using the expression syntax {! v.attributeName} with value provider “v.” .

Use literal Text Inside the Expression.

you can also use static text with expression, such as :

• Notice that we’ve used the “+” operator to concatenate the two strings together inside expression.
• Output is same as Example 1 output.

What Are The Naming Convention Rules For aura:attribute?

An attribute name must follow these naming rules:

• Must begin with a letter or an underscore.
• Must contain only alphanumeric or underscore characters.
  

Advantages and Disadvantages of Lightning Components

Advantages:

• Reusability (App Builder, Community Builder, SF1, Visualforce, with Lightning out take components outside SFDC).
• Responsiveness (fits any device).
• Event Driven Approach.

Disadvantages:

• Higher learning curve compared to Visualforce
• Higher complexity than Visualforce—you’re building an application, not a page
• Since Lightning components are new, there are still some features that aren’t supported
• There are a limited number of out-of-the-box components