Salesforce Lightning Components Development Tutorial
4.7 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
728 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Salesforce Lightning Components Development Tutorial to your Wishlist.

Add to Wishlist

Salesforce Lightning Components Development Tutorial

Become Pro in Salesforce Lightning Components with easy, simple, step-by-step learning
4.7 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
728 students enrolled
Created by Syed Shah
Last updated 4/2017
English
Price: $200
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 5 Articles
  • 27 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • At the end of the training, you will be able to build Lightning applications that enable a user to search, read, and update data from a Salesforce org.
  • you will be able to understand what the salesforce lightning components framework is.
  • you will be able to Create custom, reusable Lightning Components and Applications.
  • you will be able to understand what a LIGHTNING COMPONENT is.
  • you will be able to distinguish between Lighnting App Component and Lightning Component Component
  • you will be able to understand the "Component Resource Bundle".
  • you will be able to distinguish between Controller Resource and Helper Resource
  • you will be able to use HTML, CSS in the Salesforce Lightning Components
  • you will be able to use “Static Resources” in the Salesforce Lightning Components
  • you will be able to understand composition and DE-COMPOSITION of the Salesforce Lightning Components
  • you will be able to understand A--T--T--R--I--B--U--T--E--S
  • you will be able to understand the "VALUE PROVIDERS" -- view, controller, Label
  • you will be able to use the EXPRESSIONS in the Salesforce Lightning Components
  • you will be able to work with UI components
  • you will be able to work with UI components & Events
  • you will be able to understand how to surface the components i.e. Adding components to the App, Lightning Experience, Salesforce1, VF Page etc
  • since the Lightning Components Framework is "EVENT-DRIVEN" Framework, you will very importantly understand how to handle the events with CLIENT-SIDE Controllers.
  • As we spend more time on the Events, you will properly understand what and when to use and how to handle APPLICATION Events and COMPONENT Events with LIVE demo and examples.
  • you will be to use Apex in the Components, prepare server-side logic ie Apex Methods for Salesforce Lightning with "@AuraEnabled" annotation
  • you will be able to install and debug with "Salesforce Lightning Inspector Chrome Extension" and log messages in browser's javascript console.
View Curriculum
Requirements
  • HTML, CSS, JS
  • Prior experience in Salesforce is highly desired, BUT NEED NOT BE MANDATORY.
Description

THIS is the RIGHT tutorial for you if the below statements match you.

"I don't want TooOOO much of BORING theory and PPTs.

I want "TO-THE-POINT" explanation.

I want MORE hands-on." but, remember I do REPEAT and STRESS the important points as I want to dump directly to your brain easily.

*********************************************************************************************************************************************

What will I get in this Course?

Apart from the Salesforce Lightning Components Development Training, Each module is not only LECTUREd but also DEONSTRATEd with a easily understandable case study.

And, At the end of the Course:

you will be able to understand what the salesforce lightning components framework is.

you will be able to understand what a LIGHTNING COMPONENT is.

you will be able to distinguish between Lighnting App Component and Lightning Component Component.

you will be able to Create custom, reusable Lightning Components and  Applications.

you will be able to understand the "Component Resource Bundle".

you will be able to distinguish between Controller Resource and Helper Resource

you will be able to use HTML, CSS in the Salesforce Lightning Components

you will be able to use “Static Resources” in the Salesforce Lightning Components

you will be able to understand composition and DE-COMPOSITION of the Salesforce Lightning Components

you will be able to create NESTED COMPONENTS.

you will be able to understand A--T--T--R--I--B--U—T--E--S

you will be able to understand the "VALUE PROVIDERS" --  view, controller, Label

you will be able to use the EXPRESSIONS in the Salesforce Lightning Components

you will be able to work with UI components and Events

you will be able to understand how to surface the components i.e. Adding components to the App, Lightning Experience, Salesforce1, VF Page etc

since the Lightning Components Framework is “EVENT-DRIVEN”  Framework, you will very importantly understand how to handle the events with CLIENT-SIDE Controllers.

