Migrating your Visualforce pages for Lightning ExperiencePart of an ISV webinar series

December 15, 2015

John Belo, Emily Hudson and Rodrigo Reboucas

Meet your PresentersISV Technical Evangelist Team

John BeloPrincipal ISV Technical Evangelist

Salesforce

Emily HudsonAssociate ISV Technical Evangelist

Salesforce

Rodrigo ReboucasISV Technical Evangelist

Salesforce

Safe HarborSafe 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.

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

• 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

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)

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)

Visualforce in Lightning Experience

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

We will bring forward Visualforce and your customizationsVisualforce 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

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

Standard VF Components are currently styled using ClassicExample 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

Lightning Design SystemDesign 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

Join a growing number of Lightning Ready appsRestyle your app for the best user experience

Use the Newest TechGive your app the best user experience with a consistent look and feel with the

new Lightning Experience.

Anticipate Customer NeedsHave your app in the new Lightning

Experience before they ask

Extend Your MarketingMaximize your marketing by being an

early adopter in a new market.

For more info, see: Lightning Ready Requirements

Demo

Demo 2Integrate Lightning Components into VF pages

Demo 1Start converting VF pages to use the SLDS

Demo Overview

Demo 3Why is building in Lightning better than building in VF and displaying in a Lightning container?

Tips for Restyling Visualforce in Lightning Experience

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

Blending in with Lightning ExperienceExample 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.

Componentize Visualforce over timeRun 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 timeRun components in Visualforce

When fully componentized, convert to a Lightning App

•

•

Aloha

Aloha

Wrap Up

Consider Lightning Components for new development projects

Convert key Visualforce inventory if it aligns with your business strategy

Align new development to your business strategyLightning 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

Roadmap

● 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

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

Resources

Lightning Resources

Develop for Lightning Experience

Managing Navigation

Visualforce & Lightning Experience

Lightning Component Developer Guide

Lightning Design System

Visualforce Developer Guide

Lightning Webinar ReplaysLightning Certification Lightning Component Chatter Group

Trailhead Lightning Guides Partner Community

Q&A

Thank You