1. Lightning Experience
with VisualForce
best practices
Shashank Srivatsavaya
Senior Developer Advocate
@shashforce

2. Lightning Experience with VisualForce
best practices
Keeping VisualForce in context with Lightning Experience and Lightning Components
Shashank Srivatsavaya
Senior Developer Advocate
@shashforce

3. 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.

4. Lightning Summer ‘16!

5. Summer ‘16 Release Dates
• 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. Visualforce in
Lightning Experience

7. Run a Visualforce page from the app launcher
Using Visualforce in Lightning Experience
“Just Works”, mostly

8. Add a Visualforce page to the Navigation Menu
Using Visualforce in Lightning Experience
“Just Works”, mostly

9. Display a Visualforce page within a standard page layout
Using Visualforce in Lightning Experience
“Just Works”, mostly

10. Add a Visualforce page as a component in the Lightning App Builder
Using Visualforce in Lightning Experience
“Just Works”, mostly

11. Launch a Visualforce page as a Quick Action
Using Visualforce in Lightning Experience
“Just Works”, mostly

12. Override standard/custom buttons/links with Visualforce. (No JavaScript buttons
yet)
Using Visualforce in Lightning Experience
“Just Works”, mostly

13. Demo

14. • Classic UI Development 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 Classic UI,
• 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 global variables 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 Salesforce theme
• 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 redirection works 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 using standard 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 Experience Header 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. Lightning Components in
Visualforce

22. • Lightning Components can 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 component on 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, sample simple!
Including a Lightning Component in VF

27. Demo

28. • Lightning is the 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 with Lightning 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 Components for 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. Questions?

32. thank y u