As we spend more time on the Events, you will properly understand what and when to use and how to handle APPLICATION Events and COMPONENT Events with LIVE demo and examples.

you will be able to handle the events with client-side controllers

you will be to use Apex in the Components, prepare server-side logic ie Apex Methods for Salesforce Lightning with "@AuraEnabled" annotation

you will be able to install and debug with "Salesforce Lightning Inspector Chrome Extension"

*********************************************************************************************************************************************

SPAs….. SPAs….. SPAs…..

SPAs….. SP Apps…..  Single Page Apps……

Most of Web Apps & Mobile Apps are Single Page Apps. And, We have famous UI frameworks for building SPAs like AngularJS,  KnockOut, BackBone, Mercury etc.

What about Salesforce? That is why we have the “LIGHTNING EXPERIENCE” UI in the salesforce.  (The old UI which we have been using is “classic experience”.).

Then, What is this Lightning Component Framework?

The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It’s a modern framework for building single-page applications engineered for growth.

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.

When there are famous JS UI Frameworks such as AngularJS,  KnockOut, BackBone, Mercury etc, Why should I choose “Lighnting Component Framework”  ?

Because..

The benefits include an out-of-the-box set of components, event-driven architecture, and a framework optimized for performance.

Out-of-the-Box Component Set

Comes with an out-of-the-box set of components to kick start building apps. You don't have to spend your time optimizing your apps for different devices as the components take care of that for you.

Rich component ecosystem

Create business-ready components and make them available in Salesforce1, Lightning Experience, and Communities. Salesforce1 users access your components via the navigation menu. Customize Lightning Experience or Communities using drag-and-drop components on a Lightning Page in the Lightning App Builder or using Community Builder. Additional components are available for your org in the AppExchange. Similarly, you can publish your components and share them with other users.

Performance

Uses a stateful client and stateless server architecture that relies on JavaScript on the client side to manage UI component metadata and application data. The client calls the server only when absolutely necessary; for example to get more metadata or data. The server only sends data that is needed by the user to maximize efficiency. The framework uses JSON to exchange data between the server and the client. It intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps.

Event-driven architecture

Uses an event-driven architecture for better decoupling between components. Any component can subscribe to an application event, or to a component event they can see.

Faster development

Empowers teams to work faster with out-of-the-box components that function seamlessly with desktop and mobile devices. Building an app with components facilitates parallel design, improving overall development efficiency.

Components are encapsulated and their internals stay private, while their public shape is visible to consumers of the component. This strong separation gives component authors freedom to change the internal implementation details and insulates component consumers from those changes.

Device-aware and cross browser compatibility

Apps use responsive design and provide an enjoyable user experience. The Lightning Component framework supports the latest in browser technology such as HTML5, CSS3, and touch events.


Who is the target audience?
  • This is ideal Course, if your present Project demands to produce custom Lightning Components and Applications that run in Lightning Experience, Salesforce1
  • This is ideal Course, if you need to Build Lightning applications that enable a user to SEARCH, READ and UPDATE data from a Salesforce org
  • This is NOT ideal if you are looking exclusive SLDS (Salesforce Lightning Design System) Course. I am giving high-level overview and usage only in this tutorial. I am planning an exclusive SLDS tutorial which may be published in the near future.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
55 Lectures
07:55:23
+
INTRODUCTION to the Course
1 Lecture 06:55
+
Getting Ready
6 Lectures 40:12

In this Lecture We will set up and get ready for creating the Lightning Components

  1. •Developer Edition
  2. •Enable Lightning Experience
  3. •Custom Domain
  4. •Salesforce1 Simulator
  5. •Salesforce Lightning Inspector
Preview 01:52

Note : You can skip this Lecture, if you already have a "Developer Edition".

visit : "developer.salesforce.com/signup" and subscribe a life-time free Developer Edition.

Sign Up the Developer Edition
05:56

In this Lecture, we will understand enabling the Lightning Experience

Enable the Lightning Experience
04:50

In this Lecture, we will understand, 

  1. What a Custom Domain is,
  2. The advantages of the Custom Domain.
  3. Why it is important for "Salesforce Lightning Components".
  4. Adding a Custom Domain to our Training Org, Rolling it Our, Deploying it.



