Build Your First Lightning Component App In Salesforce

     Here is the simple example to add two numbers by using lightning component framework. Follow the below steps,

Step 1:

Open Developer Console

Step 2:

Click File --> New --> Lightning Component --> Enter name as "CalculateTotal" and Submit.

1. <aura:component >
2.     <center>
3.         <br/>
4.         <br/>
5.         <h2> <b> Simple Calculation </b> </h2>
6.         <br/>
7.         <ui:inputNumber aura:id="inputOne" label="First Value" /> <br/>
8.         <ui:inputNumber aura:id="inputTwo" label="Second Value"/> <br/>
9.         <ui:button label="Calculate" press="{!c.calculate}"/> <br/> <br/>
10.         Total Amount is: <ui:outputNumber aura:id="totalValue" value="{!v.totalValue}"/>
11.     </center>
12. </aura:component>

Step 3:

Double Click on Controller in right hand side of the component. Clear the existing code and paste the below one,

1. ({
2.      calculate : function(component)
3.       {
4.         var v1 = parseInt(component.find("inputOne").get("v.value"));
5.         var v2 = parseInt(component.find("inputTwo").get("v.value"));
6.         var total = (v1 + v2);
7.         console.log(total);
8.         component.find("totalValue").set("v.value", total);
9.         }
10. })

Step 4:

Click File --> New --> Lightning Application --> Enter name as "SimpleLightningApp" and Submit. Clear the existing code and paste the below one,

1. <aura:application >
2.     <c:CalculateTotal />
3. </aura:application>

Click on Preview or Updated Preview button in the right hand side of the component.

You can also check How to run or execute a Lightning app in Salesforce.

Short explanation of the code:

1. ui:inputNumber attributes have been declared in the component with respective aura:id of inputOne, inputTwo.

2. ui:Button attribute has been declared with "press" event, this will call c.calculate. Here calculate is the method name of the related controller.

3. ui:outputNumber attribute has been declared and value assigned as {!v.totalValue}. Here "v" denotes view.

4. On the controller side, accessed the two input value by using their respective id's.

5. Added those two values and assigned the result in totalValue attribute. This will displayed in the UI.

Note: If you are using namespace in your org, then you need to use your namespace in the place of "c" in the all above codes.


"c: is the default namespace for Lightning components"

For example,

Without namespace:

    <c:CalculateTotal />

With namespace:

    <MyOrgNameSpace:CalculateTotal />

Feel free to post your doubts as comments...!

Thanks for reading this..!