{"id":4287,"date":"2015-03-19T05:28:21","date_gmt":"2015-03-19T05:28:21","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4287"},"modified":"2015-03-19T18:56:03","modified_gmt":"2015-03-19T18:56:03","slug":"learning-lightning-component-trailhead-way","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/learning-lightning-component-trailhead-way\/","title":{"rendered":"Learning Lightning Component – Trailhead way"},"content":{"rendered":"
\"Learn<\/a>
Learn Lightning Component – Trailhead way<\/figcaption><\/figure>\n

In Previous article<\/a>, I\u00a0have introduced what is Trailhead <\/a>and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules <\/a>to be learned from it.<\/p>\n

Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I will\u00a0walk-through\u00a0“Lightning Component<\/a>” module of Trailhead.<\/p>\n

1.\u00a0Getting started with Lightning Component<\/a>\u00a0<\/strong>(+100 points)<\/p>\n

In this module, you will learn that what exactly is lightning component, Aura Framework and how it is different than visualforce?<\/p>\n

This is UI framework to develope dynamic web pages for mobile and desktop devices in Salesforce. Its used mostly for SPA (Single Page Applications). It focuses on component based developement and reusing it. You can compare Lihtning component (by Salesforce) with React (by Facebook) and Polymer (by Google).<\/p>\n

<\/p>\n

2.<\/strong> Creating Lightning Component<\/strong><\/a>\u00a0(+500 points)<\/p>\n

This module emphasizes on how to create Lightning Component using Developer console and\u00a0styling it.<\/p>\n

Lightning component can be created either by Developer console or sublime extension<\/a>\u00a0by Dave Carroll.<\/p>\n

Component bundle contains following item types :<\/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<\/p>\n

How to use External Stylesheet in Lightning Component :<\/strong><\/p>\n

To reference an external CSS resource that you\u2019ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.
\nHere\u2019s an example of using <ltng:require>:<\/p>\n

<ltng:require styles="\/resource\/resourceName"><\/pre>\n
resourceName is the Name of the static resource. Note that the framework doesn\u2019t currently support the $Resource global variable available in Visualforce.<\/p>\n
3. Defining attributes on lightning components<\/a><\/strong>\u00a0(+500 points)<\/p>\n
This is very important and basic module of lightning. Here you will learn what are attributes, their\u00a0different types and how to pass it in between different lightning components.<\/p>\n
Attributes can be used for components, applications, events and interfaces. attributes are accessed using syntax {!v.attributeName}.<\/p>\n
Attributes can be defined using <aura:attribute><\/strong> tag.<\/p>\n
Example :<\/strong><\/p>\n
\r\n<aura:component>\r\n    <aura:attribute name="num1" type="Integer" default="1"\/>\r\n    <aura:attribute name="num2" type="Integer" default="2"\/>\r\n    <aura:attribute name="sum" type="Integer"\/>\r\n    {!v.num1} + {!v.num2} = {!v.sum}\r\n\r\n    <!--Press button to add numbers and display sum-->\r\n    <ui:button label="Add Numbers" press="{!c.add}"\/>\r\n<\/aura:component>\r\n<\/pre>\n
Attribute in client side can be accessed using : component.get(“v.num1”);<\/p>\n
\r\n({\r\n    \/** Called when button is pressed to add numbers **\/\r\n    add : function(component) {\r\n        var sum = component.get("v.num1")\r\n                + component.get("v.num2");\r\n        component.set("v.sum", sum);\r\n    }\r\n})\r\n<\/pre>\n
Component Body :<\/strong><\/p>\n
You can access component body using notation {! v.body } and in javascript same can be achieved using component.get(“v.body”).<\/p>\n
\u00a04.<\/strong> How to use expressions in Lightning Component<\/strong><\/a>\u00a0(+500 points)<\/p>\n
How to use expressions to dynamically render values and making decisions and global value provider $browser, $Locale.<\/p>\n
Anything inside the {! } delimiters is evaluated and dynamically replaced when the component is rendered or when the value is used by the component. Whitespace is ignored.<\/p>\n
The resulting value can be a primitive, such as an integer, string, or boolean. It can also be a JavaScript object, a component or collection, a controller method such as an action method, and other useful results.<\/p>\n
If you want to escape {!<\/strong> , use this syntax:<\/p>\n
<aura:text value="{!"\/><\/pre>\n
This renders {! in plain text because the aura:text component never interprets {! as the start of an expression.<\/p>\n
$Browser<\/strong>
\nThe $Browser global value provider provides information about the hardware and operating system of the browser accessing the application.<\/p>\n
$Locale<\/strong>
\nThe $Locale global value provider gives you information about the browser’s locale.<\/p>\n
\u00a05.<\/strong> How to use standard and force.com components<\/strong><\/a> (+500 points)<\/p>\n
This module highlights some standard out of box Lightning components provided by Salesforce and their usage like Button, check-box, Message, Spinner etc.<\/p>\n
Use Standard existing salesforce components to speedup developement of lightning application.<\/p>\n
\n
For all available component attributes and events, see the component reference at https:\/\/<mySalesforceInstance>.lightning.force.com\/auradocs\/reference.app<\/span><\/em>, where <mySalesforceInstance> is the name of the instance hosting your org; for example, na1 .<\/p>\n<\/blockquote>\n
6.<\/strong> How to handle events in Lightning Components<\/strong><\/a> (+500 points)<\/p>\n
You will learn here how to create client side events, difference between application event and component events. Communicate between different components using events, example, Best practices and some standard and system Salesforce1 Events.<\/p>\n
7.<\/strong> Using JavaScript controller in Lightning components – Client Side Controller<\/strong><\/a>(+500 points)<\/p>\n
It teaches, How we can create components dynamically, using JavaScript API to work with components, handling field validation errors and system errors.<\/p>\n
8.<\/strong> Using Apex with Lightning Component – Server side Controller<\/strong><\/a>\u00a0(+500 points)<\/p>\n
How Apex methods can be called through JavaScript Controller and Queueing of server-side actions with examples.<\/p>\n
9.<\/strong> Debugging Lightning components<\/strong><\/a> (+100 points)<\/p>\n
When I was presenting Lightning week in Boston and Hartford, this was the interesting question asked and most of developers are facing issue on how to debug lightning components, and this part is good news for them, it unveils\u00a0all the secret of Lightning component debugging.<\/p>\n","protected":false},"excerpt":{"rendered":"
In Previous article, I\u00a0have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it. Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I will\u00a0walk-through\u00a0“Lightning Component” module of Trailhead. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[298,311,331,290],"class_list":["post-4287","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-aura","tag-lightning-component","tag-salesforce","tag-trailhead"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5113,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/merry-trailhead-and-happy-new-year-full-of-goodies\/","url_meta":{"origin":4287,"position":0},"title":"Merry Trailhead and Happy New Year full of goodies","author":"Jitendra","date":"December 24, 2015","format":false,"excerpt":"Trailhead wishes every Salesforce Admin, Developer, Business users\u00a0a very \"Merry Christmas\" and \"Happy New Year\" with lots of goodies in form of new modules and project. I have always been big fan of Trailhead and already wrote few articles previously. It has huge response, support and expectation from community. We\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Prizes - Build a Battle Station App","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/12\/Prizes-Build-a-Battle-Station-App.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/12\/Prizes-Build-a-Battle-Station-App.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/12\/Prizes-Build-a-Battle-Station-App.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/12\/Prizes-Build-a-Battle-Station-App.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":4287,"position":1},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5109,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","url_meta":{"origin":4287,"position":2},"title":"Lightning Component for Wikipedia search","author":"Jitendra","date":"January 6, 2016","format":false,"excerpt":"Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy\u00a0in Lightning components developer guide. If we attempt to use AJAX or REST API in\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Component for Wikipedia Search","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":4287,"position":3},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"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\u2026","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5426,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/new-trail-in-trailhead-navigate-the-salesforce-advantage\/","url_meta":{"origin":4287,"position":4},"title":"New Trail in Trailhead – Navigate the Salesforce Advantage","author":"Jitendra","date":"March 27, 2016","format":false,"excerpt":"Navigate the Salesforce Advantage - New learning module and project added to Trailhead","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Success Model - Trailhead","src":"https:\/\/i0.wp.com\/developer.salesforce.com\/resource\/images\/trailhead\/badges\/modules\/trailhead_module_advantage_salesforce_success_model.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4240,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/how-to-become-salesforce-admin-and-developer-trailhead-is-good-answer\/","url_meta":{"origin":4287,"position":5},"title":"How to start learning Salesforce –  Trailhead is good answer","author":"Jitendra","date":"February 9, 2015","format":false,"excerpt":"In last 3-4\u00a0years, Salesforce is well known cloud computing platform between\u00a0IT professionals and fresh college graduates. Dreamforce, well known for largest conference on planet breaking its own record every year. Salesforce is also\u00a0top Innovative company in world as per forbes. Change is inevitable - well adapted by Salesforce.\u00a0Unlike traditional languages,\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Trailhead - Data Security","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/02\/Trailhead-Data-Security.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/02\/Trailhead-Data-Security.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/02\/Trailhead-Data-Security.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/02\/Trailhead-Data-Security.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4287"}],"version-history":[{"count":14,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4287\/revisions"}],"predecessor-version":[{"id":4304,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4287\/revisions\/4304"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}