SFDC Lightning Demo
Download as PPTX, PDF0 likes260 views
Lightning is Salesforce's platform for building modern user interfaces that are optimized for mobile and desktop. It includes the Lightning Experience interface, apps, and communities. The Lightning Component Framework is a JavaScript framework that allows building reusable UI components to customize Lightning Experience. It uses JavaScript on the client-side and Apex on the server-side. Components are self-contained pieces of UI that can be reused, and interact through events. The Lightning Design System provides style guides and components to build interfaces matching Lightning Experience.
SFDC Lightning Demo
- 1. SALESFORCE LIGHTNING FRAMEWORK By – SAMAR SAHA
- 2. AGENDA 2 Salesforce Lightning Component Framework 1 What is Salesforce Lightning? 3 Quick Demo 4 Salesforce Lightning Design System (SLDS) 5 Important links to go through 6 Assignment
- 3. SALESFORCE LIGHTNING Lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce platform. Lightning includes: • Experience: A set of modern user interfaces optimized for speed. This includes the Lightning Experience, Salesforce1 Mobile app and template-based communities. • Lightning Component Framework: A JavaScript framework and set of standard components that allow you to build reusable components to customize the Lightning Experience. • Visual Building Tools: Drag-and-drop technologies for fast and easy app building & customizations. Use the Lightning App Builder to customize the Lightning Experience. • Lightning Exchange: A section of the AppExchange where you can find 70+ partner components to jumpstart your development. • Lightning Design System: Style guides and modern enterprise UX best practices to build pixel perfect apps that match the look and feel of the Lightning Experience.
- 4. WHAT IS LIGHTNING COMPONENT FRAMEWORK? • The Lightning component framework is a UI framework for developing dynamic web apps that run on both mobile and desktop devices. • It’s a modern framework for building single-page applications (SPA) • It uses JavaScript on the client side and Apex on the server side. • Derived from Open Source Aura Framework. https://github.com/forcedotcom/aura
- 5. 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, JS, or any other web-enabled code. • The details of a component’s implementation are encapsulated. This allows consumer of component to focus on building the app while the component author can innovate and make changes without breaking consumers. • Components interact with their environment by listening to or publishing events.
- 7. WHY USE THE LIGHTNING COMPONENT FRAMEWORK? The benefits are as follows – 1. Out-of-the-Box Component Set 2. Rich Component Ecosystem 3. Performance (Stateful client and stateless server arch.) 4. Event-driven architecture(Decoupling between components) 5. Faster development (Components are encapsulated) 6. Device-aware and cross browser compatibility. (Supports latest in browser technology such as HTML5, CSS3 and touch events)
- 9. IS LIGHTNING COMPONENTS BUILT ON THE MVC PATTERN? • In a word, no. There are similarities, to be sure, but it would be more correct to say that Lightning Components is View-Controller-Controller-Model, or perhaps View-Controller-Controller-Database. • Because when interacting with Salesforce, your components will have a server-side controller in addition to the client-side controller. This dual controller design is the key difference between Lightning Components and MVC.
- 10. BUNDLES Bundle is basically a folder, it’s a folder for base component along with its optional resources. 1. Lightning Component Bundle 2. Application Bundle
- 11. CREATING NEW LIGHTNING COMPONENT
- 12. JAVA SCRIPT DRIVEN MODEL
- 13. HOW CONTROLLER JS WORKS?
- 14. HOW HELPER JS WORKS?
- 15. HOW RENDERER JS WORKS?
- 16. VF PAGE RENDERING MODEL
- 18. SIMPLER VIEW
- 19. STEPS TO CREATE DOMAIN NAME Salesforce requires My Domain as a security measure to help prevent malicious attacks—just in case a security hole lies hidden deep within a third-party or custom component. • Choose your domain name • From Setup, enter My Domain in the Quick Find box, then select My Domain. • Enter a name for your domain after https:// and click Check Availability. If this name is already taken, choose another one. • Click Register Domain. Salesforce updates its domain name registries with your new domain name. When it’s done, you receive an email with a subject like, “Your Developer Edition domain ready for testing.” It takes just a few minutes. • Roll out My Domain to your org • In the activation email, click the link to log in to your Salesforce domain and return to the wizard. • Notice that the URL in the browser address bar shows your new domain name. • Click around your org to make sure that links point to your new domain. You probably haven’t created links in your DE org, so we can go on. (When creating a domain in a production org, this important step is easily overlooked.) • Click Deploy to Users, and then click OK. • Click OK.
- 20. SALESFORCE LIGHTNING DESIGN SYSTEM (SLDS) • CSS Framework + UI Library • The Design System that enables you to build applications that comply with the new Salesforce Lightning look and feel without reverse engineering the UI as custom CSS. • It is collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. • https://github.com/salesforce-ux/design-system
- 21. FAQS RELATED TO SLDS Is any JavaScript included as part of the framework? • No. The Salesforce Lightning Design System is a pure CSS framework that you can use with any front-end development framework you’d like, including Salesforce-specific technologies such as Visualforce and Lightning, as well as third-party frameworks like React or Angular. Can I use the Salesforce Lightning Design System together with Bootstrap or any other CSS framework? • Yes. All CSS selectors are prefixed with .slds- to prevent any collisions. What browsers are supported? BROWSER VERSION • Google Chrome Latest • Mozilla Firefox Latest • Safari Latest • Internet Explorer 11 • Microsoft Edge Latest
- 22. WHY WE NEED SLDS? • It has been long pending question for Salesforce. • Many Partners apps look and work great but don’t feel like Salesforce due to lack of resources. • A 3rd Party Bootstrap Salesforce theme was created and used outside, since it was not maintained by salesforce. Due to which it quickly grew out of sync with their UI design updates. • So, in order to have consistency through different UI experiences and applications, Salesforce came up with new design system i.e. SLDS.
- 23. WHERE YOU CAN USE THE DESIGN SYSTEM • Visualforce pages • Lightning pages and components made available to Salesforce1 and Lightning Experience • Mobile apps accessing Salesforce through the Mobile SDK or another API • Standalone web apps. • QUICK DEMO
- 24. FEW LIGHTNING NAMESPACES USED IN COMPONENT MARKUP Namespaces Meaning aura this namespace contains components to simplify your app logic Ex - <aura:component/>, <aura:attribute/> ui this namespace contains components for user interface elements like buttons and input fields Ex - <ui:inputNumber/> force this namespace contains components specific to Salesforce Ex - <force:inputField/> lightning This component inherits styling from buttons in the Lightning Design System. Ex - <lightning:button/> https://developer.salesforce.com/docs/atlas.en- us.lightning.meta/lightning/aura_compref_force_inputField.htm Link to Aura Ref doc – <yourdevorg>/auradocs/reference.app
- 25. QUERIES?
- 26. IMPORTANT LINKS • https://www.youtube.com/watch?v=28CuoCYjCNw • https://www.youtube.com/watch?v=amQ-Lt2a6dg • https://www.youtube.com/watch?v=JKEQRYu79BQ&t=1865s • https://developer.salesforce.com/lightning • https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm • https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_actions_call.htm • https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application_handling_phases.htm • https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_csp.htm • https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html SLDS • https://www.lightningdesignsystem.com/ • https://developer.salesforce.com/lightning/design-system
- 27. ASSIGNMENT Trail Heads – 1. https://trailhead.salesforce.com/en/modules/lex_migration_introduction 2. https://trailhead.salesforce.com/en/trails/lex_admin_implementation/modules/lex_migration_rol lout 3. https://trailhead.salesforce.com/en/modules/lightning_design_system (SLDS) Code Zip-
- 28. THANK-YOU !!