Lightning Component

1. Setting Up Your Environment

Creating a Developer Edition Account and enabling Lightning Components in that development
environment.

 Creating a Developer Edition Account

 Open a browser and type http://developer.salesforce.com/signup in URL
 Register with required data such as First Name, Last Name, Email etc.
(Note: Verification link will come to the email address)
 Click on the verification which leads to password generation.
 After verification, login with username and password.

2. Switch to Lightning Mode

 Two ways to change from Salesforce classic mode to Lightning mode.

Option-1:

Click on this link

Option-2:

Click on this Link

3. Creation of My Domain
 Setup->Quick Find->My Domain

Click on this Link

 Create Domain name

Enter any name

Checking username availability

and click on Register Domain

 After some time, a confirmation email will come.

 Click on the link from the email and login with credentials.
 After login, the following link is displayed in the URL.
lightning.force.com is appended along with my Domain Id.
https://ashok-dev-ed.lightning.force.com/lightning/page/home?0.source=aloha
  After login Go to setup->My Domain and click on Deploy to user button. When it is finished
the following will display.

Note: if the above step is not done the Lightning Components Tab Related list Section will not
display in Tab Settings.

4. Concert Management System

 In this tutorial, Concert Management System(CMS) is developed with App Builder and
Lightning Component
 The following is the CMS Data Model

EMS

LR Concert Customer

MD
Troop
LR MD

Venue Booking

MD

Review

Note:

Objects: Troop, Concert, Customer, Venue, Booking, Review

Relationships: LR – lookup Relationship, MD-Master-Detail Relation Ship

5. Creation of App
 Go to Setup->quick find->app manager

 Click on New Lightning App

 Enter the details as below and click next

 Leave Default and click next

 Leave default and click next

 Select Home, Reports and Dashboards and click next

 In the final step, select system administrator profile and click on save & Finish
  In the App Manager, newly created app named CMS is displayed as follows and we can edit and
delete the app in future from here.

6. To open App click on 9 dots and select CMS App to open as follows
(Note: to move the App to top just Drag and drop at the top)

7. Creation of objects and tabs based on the above data Model

 Creating Objects
1. Setup->object Manage->new object (Custom Object)
2. Creation of Concert Object as follows and click Save and New
3. Creation of Customer Object as follows and click Save and New
4. Creation of Booking Object as follows and click Save and New
5. Creation of Venue Object as follows and click Save and New
6. Creation of Review Object as follows and click Save and New
7. Creation of Troop Object as follows and click Save
 Creating Tabs
 if Launch New Custom Tab Wizard after saving this custome object s selected then Tab creation
page opens automatically.

 If not selected, then follow the below steps to create tabs for objects

 Setup -> Quick Find -> Tabs

 Creating concert tab as follows
 click new button on Custom Object tabs section

 step -1: select Concert as object and any tab style

 step-2: leave default for profile

 Step:3 select only for CMS App and save

 Similarly, Creation of tabs for Remaining Objects is done.

8. App is Displayed as follows

9. Creation of Fields
 Creating Troop Fields as follows
Setup -> object Manager-> Troops-> click fields and relationships section and add the
following fields
  To Edit the Field Click on down arrow button as follows

Note: here Troop Name is Changed to TroopID by using Edit option and it is changed as follows

Click on Edit option and changes is done and clicked on save button
Similarly, changes are done for remaining objects Standard fields

Present field Name Changed to

Concert Name ConcertID
Venue Name VenueID
Booking Name BookingID
Customer Name CustomerID
Review Name ReviewID

 After changing, field is created as follows

 select the data type as text and click next

 Now name the field as follows and leave the remaining as default
  Click save and new for continuing new field creation or save for finishing of field creation.

Create Remaining Fields as follows

Troop Object Custom Fields

Data Type Field Label Other Values

Text Location Length: 50

External ID: Selected
Text Specialist Length: 50
External ID: Selected
Phone Phone

Email Email External ID: Selected

Similarly, fields are created for remaining objects as follows

 Fields for Customer Object

Customer Object Custom Fields

Data Type Field Label Other Values

Text First Name Length: 50

External ID: Selected

Text Last Name Length: 50

External ID: Selected

Phone Phone

Email Email External ID: Selected

Text Street Length: 50

Text City Length: 50

Text State/Province Length: 50

Text Zip/Postal Code Length: 15

Text Country Length: 50

 Fields for Venue Object

Venue Object Custom Fields

Data Type Field Label Other Values

Text Venue Name Length: 50

External ID: Selected

Text Location Length: 50

External ID: Selected

number Total Seats

 Fields for Concert Object

Concert Object Custom Fields

Data Type Field Label Other Values

Text Concert Name Length: 50

External ID: Selected

 Fields for Booking Object

Booking Object Custom Fields

Data Type Field Label Other Values

lookup Concert

Lookup Customer

Number No of tickets to book

 Fields for Review Object

Review Object Custom Fields

Data Type Field Label Other Values

Master detail Booking

10. Creating apex class for CustomerList Controller
In this section, to retrieve customer data, or to search Customer by name or by id is done with apex
class and Lightning applications make it easy to work with data.

Step1:

click on the setup icon and click on the Developer console.

Step2:

In the Developer Console, click File -> New -> Apex Class and controller name is given as follows
Step3: Enter the code as Follows and save

Note:

1. Customercontroller is a regular controller class with methods to retrieve customers (findAll), or

to search customer by name (findByName) or by id (findById).
2. The @AuraEnabled method annotation makes a method available to Lightning applications

11. Creating CustomerDB Lightning Component

In this section, Lightning Component is created and added as a tab.
Step-1: Create the Component

In the Developer Console, click File-> New-> Lightning Component and created as follows

Note:

In lightning Component there are three sections displayed

1. Name - component name

2. Description – component description
3. Component configuration (bundle) – consists of creation of lightning tab, page, etc.

Step-2: Add the following code

Note:

1. The component implements the force:appHostable interface to indicate that it can run in the
Salesforce1 application
2. We can add different sections like controller, Style Design from the palette.

Step 3: Creation of Lightning Tab

 Setup-> Tabs->Lightning Component Tabs->New

 Fill the data as follows and leave remaining steps default and save

 Adding the component as a tab as follows

Click

Click
12. Add the Tab to Mobile Navigation
 Setup->type mobile in Quick find->select salesforce Navigation
  After saving open salesforce mobile app in the mobile and open CustomerDB.

13. Implementation : fetching customer records by using CustomerDB Tab in mobile as follows
14. Verifying in Mobile App
 Open salesforce app and select CustomerDB Results will displayed
15. Implementation of Search bar

Step-1: creating Lightning Event

 Open Developer Console -> new -> Lightning Event and bundle name as SearchKey and click on
submit
  Enter the following code

Step-2: creating searchBar Component

 Creating Search Bar Component and Add the following code

 Creating searchbar Controller

 Creating Style

 Open mobile and verify