{"id":4461,"date":"2015-05-19T03:58:03","date_gmt":"2015-05-19T03:58:03","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4461"},"modified":"2015-08-26T16:18:40","modified_gmt":"2015-08-26T16:18:40","slug":"getting-started-with-basics-of-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","title":{"rendered":"Getting started with basics of Lightning Component"},"content":{"rendered":"

As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn’t want to stay behind. If we see trend, all major platform has introduced component based design like Polymer<\/a>, React<\/a>, Web Components<\/a>, Angular 2<\/a>.<\/p>\n

We will be discussing basics of Lightning components in this post and how Lightning application, component, controller, helpers and Apex controllers are connected with each other.<\/p>\n

Lightning components are\u00a0based on open source UI framework for web development<\/a>. Every Salesforce organization already has aura documents available in their instance and can be opened by navigating to http:\/\/instance.salesforce.com\/auradocs<\/span>. You can also visit my other blog post explaining FAQ of lightning<\/a>\u00a0and Lightning Trailhead module<\/a>.<\/p>\n

In below image, I have tried to explain at high level, how different JavaScript files are related in Lightning components, there are many other parts as well, but I tried to keep it short and simple.<\/p>\n

\"Getting<\/a>
Getting started with lightning components<\/figcaption><\/figure>\n

<\/p>\n

Component Bundles<\/strong><\/p>\n

Lightning components consists of many resources as explained in below table.<\/p>\n\n\n\n\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t
Resource<\/th>Resource Name<\/th>Usage<\/th>\n<\/tr>\n<\/thead>\n
Component or Application<\/td>sample.cmp or sample.app<\/td>The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource.<\/td>\n<\/tr>\n
CSS Styles<\/td>sample.css<\/td>Styles for the component.<\/td>\n<\/tr>\n
Controller<\/td>sampleController.js<\/td>Client-side controller methods to handle events in the component.<\/td>\n<\/tr>\n
Design<\/td>sample.design<\/td>Required for components used in the Lightning App Builder or Lightning Pages.<\/td>\n<\/tr>\n
Helper<\/td>sampleHelper.js<\/td>JavaScript functions that can be called from any JavaScript code in a component\u2019s bundle.<\/td>\n<\/tr>\n
Documentation<\/td>sample.auradoc<\/td>A description, sample code, and one or multiple references to example components.<\/td>\n<\/tr>\n
Renderer<\/td>sampleRenderer.js<\/td>Client-side renderer to override default rendering for a component.<\/td>\n<\/tr>\n
SVG<\/td>sample.svg<\/td>Custom icon resource for components used in the Lightning App Builder.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

Lightning Application<\/strong><\/p>\n

Lightning applications are standalone page, which contains many other lightning components. Its mark up is similar to HTML as shown in above image. To create Lightning application, open developer console, navigate to “File | New | Lightning Application”. It will prompt for “Name” and “Description”, provide proper information.<\/p>\n

\n

This post is written in order of “execution flow” as depicted in above image. However, to save code in your Salesforce instance, you need to create it in opposite direction. So, basically you need to start with step 5.<\/p>\n<\/blockquote>\n

AllContacts.app<\/span><\/p>\n

\r\n<aura:application >\r\n    <link href='\/resource\/bootstrap\/' rel="stylesheet"\/>\r\n    <c:AllContactsComp \/>\r\n<\/aura:application>\r\n<\/pre>\n
In above lightning application, I have used Bootstrap to style my application, saved in static resource by name “bootstrap”. This application has only one Lightning component named “AllContactsComp”.<\/p>\n
Lightning Component<\/strong><\/p>\n
Lightning components can be created by navigating to “File | New | Lightning Component” in developer console. It can contain “HTML + Aura components<\/a>” supported by\u00a0Salesforce.<\/p>\n
\"Lightning<\/a>
Lightning Components – Image 2<\/figcaption><\/figure>\n
As shown in above image, Lightning component consists of Controller ( JS ), Helper ( JS ), Style ( CSS ), Documentation, Rerenderer, design and SVG. We will be using only Controller and Helper in this post.<\/p>\n
AllContactsComp.cmp<\/span><\/p>\n
\r\n<aura:component controller="ContactAura">\r\n    <aura:attribute name="contactRows" type="Object[]"\/>\r\n    <aura:handler name="init" value="{!this}" action="{!c.doInit}" \/>\r\n    <div class="container">\r\n        <p>\r\n        \t<b> List of Contacts <\/b>\r\n        <\/p>\r\n        <table class="table table-bordered table-hover">\r\n            <thead>\r\n                <tr>\r\n                    <th><strong> Id <\/strong><\/th>\r\n                    <th> <strong>  Name <\/strong> <\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody>\r\n                <aura:iteration var="cell" items="{!v.contactRows}">\r\n                    <tr>\r\n                        <td> <a href="{! '\/'+cell.Id}"> {!cell.Id} <\/a> <\/td>\r\n                        <td> {!cell.Name}  <\/td>\r\n                    <\/tr>\r\n                <\/aura:iteration>\r\n            <\/tbody>\r\n        <\/table>\r\n \t<\/div>\r\n<\/aura:component>\r\n<\/pre>\n