Learn more about getting Lightning Ready at http://p.force.com/lightningready.

1. Migrating your Visualforce pages
for Lightning Experience
Part of an ISV webinar series
December 15, 2015
John Belo, Emily Hudson and Rodrigo Reboucas

2. Meet your Presenters
ISV Technical Evangelist Team
John Belo
Principal ISV Technical Evangelist
Salesforce
Emily Hudson
Associate ISV Technical Evangelist
Salesforce
Rodrigo Reboucas
ISV Technical Evangelist
Salesforce

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

4. Delivered through the Partner Community
ISV Lightning Webinar Series
Date Abstract
Dec 1 Defining your Lightning Strategy as an ISV - At Dreamforce '15, partners got a chance to see first hand the new evolution in user interface for
our desktop experience. While this announcement was great, it left many ISVs unsure about whether to be building your App with Lightning
Components or Visualforce. In this webinar, we will discuss the options available to you as an ISV and the steps you need to today to make
your app Lightning Ready.
Dec 8 Packaging & Releasing Lightning Components for ISVs - The Lightning Experience creates entirely new opportunities for ISVs to build
Lightning components that engage and interact with customers in ways that were not possible with Aloha. In this webinar, we will discuss
strategies for ISV who plan to release Lightning Components as part of their existing App or plan to offer them as standalone. We will also
cover the type of Lightning Components and how Admins will use them as part of the building blocks for pages.
Dec 15 Migrating your Visualforce pages for Lightning Experience - After Dreamforce '15, many ISVs were left wondering how they can continue to
leverage all the Visualforce pages that are included in their App. Well, the good news is Visualforce pages don't stop working with the
Lightning Experience and many will work with little to no effort. In this webinar, we will walk through examples of how to make Visualforce
pages work with the Lightning Experience and ways in which you can start to migrate some to Lightning Components.
We are here

5. • Quick Recap of Previous Webinars
• Visualforce in Lightning Experience
• Demo
• Tips for Restyling Visualforce in Lightning Experience
• ISV Partner Xactly
• What is coming for Visualforce in Lightning Experience
• Q&A (please post questions via Webinar chat)
What we plan to cover today

6. Webinar 1 - Defining Your Lightning Strategy
Self assessment
● Tech Leader/Fast Follower/Left Behind?
● Technical Capabilities & Manpower
Your App’s Environment
● What is your use case?
● What do your customers demand?
● Who are your customers (where are they on curve)?
● Competitors & Market Segment
Your Vision
● If your app could be anything, what would it be?
● Are you gunning for the Dreamforce Keynote?
Salesforce Technology
● Are there currently any blockers?
● Are they on our Roadmap?
Questions that ISVs need to ask (and answer)
Slides and Recording of Webinar 1 (requires Partner Community login)

7. Webinar 2 - Packaging & Releasing Lightning Components for ISVs
● Demo Component Creation and Usage
● Tips for Building Lightning Components
● Distributing Lightning Components
● Security Considerations
● What’s Next for Lightning Components
Deeper Dive into Lightning Components
Slides and Recording of Webinar 2 (requires Partner Community login)

8. Visualforce in
Lightning Experience

9. Let’s Recap - Your Custom UX Options
● Proven model
● Easy to implement tags
● Template driven web pages
● Email Templates & PDF
● Not going anywhere
● Enables highly interactive UX
● Leverage popular JS
Libraries
● Shorter Learning Curve
● Highly interactive UX
● Aligns with SFDC UI strategy
● Tightly integrated into the
container
● Built on metadata
● Highly interactive UX
● Aligns with SFDC UI strategy
● Tightly integrated into the
container
● Built on metadata
Visualforce Visualforce + JS Lightning Components Visualforce + LC
Choose the right tool for the job
Want more, see: User Interface Design Considerations Trailhead

10. We will bring forward Visualforce and your customizations
Visualforce will continue to be supported for the long term
Lightning is the future of
Salesforce technology
Visualforce and your customizations will continue
to be supported in Lightning Experience*
Both our mobile and new desktop are built with Lightning
Components
*see exceptions list
For more info, see: Using Visualforce in Lightning Experience Trailhead

