Aura Basics

Aura Basics

I have been working a lot on Salesforce Lightning framework recently and completed more than 5 big small projects in converting Salesforce classic apps into making them lightning ready. Let me summarize what I have learned recently.

What is Aura?

Aura is a UI framework for developing dynamic web apps for mobile and desktop devices.Aura supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Java on the server side.

The screenshot below merely give you a hint of the look and feel of an Aura App:

 What is an APP?
The line just above the screenshot “look and feel of an Aura APP”. The word APP(bold) is like container in Aura i.e. it holds the component which is having the fields and button in it. Let’s get into little bit technical explanation of the above screenshot. The component file will have the .cmp extension whereas App will have the .app extension.

Component aura_basic (aura_basic.cmp)


<aura:component >

<!-- Below div is used for header designing -->

<div class="slds-page-header" role="banner">

     <div class="slds-grid">

       <div class="slds-col">

         <p class="slds-text-heading--label">Aura</p>

         <h1 class="slds-text-heading--medium">Component</h1>

       </div>

     </div>

   </div>

<!-- this form is being design so as to create complete  input form -->

    <form class="slds-form--stacked">     

<div class="slds-form-element slds-is-required">

         <div class="slds-form-element__control">

             <ui:inputText aura:id="expname" label="Input Text Field"  class="slds-input" labelClass="slds-form-element__label"/>

         </div>

    </div>
    <div class="slds-form-element slds-is-required">

         <div class="slds-form-element__control">

             <ui:inputNumber aura:id="amount" label="Number Field"  class="slds-input" labelClass="slds-form-element__label"/>
         </div>

     </div>
     <div class="slds-form-element">

         <div class="slds-form-element__control">

             <ui:inputDate aura:id="expdate" label="Date Field" class="slds-input" labelClass="slds-form-element__label" displayDatePicker="true"/>

         </div>

     </div>
     <div class="slds-form-element">

         <ui:inputCheckbox aura:id="reimbursed" label="Checkbox" class="slds-checkbox" labelClass="slds-form-element__label"/>

     </div>
     <div class="slds-form-element">

         <ui:button label="Submit" class="slds-button slds-button--brand" />

     </div>
    </form>

</aura:component>

 

 APP(Aura_BasicAPP.app):

<!– “force: slds”  attribute is used to give the page as lightning effect–>

<aura:application extends=”force:slds”>

<c:aura_basic />

</aura:application> 

 

Lightning Bundle:

Now let me introduce you all to the term Lightning Bundle. Lightning Bundle basically, a collaborative name of the following files:

  • Component
  • Controller JS File (Client-Side JavaScript file)
  • Helper JS File (Server-Side JavaScript file)
  • Style File (CSS file)
  • Renderer
  • Documentation
  • SVG (Depreciated)

We basically work on the first four files (Bold). SVG is used for icons but it is outdated and salesforce now is introducing lightning icons instead.

Let’s talk about Component, Controller JS, Helper JS and Style file individually.

Component: Components are the self-contained and reusable units of an app. They represent a reusable section of the UI and can range in granularity from a single line of text to an entire app.

A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UIs.

Controller JS: A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions. Client-side controllers are surrounded by brackets and curly braces to denote a JSON object containing a map of name-value pairs.


({

myAction : function(component, event, helper){

// add code for the action

}

}) 

 

Each action function takes three parameters:

  • component—The component to which the controller belongs.
  • event—The event that the action is handling.
  • helper—The component’s helper, which is optional. A helper contains functions that can be reused by any JavaScript code in the component bundle.    

Helper JS: A helper resource is part of the component bundle and is auto-wired via the naming convention, <componentName>Helper.js. To create a helper using the Developer Console, click HELPER in the sidebar of the component. This helper file is valid within the scope of the component to which it’s auto-wired.

The following code shows you how to call the updateItem helper function in a controller, which can be used with a custom event handler.

Controller JS File :


({

newItemEvent : function(component, event, helper){

helper.updateItem(component, item, callback);

}

})

 

Helper JS FIle :


({

updateItem : function(component, item, callback){

//Update the items via a server-side action

var action = component.get(“c.saveItem”);

action.setParams({“item” : item});

//Set any optional callback and enqueue the action

if (callback){

action.setCallback(this, callback);

}

$A.enqueueAction(action);

}

})

 

CSS File : Style your components with CSS. Let’s look at a sample helloHTML.cmp component. The CSS is in helloHTML.css.

 

