Developers Introduction To Lightning
- 1. Developers Introduction To Lightning From 0 to App chrisbacon@brightgen.com @ChrisBacon85 Chris Bacon Developer @ Brightgen
- 2. Forward-Looking Statements Statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
- 3. Lightning App • Top level component that contains other components Component • HTML Markup • Lightning Tags (Aura, UI) • Other Components Events • Custom events (Component, Application) Building Blocks
- 4. Aura Bundle Controller • Javascript controller (treat this as your event handler) Helper • Javascript helper – utility methods for the component CSS • Stylesheet for the bundle Key Components
- 9. Component
- 10. Component
- 11. Component
- 16. Javascript Helper Calling Server Side
- 17. Apex Controller
- 19. Events
- 20. Custom Events Component • Component events will publish to any parent components listening for the event Application • Application events will publish to any component listening for the event Component or Application
- 21. Events
Editor's Notes
- #3: Talk Track Before I begin, just a quick note that you should base your purchasing decisions on products and services that are currently available. Key Takeaway Salesforce is a publicly traded company. Customer should make buying decisions only on the products commercially available.
- #4: During this session we will look at the following key components used during lightning development and how these components interact with one another Lets have a quick look at these components and get a better understanding of where they fit in I have created a small lightning app which is made up of these key components, lets have a quick look at what that looks like
- #5: During this session we will look at the following key components used during lightning development and how these components interact with one another Lets have a quick look at these components and get a better understanding of where they fit in I have created a small lightning app which is made up of these key components, lets have a quick look at what that looks like
- #8: Top level component, which contains 2 other components, the product search and the mycart.
- #10: Lets have a look at the top of our cmp Just like VF you specify your apex controller for your cmp If you want to include any resources for use within your component you can do that using the ltng require tag Unlike VF development where you specify your variables in your ctrl, in lightning you specify your variables at cmp level Name, Type, Default As I am using a custom lightning event I need to tell the component that we want to use it, we do this by registering the custom event at cmp level
- #11: Working vars which we specified at the top Searchterm Input field, auraid allows us to grab the element in JS easily, no more jquery selectors Referencing vars using v. Rendered flag in VF is now auraif Lets look at the rest of the component
- #12: Aura iteration replaces apex:repeat Onclick we want to call the js controller method Add id to the button so we know which product we want to add to our basket Lets have a look at our js controller
- #14: JS ctrl is nice and simple and simply farms off the requests to our js helper which does the heavy lifting Lets have a quick look at how we search for the products when the user clicks search
- #16: Grab element using find on auraid – useful if we want to add error messages to the element Grab Value using get Built in utility classes to save us reinventing the wheel isempty Errors is a Standard attribute on UI elements If our value is not empty we want to go and query for our products, lets look at how we make a request server side from our helper
- #17: Get ref to apex method Set params Ref to helper – this keyword Set a callback action – what we want to happen when the server returns Queue the request on the stack Lets look server side
- #18: Methods must be aura enabled Not all return types are supported – go and look at documentation Not all Param types are supported – id Lets look at how we handle this response in our helper
- #19: Get response Check response Get the return value from the server Update our results collection – auto redraws ui Once our results have redrawn we have the option to add to the cart, this is achieved using custom lightning events, lets have a quick look at lightning events
- #21: I used a application event as the 2 components are at the same level in the tree, lets look at the event
- #22: Specify application or component Add our attributes We register with product search and listen on cart, lets look at how we now fire that event when adding a product
- #23: In our cmp we registered the event Button fires event We can get the product id from the event, we have passed to the helper Get the custom event Set the params and fire the event, lets look at how we handle the event on the cart
- #24: Listner on the cart Pass the event to helper Finish!