11. Where you can use Visualforce in Lightning Experience
Run a Visualforce Page from the App Launcher
Embedding VF on standard Lightning Page
Launch a Visualforce Page as a Quick Action
Display a Visualforce Page by Overriding Standard Buttons or Links
Create a Custom Button that launches a Visualforce Page
1
2
3
4
5

12. Standard VF Components are currently styled using Classic
Example using <apex:detail> to override the standard Account Page Layout:
Account Detail Page with VF Override:
Classic UI within Lightning Experience
Standard Account Record Home Page

13. Lightning Design System
Design Guidelines and CSS Framework
A downloadable set of CSS, HTML, icons, color
palettes, and a custom font
Enables you to build custom applications with a look
and feel that is consistent with Salesforce core features
Provides a platform-agnostic CSS framework
Delivers access to all of the Salesforce core visual and
interaction design patterns

14. Join a growing number of Lightning Ready apps
Restyle your app for the best user experience
Use the Newest Tech
Give your app the best user experience
with a consistent look and feel with the
new Lightning Experience.
Anticipate Customer Needs
Have your app in the new Lightning
Experience before they ask
Extend Your Marketing
Maximize your marketing by being an
early adopter in a new market.
For more info, see: Lightning Ready Requirements

15. Demo

16. Demo 2
Integrate Lightning Components into VF pages
Demo 1
Start converting VF pages to use the SLDS
Demo Overview
Demo 3
Why is building in Lightning better than building in VF and displaying
in a Lightning container?

17. Tips for Restyling Visualforce in
Lightning Experience

18. Tips for Visualforce in Lightning Experience
Lightning Design System is your Friend
Consider Personas and Form factors (e.g. Desktop, Mobile, etc)
Don’t use static URLs to resources, use “navigateTo…” or {!URLFOR($...)}
Don’t set Window.location() directly or create custom Header bar
Your VF pages can contain LC and work for both LEX and Classic
1
2
3
4
5

19. Blending in with Lightning Experience
Example approach to migrating VF Pages based on customer usage
Visualforce Visualforce + JS Visualforce Mobile
Low Usage Wait for auto-restyling 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
Note: ISVs may consider using an adapted/extended version of SLDS to better reflect their branding.

20. Componentize Visualforce over time
Run components with Visualforce as the Container
Lightning Component
Lightning Component
<apex:page>
</apex:page>
<aura:application>
</aura:application>
Lightning Component
Lightning Component
Lightning Component
Lightning AppVisualforce
Componentize key elements over time
Run components in Visualforce
When fully componentized, convert
to a Lightning App

22. •
•

26. Aloha

32. Aloha

36. Wrap Up

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

38. Roadmap

39. ● App Builder GA for App Home Pages on S1
● Additional responsive templates with support for phone, tablet, and tablet-
landscape
● Open pilot (DE orgs) for record home pages in Lightning Experience
● Aloha URLs open in LEX (GA in Spring)
Lightning Roadmap (Safe Harbor)
● VF in Lightning Experience is still beta
● Integrated AppExchange for Components
● SLDS as Platform Global Resource
● Programmatically detect Classic vs. LEX (UI Theme)
○ Use User.UITheme and UserInfo.getUiTheme() to
Determine User Experience Context
Winter ‘16
Spring ‘16

40. Lightning Roadmap (Safe Harbor)
● VF in Lightning Experience will be GA Summer 17
● Automatic Restyling of VF pages is GA in Winter 17
● Customization of Tabs on Record Home
● GA for Record Home for Home customization
● App Home for Pages for Lightning Experience
● Custom Page Templates and Layout Components
● Multi-page Applications
● App Branding and Theming
Longer Term

41. Resources

42. Lightning Resources
Develop for Lightning Experience
Managing Navigation
Visualforce & Lightning Experience
Lightning Component Developer Guide
Lightning Design System
Visualforce Developer Guide
Lightning Webinar Replays
Lightning Certification
Lightning Component Chatter Group
Trailhead Lightning Guides Partner Community

43. Q&A

44. Thank You