Preview 15:24

The very main objective of the Lightning Components is to develop Force.com Apps for "Lightning Experience" and "Salesforce1 Mobile".

When it comes to testing, we can easily test the "Lightning Experience" in our PC. But coming to the "Salesforce1", we actually need a mobile device with Salesforce1 App installed. As a developer, we need to test it in the mobile device. It consumes unnecessarily lot of time with the mobile device for "refreshing and testing", "refreshing and testing". 

The other way is to install any of our favorite android EMULATORS on our PC, installing "Salesforce1 Mobile App" in the Emulator. Again it is "Time and Hardware Resource" consumption process, which can be an embarassing for a developer like me.

So, the best option I personally practice and strongly recommend is, installing "Salesforce1 Simulator" chrome app offered by kylpo.com, which is very developer friendly, easy and fast to launch, refresh and test, login and logout.

In this Lecture, we will learn how to install the "Saleforce1 Simulator Plugin" and also, we will learn

  1. what is this "Salesforce Lightning Inspector" Plugin for Chrome.
  2. installing it.

Note: Please install both of them and keep them ready. We will start using them after the development of the lightning components

Salesforce1 Simulator AND Salesforce Lightning Inspector
06:00

In this lecture, we will learn to deploy the Custom Domain to the Users.

Go to Setup ==> Administer Setup ==> Domain Management ==> My Domain ==> Click on "Deploy to Users".

Deploying Custom Domain to Users
06:10
+
My First Lightning App and Lightning Component
3 Lectures 21:59

In this Lecture, we will see, to create our first Lightning Component.

I have also briefly explained about the INTERFACEs.

In the Dev Console ==> File ==> New ==> Lightning Component.

I have used the external image from my site:

http://www.salesforce-online-training.com/images/twinklestar.gif

You can download the source code from the downloadable files here.

Preview 05:53

In this Lecture, we will create the Lightning Application.

In Dev Console. File ==> New ==> Lightning Appliation.

I have used the image from my site:

http://www.salesforce-online-training.com/wp-content/uploads/2013/11/sales-force-online-favicon.jpg

You can also download the source code for this lecture from the downloadable resources.

Preview 07:41

In this Lecture, we will enhance the App and Component.

html in App and Component.

Component RE-usability.

Preview 08:25
+
Attributes and Expressions
5 Lectures 36:42

In this Lecture, we will learn, what the attributes and the expressions are, the TYPES can be used, 

Practical demo of the concept.

You can download the code resources in the last part.

Attributes and Expressions - Part 1
06:06

Use  the component <aura:attribute> to define the attributes.

The types can be primitive like string, integer, boolean, collections. And, at the advance level,"action".

use expression syntax {!expression} to access the attributes on the same component. You can 'SET' the attribute values on the instance of the component

Attributes and Expressions - Part 2
04:25

Attributes and Expressions - Part 3
06:34

Attributes and Expressions - Part 4
13:05

Value Providers
06:32
+
Component Bundle
11 Lectures 01:36:06

In this Lecture, we will have a overview of the AUTO-WIRED resources in the Component Bundle.

Component Bundle - The Auto-Wired Resources - Overview
10:03

In this Lecture, we will create a new component to work out on each Resource.

click on each RESOURCE in the right bar ie resource bundle to observe the names and extensions of the resources.

A Glance at Resources in Dev Console
02:28

"STYLE" resource in the Component Bundle
In this Lecture, we will learn how to define the custom styles and customize the default styles.


STYLE resource - CSS in Lightning
07:04

In this Lecture, we will learn how to document our components. How to see the documentation of the components.

<aura:documentation> </aura:documentation> are the outer components.

You can provide description, examples of the components.

DOCUMENTATION resource
04:52

In this Lecture,  we will learn to give custom icon resource for the component and observed the same in the Lightning App Builder (to understand how the Admins design and configure)

Preview 03:58

We have seen how we can give custom icon resource in SVG resource. 

In this Lecture, we will understand how 

