Free Salesforce Developers Tutorials >

Chapter -14 Lighting Component Framework >

Create a Lightning Application Part -1

Create a Lightning Application Part -1

What You’ll Learn


S2 Labs

A lightning component is a reusable unit of an app and it’s a combination of markup, JavaScript, and CSS.

It’s a component-based architecture means one component can be used anywhere.

We can not run a lightning component directly to see what we have created, hence we have to create a lightning application bundle. (Container app)

After creating the lightning application we can add lightning components and then we can see the context of the component.

To Create a Lightning application => developer console => new Lightning application

How To Create A Custom Domain In Salesforce?

We can create our custom login URL and application URL for our org with the company or any name which we can use to log in to our org.

To Create a Custom Domain:- go to setup => custom domain

Example to create an Apex Controller

public with sharing class contactContainer {
    @AuraEnabled
    public static list<Contact> findAll(){
       return [SELECT Id,Name,Phone FROM Contact LIMIT 50];
    }
    
    @AuraEnabled
    public static list<Contact> findByName(String searchKey){
        String name ='%'+searchKey+'%';
        return [SELECT Id,Name,Phone FROM Contact WHERE Name LIKE :name LIMIT 50];
    }
    @AuraEnabled
    public static Contact findById(String contactID){
       system.debug(contactID);
       return [SELECT Id, Name, Phone, title, MobilePhone, Account.Name FROM Contact WHERE id =:contactID LIMIT 1];
    }
}

Using Bootstrap In Aura

Example of Lightning Application(using the bootstrap static resource in Aura)

<aura:application >
    <link href ='/resource/bootstrap/' rel = "stylesheet"/>
	<div class = "navbarnavbar-default navbar-static-top" role = "navigation">
        <div class ="container">
	  <div class ="navbar-header">
	     <a href='#' class ='navbar-brand'>
                	lightning contacts
             </a>                                             				
           </div>
        </div>
        </div>

	<div class = "container">
	   <div class="row">
             <div class ="col-sm-12">
            	<c.searchBar></c.searchBar>
            </div>
        </div>
    </div>
                
    <div class = "container">
    	<div class="row">
            <div class ="col-sm-4">
            	<c.contactList></c.contactList>
            </div>
            <div class ="col-sm-8">
                <c.ContactDetails/>
            </div>
        </div>
    </div>

</aura:application>
Salesforce LWC Training

Download Study Material

Get access to exclusive study material for Salesforce Certification and ace your exams!

Download Now

Our Salesforce Certification Courses

Hey there! Glad you made it through our Salesforce Developer Training for beginners . But wait! We've got some high-in-demand Salesforce courses for you to take your Salesforce skills to the next level, making you a desired professional in the Salesforce job market.

Post a Comment

Your email address will not be published. Required fields are marked *