Lightning Components Explained
•
5 likes•9,205 views
Learn about the Lightning Components Framework which helps you develop component based apps which are compatible with Salesforce1 and Lightning Experience. This presentation was presented at the New Delhi Salesforce DG and #SalesforceSaturday session on 23rd April, 2016 in New Delhi.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Lightning Components Explained
Similar to Lightning Components Explained (20)
More from Atul Gupta(8X)
More from Atul Gupta(8X) (20)
Recently uploaded
Recently uploaded (20)
Lightning Components Explained
- 1. New Delhi Salesforce Developer User Group Lightning Components: Explained LEARN . SHARE . CELEBRATE . SALESFORCE
- 2. Welcome Awesome Developers !! • This is our 2nd New Delhi Salesforce DG Meetup • 4th Session of #SalesforceSaturday • 1st Offline #SalesforceSaturday Session
- 3. Thank you Nagarro and Salesforce Team • Nagarro is a custom software development and business consulting company that provides business consulting and technology services to its clients. • It is headquartered in San Jose, California and has its primary development center in Gurgaon, in the National Capital Region of India. • Since 2011, Nagarro is a subsidiary of Allgeier,[1] a Frankfurt listed (FWB: AEI) leading German IT company.
- 4. What is Salesforce Saturday? • First started by Stephanie Herrera in Austin, Texas. • Every other Saturday we will meet either online or offline to discuss, learn about Salesforce, prepare for Salesforce Certifications. • Helping each other learning new stuff. • Volunteer based program where anyone can share any kind of expertise they might have in Salesforce.
- 5. What is Salesforce Saturday? Stephanie Herrera • Salesforce MVP �� Founder of #SalesforceSaturday Austin, Texas • She was recently interviewed on the #ButtonClickAdmin Podcast. Listen to the Podcast here: https://admin.salesforce.com/always-learning- stephanie-herrera Follow her on Twitter: @steph_herrera_
- 6. Who the hell am I? Atul Gupta • Organizer of New Delhi Salesforce DUG • Organizer of #SalesforceSaturday, Delhi Chapter • Active on Salesforce Success Community • Blogging at www.cloudvandana.com • Independent Salesforce Consultant/Developer • Find me on Twitter @atul31Gupta
- 7. Who the hell am I? Atul Gupta Success Community https://success.salesforce.com/profile?u=005300000089vZeAAI Twitter http://twitter.com/atul31gupta LinkedIn https://in.linkedin.com/in/atul31gupta Facebook Page https://www.facebook.com/atul31gupta Blog www.cloudvandana.com
- 8. Who wants to get Certified? Let’s form Study Groups Email me: To: gupta.atul31@gmail.com Subject: <Certification Name> Body: Full Name Current Experience and Company Phone Number • I will create groups for you guys to collaborate and share notes.
- 9. Who wants to get Certified? Any suggestions where these groups can be created? 1. Success Collaboration Community itself 2. LinkedIn 3. Separate Chatter org
- 10. Who wants to get Certified? We need volunteers for these groups You will be Mentor of respective groups App Builder : Atul Gupta(@atul31gupta) Admin : Atul Gupta Advanced Admin : Developer I : Saurabh Gulati(@ssg_1984) Developer II : Atul Gupta
- 11. What is Salesforce Lightning? It is not Lightening It is not Lighting It is definitely Lightning
- 12. What is Salesforce Lightning? Lightning includes • Lightning Components Framework which is helps you develop component based apps which are compatible with Salesforce1 and Lightning Experience. • Lightning App Builder allows you to build apps visually without any code.
- 13. What is Lightning Component Framework? • Lightning Components Framework is a UI framework for developing dynamic apps that run both on Mobile and Desktop. • It enables us in creating Single Page Applications. • It uses Javascript on Client side and Apex on Server side. • Derived from Open Source Aura Framework
- 14. Benefits of Lightning Component Framework? • Out of the Box components Set. • Build once and use everywhere Desktop, Salesforce1, Lightning Experience, Communities. • Faster Development. Create components and then easily assemble them to create your apps. • Stateful client and stateless server. Makes the application fast and highly optimized.
- 15. Lightning Components vs MVC • Lightning Components are somewhat similar to Visualforce Components. • You can use components in other components and these components can interact with each other via Events. • MVC • Model = Objects • View = Visualforce • Controller = Apex Code
- 16. Lightning Components vs MVC Lightning Apps/Components • Model = Objects • View = Lightning Components Client side controller Helper CSS Styles • Controller = Apex Code • Lightning Components are case-sensitive
- 17. Lightning Component Bundle A component bundle contains a component or an app and all its related resources. • Lightning Components or Apps e.g. sample.cmp or sample.app • (the only required component in the bundle) • Client side controller e.g. sampleController.js • Helper e.g. sampleHelper.js • CSS Styles e.g. sample.css • and more • All related resources are named automatically. You just need to give the App/Component a name.
- 19. Components • They represent a reusable section of the UI, and can range in granularity from a single line of text to an entire app. • Framework consists of a set of prebuilt components. • You can just assemble the components and create an App.
- 20. Events • Event driven Programming where any component can subscribe to an Application level or component event they can see. • Events are either fired by the user interacting with the UI like Browser Events, onclick, press, etc or by javascript controllers to communicate with other components • There are 2 types of Events: • Component events are handled by the component itself or a component that instantiates or contains the component. • Application events are handled by all components that are listening to the event.
- 21. Events
- 23. What you need to develop a Lightning App? • A wall to bang your head in • Aspirin • A Beer • Someone to take out your frustration on
- 24. What you need to develop a Lightning App? • A Salesforce Org • Define a custom Salesforce Domain Name https://help.salesforce.com/HTViewHelpDoc?id=domain_name_o verview.htm • Register a NameSpace Prefix(only required for Managed Packages) • We need to rely on CSS frameworks like Bootstrap and Lightning Design System to provide a consistent look and feel to our App/Component.
- 25. Expense Tracker Application The expense tracker app performs three distinct tasks: • load the expense data and counters on app initialization • take in user input to create a new record and update the view • handle user interactions by communicating relevant component data via events
- 26. Let’s create our Lightning App • We need an object to work with. • Please install Expenses App Package in your org. https://login.salesforce.com/packaging/installPackage.apexp?p 0=04t90000000Rmdg • Create a couple of records for the Expenses Object. • Install Lightning Design System 1.00 https://login.salesforce.com/packaging/installPackage.apexp?p0 =04t61000000kZwH
- 27. Let’s create our Lightning App
- 28. Let’s create our Lightning App • We will be creating an app called “Expense Tracker”. • The code we will be using is all there in the Lightning Components Developer Guide’s quick start section. https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/qs_intro.htm
- 29. Let’s create our Lightning App • Open Developer Console • Go to File => New => Lightning Application • Enter “expenseTracker” in the Name. Give a Description and click “Submit” • Copy and paste the Code from Step 1 Make sure to change the version of resource included from /slds090/ to /slds100/ • Save your changes and click Preview in the sidebar to preview your app Congrats !! You have created your first Lightning App
- 30. Let’s create our Lightning App Or Navigate to https://<myDomain>.lightning.force.com/<namespace>/expense Tracker.app <myDomain> is the name of your custom Salesforce domain
- 31. Let’s create the Component • Go to File => New => Lightning Component • Enter “form” in the Name field. Give a suitable description and you are click “Submit”. • Copy and paste the code in Step 2 Make sure to change the version of resource included. • You need a Lightning App to see Lightning Component on Desktop. • Implements=“appHostable” The appHostable interface makes the component available as a custom tab and hence available in Salesforce1 App.
- 32. Let’s include Component to App • Update expenseTracker App with code from Step 2 i.e. include <c:form> in the App. • Add css to the Style resource of the App • Save changes and click “Update Preview” • We just added the form Lightning component to the Lightning App
- 33. Lightning Component Code • ltng:require To reference a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup. • aura:attribute Describes an attribute available on an app, interface, component, or event. Component attributes are like member variables on a class in Apex
- 34. Lightning Component Code • ui:inputText Represents an input field suitable for entering a single line of free-form text. A ui:inputText component represents a text input field, which is rendered as an HTML input tag of type text. To render the output from a ui:inputText component, use the ui:outputText component. This is a basic set up of a text field. • ui:inputNumber An input field for entering a number, taking advantage of client input assistance and validation when available. A ui:inputNumber component represents a number input field, which is rendered as an HTML input tag of type text. This example shows a number field, which displays a value of 10.
- 35. Lightning Component Code • ui:inputDateTime An input field for entering a date and time. A ui:inputDateTime component represents a date and time input field, which is rendered as an HTML input tag of type text. The value is displayed in the default format specified by the language locale of the browser. • ui:inputCheckbox Represents a checkbox. Its behavior can be configured using events such as click and change. A ui:inputCheckbox component represents a checkbox whose state is controlled by the value and disabled attributes. It's rendered as an HTML input tag of type checkbox. To render the output from a ui:inputCheckbox component, use the ui:outputCheckbox component.
- 36. Lightning Component Code • ui:button Represents a button element. A ui:button component represents a button element that executes an action defined by a controller. Clicking the button triggers the client-side controller method set for the press event. The button can be created in several ways. • ui:outputNumber Displays the number in the default or specified format. Supports up to 18 digits before the decimal place. A ui:outputNumber component represents a number output that is rendered as an HTML span tag. This component can be used with ui:inputNumber, which takes in a number input. ui:outputNumber retrieves the locale information and displays the number in the given decimal format. To display a number, you can use an attribute value and bind it to the ui:outputNumber component.
- 37. Lightning Component Code • aura:iteration Renders a view of a collection of items. Supports iterations containing components that can be created exclusively on the client-side. • aura:component The root of the component hierarchy. Provides a default rendering implementation.
- 38. Component Extension and Client side controller • Create server side controller ExpenseController. • Take the Code from Step 3 • Add the controller attribute that references the above class to the form.cmp • Add init handler to the load your data • Add formcontroller client side controller to the bundle
- 39. Component Extension and Client side controller A client-side controller handles events within a component and can take in three parameters: • the component to which the controller belongs • the event that the action is handling • the helper if it’s used. • A helper is a resource for storing code that you want to reuse in your component bundle, • providing better code reusability and specialization
- 40. Add Helper to the Bundle • Click on the Helper resource in the right hand sidebar in the lightning component. • Copy the helper code from Step 3
- 41. Handler and Events • Carry on with the rest of the steps as per the Lightning Components Developer Guide Make sure to change the version of resource included from /slds090/ to /slds100/
- 42. Application Lifecycle User initiated Events 1. User clicks a button or interacts with a component, triggering a browser event. For example, you want to save data from the server when the button is clicked. 2. The button click invokes a client-side JavaScript controller, which provides some custom logic before invoking a helper function. 3. The JavaScript controller invokes a helper function. Note that a helper function improves code reuse but it’s optional for this example. 4. The helper function calls an Apex controller method and queues the action.
- 43. Application Lifecycle 5. The Apex method is invoked and data is returned. 6. A JavaScript callback function is invoked when the Apex method completes. 7. The JavaScript callback function evaluates logic and updates the component’s UI. 8. User sees the updated component.
- 44. Application Lifecycle Components/Application Initiated Events: • Consider an attribute value on a component that changes without a user action directly causing it, • which then automatically fires a change event. When the attribute value changes, the component that • registers a change event handles this event by invoking a JavaScript controller that contains custom logic, • which could then proceed from step (3) onwards to retrieve data from the server.
- 45. Rendering Lifecycle The rendering lifecycle automatically handles rendering and rerendering of components whenever the underlying data changes. Here is an outline of the rendering lifecycle. 1. A browser event triggers one or more Lightning events. 2. Each Lightning event triggers one or more actions that can update data. The updated data can fire more events. 3. The rendering service tracks the stack of events that are fired. 4. When all the data updates from the events are processed, the framework rerenders all the components that own modified data.
- 46. Tips to work with Lightning Components 1. Use separate names for client side and server side actions, hard to debug bugs can occur 2. Action States https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/controllers_server_actions_call.htm 3. Debug JavaScript Code https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/aura_debug_mode.htm 4. Set validation errors https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/js_validate_fields.htm
- 47. Tips to work with Lightning Components 5. Always try to use COMPONENT events rather than APPLICATION events Component events can only be handled by components above them in the containment hierarchy so their usage is more localized to the components that need to know about them https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/qs_aotp_app_step6_events.htm 6. Any browser DOM element event starting with on, such as onclick or onkeypress, can be wired to a controller action. https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/js_client_side_controller.htm
- 48. Tips to work with Lightning Components 7. Put methods that you want to reuse in your component bundle's helper. Methods in Helper can be used by controllers, renderers in the bundle 8. There are two very important guidelines for accessing the DOM from a component or app. You should never modify the DOM outside a renderer. However, you can read from the DOM outside a renderer. Use expressions, whenever possible, instead of trying to set a DOM element directly.
- 49. What has not been covered? 1. Override rerendering 2. Creating Componets for Salesforce1 and Lightning Experience 3. Application events 4. Styling Apps, Design Tokens 5. Component Documentation 6. Lightning Component Inspector To Study about these topics and more…please refer Lightning Components Developer Guide
- 50. Thank You Thank you for attending the session.
- 51. Follow New Delhi SFDC DUG Twitter @newdelhisfdcdug Meetup.com http://www.meetup.com/New-Delhi-Salesforce-Platform- Developer-User-Group Success Community http://sforce.co/1oc0lQA
- 52. Reach out to me !! Email gupta.atul31@gmail.com Twitter http://twitter.com/atul31gupta LinkedIn https://in.linkedin.com/in/atul31gupta Facebook Page https://www.facebook.com/atul31gupta Blog www.cloudvandana.com