"SP21 ends on 23rd August 2021 = Summer 21 (SU21) Starts on 24th August 2021 = Join our Channel for latest Updates" https://t.me/salesforcekeeda

Monday, March 4, 2019

Salesforce Lighting Component - part 1 ( Your First Lighting application )

Lighting Component Tutorial From Beginning To Advance Part-1
In a tutorial of salesforce Lighting Component and other applications this is our first tutorial which covers Salesforce Lightning Component - part 1 ( your first lighting component ). Before we start you must have some knowledge about programming language in lighting component. You must have knowledge about the following 4 languages, which are, HTML, JAVASCRIPT, APEX, CSS .These are new in Salesforce which I highly recommended to learners before the move on deeper into Salesforce.

Salesforce Lighting Component - part 1

Before getting started you need to have and enable your custom domain or my domain in your salesforce.org, without this you will not be able to make your lighting applications, moreover, without this you cannot preview your Salesforce applications, so having an salesforce.org acoount is crucial.If you do not know how to enable my domain or custom domain in Salesforce then follow my this tutorial on that here -> How To Use Salesforce custom domain [ best way in 5 step ] this tutorial will tell you and help you solve your problem on how to enable my domain in Salesforce

In Salesforce when we are making lightning applications then use lightning component in applications. Lightning component is developed on <aura:if></aura:if> language its free UI framework  for the Salesforce Lighting App Builder.

Now we are going to make our first lighting component and  application, please follow the steps with me for better understating and if you face any problem please comment in comment box and I will help you

First You Create Lighting Component 

Lightning component is a reusable unit of an app. and it’s a combination of markup, JavaScript, and CSS.
We can say that it is something that will be available on UI for our functionality. Let’s follow this post to see how to create a basic lightning component.
Step 1: Open Developer Console.
Open Developer Console from the Your Name OR the quick access menu [Setup gear icon].
Salesforce Lighting Component - part 1

Step 2: Create Lightning Component Bundle
When you are creating Lighting Component Bundle you go  for developer Console then 
File ---->  New------> Lightning Component

Salesforce Lighting Component - part 1

After click on the Lightning Component, Enter the name of your Lightning component bundle and click on submit button. for this Example enter myFirstComponent in the Name field. Use the Description field to add details about your component.
Salesforce Lighting Component - part 1

This creates a new myFirstComponent component bundle, with two open tabs. Close the myFirstComponent tab, and keep the myFirstComponent.cmp tab open.
For this example, i have written some HTML H1 and P tags and Saved it by ctrl + s ] OR go to file >> Save.
Salesforce Lighting Component - part 1

Component bundle contains a component all its related resources. such as Documentation, Style, Helper, Controller, Components, and Event handler. 
Nice we have made our first lighting Component 🙂

It’s a little tricky. We can’t run our lightning component directly, to see what we created. To test this component [to see the result of component], we need to create a lightning application Bundle.
you can run your lightning component inside a container app. These containers would be the Lightning Experience, Salesforce1 apps, Lightning App builder or Lightning Application Bundle. You can add your lightning component to one of these containers, and then access it within that container.

So what is Lightning Application? 
A Lightning Application Bundle is just a special kind of component! For the Lesson of this tutorial, you can think of an Lightning Application as being different from a component in only 2 meaningful ways:
  • An lightning application bundle uses <aura:application> tags instead of <aura:component> tags.
  • Only an Application has a Preview button in the Developer Console.
Steps To Create Lightning Application Bundle:
In the developer console Go to File >> New >> Lightning Application
Salesforce Lighting Component - part 1

After click on the Lightning Application, Enter the name of your Lightning Application bundle and click on submit button. for this Example enter testApplication  in the Name field.
Salesforce Lighting Component - part 1

This creates a new “testApplication” lightning application bundle, with two open tabs. Close the “testApplication” tab, and keep the “testApplication.app” tab open.
As you can seen in above screenshot. in lightning application we have <aura:application> tags instead of<aura:component > tags. and also having a Preview button on sidebar.
  • This adds the “myFirstComponent” component we created earlier to the “testApplication” app.
  • Here c: is default namespace to access your components.

Salesforce Lighting Component - part 1
  • Save your application by [Ctrl + s] or go to file and click on  save.
  • Click on the Preview button on application bundle from side bar.
Lighting Application Heading 
Lighting Component Tutorial