Downloaded 150 times
Uploaded bySalesforce Developers
Lightning Experience with Visualforce Best Practices
The document discusses best practices for using Visualforce within the Lightning Experience, highlighting essential adjustments for compatibility and functionality. It addresses forward-looking statements about potential risks and uncertainties related to Salesforce's product and service availability, and provides strategies for integrating Visualforce with Lightning components. Additionally, it emphasizes the importance of early testing and outlines migration approaches for existing Visualforce pages to align with business strategies in the Lightning framework.
More Related Content
Similar to Lightning Experience with Visualforce Best Practices
Lightning Experience with Visualforce Best Practices
- 1. Lightning Experience with VisualForce bestpractices Shashank Srivatsavaya Senior Developer Advocate @shashforce
- 2. Lightning Experience withVisualForce best practices Keeping VisualForce in context with Lightning Experience and Lightning Components Shashank Srivatsavaya Senior Developer Advocate @shashforce
- 3. Forward-Looking Statements Statement underthe 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.
- 4.
- 5. Summer ‘16 ReleaseDates • May 6th and 7th – Sandboxes upgraded • May 20th – NA44 and NA45 upgraded • June 3rd – NA6,7,8,9,17,18,22,28,29,31,EU5 upgraded • June 8th and 9th – Release Readiness Live Broadcasts • June 12th and 13th – All other instances, Summer ‘16 fully live www.salesforce.com/customer-resources/releases/summer16/ Visualforce in LEx, GA with Summer ‘16 Previously beta with Spring ‘16
- 6.
- 7. Run a Visualforcepage from the app launcher Using Visualforce in Lightning Experience “Just Works”, mostly
- 8. Add a Visualforcepage to the Navigation Menu Using Visualforce in Lightning Experience “Just Works”, mostly
- 9. Display a Visualforcepage within a standard page layout Using Visualforce in Lightning Experience “Just Works”, mostly
- 10. Add a Visualforcepage as a component in the Lightning App Builder Using Visualforce in Lightning Experience “Just Works”, mostly
- 11. Launch a Visualforcepage as a Quick Action Using Visualforce in Lightning Experience “Just Works”, mostly
- 12. Override standard/custom buttons/linkswith Visualforce. (No JavaScript buttons yet) Using Visualforce in Lightning Experience “Just Works”, mostly
- 13.
- 14. • Classic UIDevelopment mode footer is not available in LEx UI • /apex/vfpagename shows the page in Classic UI • To test in LEx, create a Visualforce tab and add it to an App • Test in multiple environments: Classic, LEx, Salesforce1 • Don’t wait till the end. Test Early, often, everything! Developing Visualforce for Lightning Experience Some subtle differences…
- 15. Unlike in ClassicUI, • VF does NOT own the whole page in LEx • VF runs in an iframe inside the “one/one.app” LEx container • “window.location” will not work • Use built-in “sforce.one” javascript utility (unavailable in Classic UI) for navigation • <apex:page> “showHeader” and “showSidebar” Attributes Are Always FALSE Visualforce in Classic UI v/s Lightning Experience VF app container v/s LEx app container
- 16. • Use globalvariables in Visualforce expressions to adapt your pages to Lightning Experience, Salesforce Classic, and Salesforce1. • Use $User.UITheme to get user’s UI theme “preference” • Use $User.UIThemeDisplayed to get the user’s “current UI context”. • In Apex, use equivalent system methods UserInfo.getUiTheme() and UserInfo.getUiThemeDisplayed() • Through SOQL or API, use the field “UserPreferencesLightningExperiencePreferred” on the User object. This only gives user’s “preference”, not “current UI context”. Not recommended, but it’s there Detecting the UI Where am I? Classic or LEx or SF1 or the century old basic UI?
- 17. • Theme1—Obsolete Salesforcetheme • Theme2—Salesforce Classic 2005 user interface theme • Theme3—Salesforce Classic 2010 user interface theme • Theme4d—Modern “Lightning Experience” Salesforce theme • Theme4t—Salesforce1 mobile Salesforce theme • PortalDefault—Salesforce Customer Portal theme • Webstore—Salesforce AppExchange theme Detecting the UI UITheme and UIThemeDisplayed possible values
- 18. • PageReference redirectionworks like a charm, part of “Just Works” • However, consider using modern navigation, like the sforce.one utility • DON’T use “window.location”, doesn’t work! • Try not to use static URLs, like link = '/' + accountId + '/e’ • VF markup example: use !URLFOR($Action.Contact.Edit, recordId)} • Javascript example: use sforce.one.navigateToSObject(recordId) Visualforce navigation in Lightning Experience What’s different and what’s not!
- 19. • Visualforce usingstandard style, looks the same in LEx as well. • Adding and changing style in VF is the same as in Classic UI, “Just Works” • For new Visualforce pages, consider using the “Salesforce Lightning Design System” • For existing Visualforce pages, don’t worry too much about changing styles to suit LEx, watch out for LEx’s further evolution Styling Visualforce for Lightning Experience Visual design considerations
- 20. • Lightning ExperienceHeader and Navigation Menu Can’t Be Suppressed • Salesforce Classic Header and Sidebar are Always Suppressed in Lex • Not recommended to use <apex:iframe> in VF for LEx, avoid nested iframes complications • LEx Home Page doesn’t automatically show Visualforce which is part of Classic UI Home Page. Any VF should be explicitly added to the LEx Home Page. • <apex:relatedList> support based on whether the object is supported What else to look out for? Other considerations for Visualforce in Lightning Experience
- 21.
- 22. • Lightning Componentscan be added to Visualforce using a mechanism of the “Lightning Out” feature • Lightning Out allows including a Lightning Component inside any external web application outside a Salesforce org. Lightning inside Visualforce Use Lightning Components inside a Visualforce page
- 23. Add <apex:includeLightning />at the beginning of your VF page. This component loads the JavaScript file used by Lightning Components for VF. Alternatively, use can just add the more generic line: <apex:includeScript value="/lightning/lightning.out.js" /> Including a Lightning Component in VF Step 1 of 3: Add Lightning capability in VF
- 24. Define component dependencies,by creating a special purpose “Lightning Dependency App”, which declares dependencies on any Lightning Components that it uses. Any Lightning Components you wish to include in the Visualforce pabe should be declared as dependencies in this app. Give it a name, like “lcvfTest.app” Reference the app in the VF page using $Lightning.Use() Including a Lightning Component in VF Step 2 of 3: Reference a Lightning App
- 25. Create the componenton a page using $Lightning.createComponent(String type, Object attributes, String locator, function callback) This function is similar to $A.createComponent(), but includes an additional parameter, domLocator, which specifies the DOM element where you want the component inserted. Including a Lightning Component in VF Step 3 of 3: Create Component on the page
- 26. Simple sample, samplesimple! Including a Lightning Component in VF
- 27.
- 28. • Lightning isthe future of Salesforce technology • Both our mobile and new desktop are built with Lightning Components • Visualforce and your customizations will continue to be supported in Lightning Experience Experience Platform Design We will support Visualforce for the long term Your customizations will be brought forward
- 29. Blending in withLightning Experience Example approach to migrating VF Pages based on customer usage What should be my approach? Visualforce Visualforce + JS Visualforce Mobile Low Usage Wait for LEx evolution Consider SLDS Componentize: LCVF + SLDS Medium Usage Componentize: LCVF + SLDS Restyle: SLDS Convert to LC + SLDS High Usage Convert to LC + SLDS Convert to LC + SLDS Convert to LC + SLDS
- 30. Consider Lightning Componentsfor new development projects Convert key Visualforce inventory if it aligns with your business strategy Align new development to your business strategy Lightning Components for new projects; optional for existing Visualforce NOT required to migrate entire Visualforce inventory Consider building key Visualforce assets with Lightning Components Product backlog /new app Select high value business processes
- 31.
- 32.
Editor's Notes
- #14 vdodla-duzj@force.com / MNCLTocc6DvzhWoE
- #31 You might be wondering, “Should I build with Visualforce or should I build with Lightning Components? And what should I do with all of the Visualforce I’ve already built? In both cases, take a step back and focus on your overall business strategy and the key business processes that support that strategy. This is an opportunity to take a fresh look at your backlog and reprioritize your development projects. This is also an opportunity to assess your existing Visualforce inventory to determine what pages are still key to achieving your business strategy. It is likely that many pages do not need to be considered because they are no longer relevant. Once you know your key business processes, assess if Lightning Components currently meet your technical needs and choose the best development strategy. * we are hoping that today you will see that lightning is a better component based framework for factors for mobile, desktop, tablets, gives your customers flexibility and gives customer ability you didnt think possibl more takeaways: Better UX, Component-based framework, heart of our development effort, No need for MyDomain Security (e.g. when using certain JS frameworks) You can start testing now in pre-release org (GS0) better UX- why? -if it is vf behind the scenes, it still acts as a standard vf page, still has to go back to the server to update and refresh if lightning, everything is faster- would act as an ajax submission, whole page doesn’t need to refresh, but for vf, form tags work slower