Customizing Salesforce User Interfaces with Lightning Components
•
2 likes•1,516 views
Beginning with Salesforce1, Lightning Components are being used to create and update user interfaces company-wide. Join us to learn how to use the Lightning Components that you develop or install from AppExchange to customize these UIs in ways that were previously difficult, or impossible. This session is aimed at intermediate users who have some experience with Lightning Components.
Report
Share
Customizing Salesforce User Interfaces with Lightning Components
- 1. Customizing Salesforce UIs with Lightning Components Skip Sauls Director of Product Management ssauls@salesforce.com @SkipSauls Doug Chasman Distinguished Engineer, Force.com Architect dchasman@salesforce.com @dougchasman
- 2. Safe harbor 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. Safe Harbor
- 3. Overview Containers & Environments Details Demo Q&A Agenda Lightning Customizations
- 4. Lightning Experience Salesforce1 Mobile Salesforce Classic Communities Mobile SDK Hybrid Apps Standalone Lightning Apps External Sites Lightning Components Lightning Apps Lightning Component Tabs Lightning Pages Lighting Components for Visualforce Lightning Out* Lightning Extensions* Containers & Environments Lightning Customizations * Pre-GA in Winter ‘16
- 5. Modular, reusable, and extensible, forming the basis of modern Salesforce user interfaces. Architecture • Component Bundles – Server-side resources, including XML, CSS, JavaScript, and SVG • Component Instances – Client-side instances comprised of HTML, CSS, and JavaScript • Events – Application- or component-scoped events with optional payload parameters • Interfaces – Indicates that a component adheres to the specified contract, with or without attributes • Attributes – Define the shape of the component, with strong-typing and default values • Scope – Indicates whether the component or attribute is available only to package or to entire application Lightning Components Lightning Customizations
- 6. Top level containers for Lightning Components. • URL-addressable, e.g, https://gs0.lightning.force.com/myns/demo.app • May utilize a template for controlling style, splash screen, persistence, etc. • Does not define a particular style, navigation scheme, etc. • Examples include Lightning Experience, Salesforce1 Mobile, App Builder, Process Builder Lightning Apps Lightning Customizations
- 7. Containers for using Lightning Components as tabs/pages. • Programmatic creation of pages • Implements the force:appHostable interface • Defined by the administrator as tabs • Used in the Salesforce1 Mobile App as tabs in the left-nav • Used in Lightning Experience in Application Groups (tabsets) • May be used in standalone apps, interface is simply a marker Lightning Component Tabs Lightning Customizations
- 8. Containers for using Lightning Components as tabs/pages. • Declarative creation of pages • Implements the flexipage:availableForAllPageTypes interface • Created by administrator using Lightning App Builder • Used in the Salesforce1 Mobile App as tabs in the left-nav • Used in Lightning Experience in Application Groups (tabsets) • Future releases will provide • Further customization of Lightning Experience • Custom templates Lightning Pages Lightning Customizations
- 9. Lightning App Builder Lightning Customizations Drag & Drop Build with standard and custom Lighting Components Any Device Design for every screen from one canvas
- 10. Templates provide customers with near-turnkey community solutions that can be easily customized and deployed with Community Builder Templates consist of: - Pages: canvas for building UI, has distinct URL, layout - Components: renders content, input data - Branding: general properties including color palettes and fonts BRANDING Color palette, logo, fonts PAGE Main canvas COMPONENT Renders content Communities – Templates Lightning Customizations
- 11. 3a. select from standard components 3b. Build your own custom Lightning components or reuse Partner built components 3. Add Lightning Components to build your page 2. Intuitively drag & drop components onto page regions 1. Create New Page Community Builder – Design new Pages with Drag & Drop Components Lightning Customizations
- 12. Lightning Components may be used in Visualforce/Salesforce Classic Powered by Lightning Out Lightning Components for Visualforce Lightning Customizations
- 13. Lightning Components for Visualforce Lightning Customizations
- 14. Lightning Components can now be used in nearly any remote web container Requirements • Valid Salesforce session ID (SID), for example from OAuth • Ability to modify the generated markup for the remote site Supports • Secure browser (HTTPS) • Cross-Origin Resource Sharing (CORS) Lightning Components for Visualforce is powered by Lightning Out Availability • Lightning Components for Visualforce is GA in Winter ‘16 • Lightning Out is in pre-release in Winter ‘16, with plans to be GA in Spring ‘16 Lightning Out Lightning Customizations
- 15. Lightning Out – Platforms Lightning Customizations
- 16. Lightning Out – Frameworks, Toolkits, and Libraries Lightning Customizations ? XXX
- 17. Dynamic, runtime substitution of standard components with Lightning Components Designed for use with the Salesforce1 Mobile App, and future UIs Target users are admins who will install and configure the components as extensions Complements and completes the Lightning Components framework Extensions (Future) Lightning Customizations
- 18. Extensions (Future) Lightning Customizations Object: Account Field: Rating Lightning Component: customRatingView Mode: View Custom Field Extension
- 19. Demos
- 20. Q&A
- 21. Thank you