Component Source:


<aura:component>

<div class=”white”>

Hello, HTML!

</div>

<h2>Check out the style in this list.</h2>

<ul>

<li class=”red”>I’m red.</li>

<li class=”blue”>I’m blue.</li>

<li class=”green”>I’m green.</li>

</ul>
<br/>
</aura:component>

CSS Source:


.THIS {

background-color: grey;

}

.THIS.white {

background-color: white;

}

.THIS .red {

background-color: red;

}

.THIS .blue {

background-color: blue;

}

.THIS .green {

background-color: green;

}

 

Complete Example:
Let’s have a glimpse of Aura where on submitting the Account Name you will get all the contacts related to that Account.

APPLICATION:


<aura:application extends=”force:slds”>

<c:GetContactList />

</aura:application>

 

COMPONENT:


<aura:component Controller=”ContactListAura”>

  <aura:attribute name=”contList” type=”Object[]” />

<div class=”slds-page-header” role=”banner”>

<div class=”slds-grid”>

<div class=”slds-col”>

<p class=”slds-text-heading–label”>Aura</p>

<h1 class=”slds-text-heading–medium”>Component</h1>

</div>

</div>

</div>

<form class=”slds-form–stacked”>

<div class=”slds-form-element slds-is-required”>

<div class=”slds-form-element__control”>

<ui:inputText aura:id=”accName” label=”Input Text Field”  class=”slds-input” labelClass=”slds-form-element__label” placeholder=”Enter Account Name”/>

</div>

</div>

<div class=”slds-form-element”>

<ui:button label=”Submit”  class=”slds-button slds-button–brand” press=”{!c.getSubmit}” />

</div>

<table class=”slds-table slds-table_bordered slds-table_cell-buffer”>

<thead>

<tr class=”slds-text-title_caps”>

<th scope=”col”>

<div class=”slds-truncate” title=”Name”>Name</div>

</th>

</tr>

</thead>

<tbody>

<aura:iteration items=”{!v.contList}” var=”item”>

           <tr>

                <td>{!item.Name}</td>

            </tr>

    </aura:iteration>

</tbody>

</table>

</form>

</aura:component>

 

CONTROLLER:


({

getSubmit : function(component, event, helper){

helper.getContactListHelper(component, event, helper);

},

})

 

HELPER:


({

getContactListHelper : function(component, event, helper) {

var action = component.get(“c.getContactLists“);

action.setParams({

“nm” : component.find(“accName“).get(“v.value”)

});

action.setCallback(this, function(a){

component.set(“v.contList“, a.getReturnValue());

console.log(‘v.contList ‘+component.get(“v.contList”));

});

$A.enqueueAction(action);

}

}

})

APEX CLASS:


public class ContactListAura {

@AuraEnabled

public static List<Contact>getContactLists(String nm){

system.debug(‘nm–> ‘+nm);

if(!String.IsBlank(nm)){

return [SELECT ID,Name FROM CONTACT WHERE Account.Name=:nm];

}

return null;

}

}

 

Flow of Page :

<aura:attribute name=”contList” type=”Object[]” />

The very first line after <aura:component> will be use to display the data on the Component. When I have entered the Account Name to the Input Text and click “Submit”. It has evoked getSubmit method of Client-Side JS i.e. Controller JS method.

In Controller JS.

helper.getContactListHelper(component, event, helper);

will call the HELPER JS method i.e. Server-Side JS. In Helper JS the line

var action = component.get(“c.getContactLists”);

Give the reference of the AuraEnabled method in the Apex class (We have set the Controller attribute of aura:component tag with the name of ApexClass Name.)


action.setParams({

           “nm” : component.find(“accName”).get(“v.value”)

       });

 

Will set the set the Parameter of Apex Method with the Value which we have inserted in the input text having aura Id as accName.


action.setCallback(this, function(a){

           component.set(“v.contList”, a.getReturnValue());

           console.log(‘v.contList ‘+component.get(“v.contList”));

       });

 

This line will set the variable which we will be using on the component to display the data.

In the above snippet, “this” keyword is used to refer the current component which has invoked the complete execution.

$A.enqueueAction(action);

This line is most important as it is responsible for getting the returning result from apex class and set it to the attribute/variable which we are going to use the component.

Note: Alphabet v is used to access variables whereas c is used to access controllers.

Pin It on Pinterest