we can reLABEL the component to be visible in Lightning App Builder or Community Builder.


Preview 01:50

In this Lecture, we will understand how 

we can allow the Admins to configure the ATTRIBUTES at DESIGN time.

Use <design:attribute > component in the DESIGN resource to allow the "COMPONENT ATTRIBUTES" for Lightning App Builder.

Preview 20:02

CLIENT-SIDE CONTROLLER is the important resource in the Bundle. Whatever the events occured via events on the components with user interactions, to handle those events, we write the handlers/methods in this controller. 

In this Lecture, we will understand the very important info about the controller.

CONTROLLER resource - Client Side JS Controller
09:56

RENDERER resource
02:48

HELPER resource - concept
13:05

In the demo,

we observe the flow from the Markup to the Controller to the Helper.

we observe how to pass the String Parameters to the Helper.

We have taken an example of calculating First Name and the Last Name by providing the static text.

HELPER resource - LIVE demo
20:00
+
MINI PROJECT
1 Lecture 16:22

In this Lecture, we will do a mini project.

On the VIEW, we will have 2 attributes to capture the user's first name and the last name.

1 more attribute for assigning the result.

On clicking the button, client-side controller function gets invoked and executes the logic.

we also observe, how to debug, to the little extent.

MINI PROJECT
16:22
+
Static Resources in the Lightning Components
2 Lectures 31:54

In this Lecture, we will enhance our project with

styles in STYLE resource

external CSS with Static Resources - Global Value Provider

Static Resources in Lightning - Enhancements AND using the External CSS
13:33

In this Lecture, we will understand how to access the Zipped Resources from the Zipped Archive Static Resource.

I have demonstrated you 2 styles of using the Static Resources. You can follow iwhich is convenient for you.

You can download the resources that I have used in the demo, from, the downloadable resources.

Static Resources in Lighnting - Zip Archive
18:21
+
Custom Labels in the Lightning Components
1 Lecture 04:26

In this Lecture, we will learn how to use the Custom Labels in the Salesforce Lightning Components.

In the demo, I have shown you how to create the custom labels in the salesforce org quickly for your ref.

You can create of your choice and use them using;  $Label.<nameSpace>.<labelName>. For Example: 

<ui:inputText label="$Resource.c.label_in_hebrew" value="{!v.first_name}" />

Custom Labels in the Lightning Components
04:26
+
Global Id vs Local Ids
2 Lectures 27:40
Part 1
15:22

Part 2
12:18
+
COMPOSITION is DE-COMPOSITION
3 Lectures 23:39

In this Lecture, we will understand how we do the composition of the components.

Component Composition
06:24

In this Lecture, we will understand the What are Nested Components and how to use them.

Nested Components
09:47

In this Lecture, we will observe how to use the nested components for the iteration.

Nested Components for Iteration
07:28
6 More Sections
About the Instructor
Syed Shah
3.7 Average rating
49 Reviews
2,555 Students
5 Courses
SalesForce.com Architect-Author-Motivator-REIKI Grand Master

I may be little bit happy...

because... I may be Junior Consultant for some time....

because... I may be Senior Consultant for some time....

because... I may be etc. etc.. etc... etc..... for SOME TIME.

BUT, I feel MORE happy, because, I am a WHOLE-TIME LEARNER. Sharing that learning with you all, the REAL Learning for me. UDEMY is the right platform for you and me to LEARN TOGETHER.

There is no word in my dictionary called "TEACHING". If at all, it is there, that could be, "MAKING OTHER LEARN". Yes, I am passionate of that Teaching, with which I am multiplying my learning, and while I teach, FIRST OF ALL, I am teaching to myself. So, in my Corporate Trainings also, I feel myself, I am the first beneficiary out of that training.

I feel happy to say I have got the opportunity to work with the prestigious clients including:

DELL

SONY

ACCENTURE

HCL

WIPRO

MINDTREE.

I beleive in that, there is always scope for betterment, I welcome your suggestions.

Thanks for your time and interest..

Let's meet in the Tutorials...


ALL THE VERY VERY VERY BEST