Lightning Experience with Visualforce Best Practices

Salesforce Developers
Salesforce DevelopersDeveloper Programs um Salesforce Developers
Lightning Experience
with VisualForce
best practices
Shashank Srivatsavaya
Senior Developer Advocate
@shashforce
Lightning Experience with VisualForce
best practices
Keeping VisualForce in context with Lightning Experience and Lightning Components
Shashank Srivatsavaya
Senior Developer Advocate
@shashforce
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.
Lightning Summer ‘16!
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
Visualforce in
Lightning Experience
Run a Visualforce page from the app launcher
Using Visualforce in Lightning Experience
“Just Works”, mostly
Add a Visualforce page to the Navigation Menu
Using Visualforce in Lightning Experience
“Just Works”, mostly
Display a Visualforce page within a standard page layout
Using Visualforce in Lightning Experience
“Just Works”, mostly
Add a Visualforce page as a component in the Lightning App Builder
Using Visualforce in Lightning Experience
“Just Works”, mostly
Launch a Visualforce page as a Quick Action
Using Visualforce in Lightning Experience
“Just Works”, mostly
Override standard/custom buttons/links with Visualforce. (No JavaScript buttons
yet)
Using Visualforce in Lightning Experience
“Just Works”, mostly
Demo
• 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…
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
• 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?
• 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
• 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!
• 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
• 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
Lightning Components in
Visualforce
• 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
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
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
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
Simple sample, sample simple!
Including a Lightning Component in VF
Demo
• 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
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
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
Questions?
thank y u
Lightning Experience with Visualforce Best Practices
1 von 33

Recomendados

Lightning web components episode 2- work with salesforce data von
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce dataSalesforce Developers
11.7K views26 Folien
LWC Episode 3- Component Communication and Aura Interoperability von
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilitySalesforce Developers
6.1K views35 Folien
Lwc presentation von
Lwc presentationLwc presentation
Lwc presentationNithesh N
1.9K views20 Folien
Designing Salesforce Platform Events von
Designing Salesforce Platform EventsDesigning Salesforce Platform Events
Designing Salesforce Platform EventsCodeScience
223 views19 Folien
React state von
React  stateReact  state
React stateDucat
373 views11 Folien
Lightning customization with lightning app builder von
Lightning customization with lightning app builderLightning customization with lightning app builder
Lightning customization with lightning app builderSalesforce Developers
3.7K views36 Folien

Más contenido relacionado

Was ist angesagt?

Batch Apex in Salesforce von
Batch Apex in SalesforceBatch Apex in Salesforce
Batch Apex in SalesforceDavid Helgerson
2.4K views28 Folien
Salesforce asynchronous apex von
Salesforce asynchronous apexSalesforce asynchronous apex
Salesforce asynchronous apexBadan Singh Pundeer
7.5K views12 Folien
Salesforce.com Sandbox management von
Salesforce.com Sandbox management Salesforce.com Sandbox management
Salesforce.com Sandbox management Ali Akbar
4.6K views26 Folien
Salesforce Development Best Practices von
Salesforce Development Best PracticesSalesforce Development Best Practices
Salesforce Development Best PracticesVivek Chawla
22.9K views40 Folien
Webinar: Take Control of Your Org with Salesforce Optimizer von
Webinar: Take Control of Your Org with Salesforce OptimizerWebinar: Take Control of Your Org with Salesforce Optimizer
Webinar: Take Control of Your Org with Salesforce OptimizerSalesforce Admins
3.4K views30 Folien
Lightning web components von
Lightning web components Lightning web components
Lightning web components Cloud Analogy
1.7K views13 Folien

Was ist angesagt?(20)

Salesforce.com Sandbox management von Ali Akbar
Salesforce.com Sandbox management Salesforce.com Sandbox management
Salesforce.com Sandbox management
Ali Akbar4.6K views
Salesforce Development Best Practices von Vivek Chawla
Salesforce Development Best PracticesSalesforce Development Best Practices
Salesforce Development Best Practices
Vivek Chawla22.9K views
Webinar: Take Control of Your Org with Salesforce Optimizer von Salesforce Admins
Webinar: Take Control of Your Org with Salesforce OptimizerWebinar: Take Control of Your Org with Salesforce Optimizer
Webinar: Take Control of Your Org with Salesforce Optimizer
Salesforce Admins3.4K views
Lightning web components von Cloud Analogy
Lightning web components Lightning web components
Lightning web components
Cloud Analogy1.7K views
Lightning web components - Episode 1 - An Introduction von Salesforce Developers
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
Salesforce Developers11.6K views
Record sharing model in salesforce von Sunil kumar
Record sharing model in salesforceRecord sharing model in salesforce
Record sharing model in salesforce
Sunil kumar4.2K views
Oracle Forms Tutorial (www.aboutoracleapps.com) von magupta26
Oracle Forms Tutorial (www.aboutoracleapps.com)Oracle Forms Tutorial (www.aboutoracleapps.com)
Oracle Forms Tutorial (www.aboutoracleapps.com)
magupta2674.2K views
Understanding react hooks von Maulik Shah
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Maulik Shah1.9K views
Introduction to Lightning Web Component von SmritiSharan1
Introduction to Lightning Web Component Introduction to Lightning Web Component
Introduction to Lightning Web Component
SmritiSharan14.2K views
Rethinking Best Practices von floydophone
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
floydophone130.2K views
Sample Gallery: Reference Code and Best Practices for Salesforce Developers von Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Hook me UP ( React Hooks Introduction) von Carlos Mafla
Hook me UP ( React Hooks Introduction)Hook me UP ( React Hooks Introduction)
Hook me UP ( React Hooks Introduction)
Carlos Mafla2.1K views
Episode 20 - Trigger Frameworks in Salesforce von Jitendra Zaa
Episode 20 - Trigger Frameworks in SalesforceEpisode 20 - Trigger Frameworks in Salesforce
Episode 20 - Trigger Frameworks in Salesforce
Jitendra Zaa11.3K views
Migrate To Lightning Web Components from Aura framework to increase performance von Bohdan Dovhań
Migrate To Lightning Web Components from Aura framework to increase performance Migrate To Lightning Web Components from Aura framework to increase performance
Migrate To Lightning Web Components from Aura framework to increase performance
Bohdan Dovhań4.2K views
Oracle Forms: Data Blocks on Different Sources von Sekhar Byna
Oracle Forms: Data Blocks on Different SourcesOracle Forms: Data Blocks on Different Sources
Oracle Forms: Data Blocks on Different Sources
Sekhar Byna3.1K views
OOW15 - personalize and extend oracle ebs for desktops and tablets von vasuballa
OOW15 - personalize and extend oracle ebs for desktops and tabletsOOW15 - personalize and extend oracle ebs for desktops and tablets
OOW15 - personalize and extend oracle ebs for desktops and tablets
vasuballa2.2K views

Similar a Lightning Experience with Visualforce Best Practices

Spring '16 Release Preview Webinar von
Spring '16 Release Preview Webinar Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar Salesforce Developers
7.8K views36 Folien
Spring '16 Release Overview - Bilbao Feb 2016 von
Spring '16 Release Overview - Bilbao Feb 2016Spring '16 Release Overview - Bilbao Feb 2016
Spring '16 Release Overview - Bilbao Feb 2016Peter Chittum
493 views34 Folien
ISV Lightning Webinar Series - Part 1 (December 1, 2015) von
ISV Lightning Webinar Series - Part 1 (December 1, 2015)ISV Lightning Webinar Series - Part 1 (December 1, 2015)
ISV Lightning Webinar Series - Part 1 (December 1, 2015)Salesforce Partners
6.9K views43 Folien
Using Visualforce in Salesforce1 von
Using Visualforce in Salesforce1Using Visualforce in Salesforce1
Using Visualforce in Salesforce1Salesforce Developers
22K views55 Folien
Building Lightning Components for ISVs (Dreamforce 2015) von
Building Lightning Components for ISVs (Dreamforce 2015)Building Lightning Components for ISVs (Dreamforce 2015)
Building Lightning Components for ISVs (Dreamforce 2015)Salesforce Partners
3.7K views26 Folien
Spring '16 Lightning Update for ISVs (March 15, 2016) von
Spring '16 Lightning Update for ISVs (March 15, 2016)Spring '16 Lightning Update for ISVs (March 15, 2016)
Spring '16 Lightning Update for ISVs (March 15, 2016)Salesforce Partners
5.3K views45 Folien

Similar a Lightning Experience with Visualforce Best Practices(20)

Spring '16 Release Overview - Bilbao Feb 2016 von Peter Chittum
Spring '16 Release Overview - Bilbao Feb 2016Spring '16 Release Overview - Bilbao Feb 2016
Spring '16 Release Overview - Bilbao Feb 2016
Peter Chittum493 views
ISV Lightning Webinar Series - Part 1 (December 1, 2015) von Salesforce Partners
ISV Lightning Webinar Series - Part 1 (December 1, 2015)ISV Lightning Webinar Series - Part 1 (December 1, 2015)
ISV Lightning Webinar Series - Part 1 (December 1, 2015)
Salesforce Partners6.9K views
Building Lightning Components for ISVs (Dreamforce 2015) von Salesforce Partners
Building Lightning Components for ISVs (Dreamforce 2015)Building Lightning Components for ISVs (Dreamforce 2015)
Building Lightning Components for ISVs (Dreamforce 2015)
Salesforce Partners3.7K views
Spring '16 Lightning Update for ISVs (March 15, 2016) von Salesforce Partners
Spring '16 Lightning Update for ISVs (March 15, 2016)Spring '16 Lightning Update for ISVs (March 15, 2016)
Spring '16 Lightning Update for ISVs (March 15, 2016)
Salesforce Partners5.3K views
Make Your App Lightning Ready with Winter '17 (December 8, 2016) von Salesforce Partners
Make Your App Lightning Ready with Winter '17 (December 8, 2016)Make Your App Lightning Ready with Winter '17 (December 8, 2016)
Make Your App Lightning Ready with Winter '17 (December 8, 2016)
Salesforce Partners11.8K views
Spring 17 ISV Release Readiness (February 16, 2017) von Salesforce Partners
Spring 17 ISV Release Readiness (February 16, 2017)Spring 17 ISV Release Readiness (February 16, 2017)
Spring 17 ISV Release Readiness (February 16, 2017)
Salesforce Partners1.3K views
Enterprise-grade UI with open source Lightning Web Components von Salesforce Developers
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web Components
Customizing Salesforce User Interfaces with Lightning Components von Salesforce Developers
Customizing Salesforce User Interfaces with Lightning ComponentsCustomizing Salesforce User Interfaces with Lightning Components
Customizing Salesforce User Interfaces with Lightning Components
Staying Ahead of the Curve with Lightning - Snowforce16 Keynote von Salesforce Admins
Staying Ahead of the Curve with Lightning - Snowforce16 KeynoteStaying Ahead of the Curve with Lightning - Snowforce16 Keynote
Staying Ahead of the Curve with Lightning - Snowforce16 Keynote
Salesforce Admins675 views
Lightning Design System and Components for Visualforce Developers von Salesforce Developers
Lightning Design System and Components for Visualforce DevelopersLightning Design System and Components for Visualforce Developers
Lightning Design System and Components for Visualforce Developers
Salesforce Lightning Design System von Durgesh Dhoot
Salesforce Lightning Design SystemSalesforce Lightning Design System
Salesforce Lightning Design System
Durgesh Dhoot2.3K views
Visualforce in Salesforce1: Optimizing your User Interface for Mobile von Salesforce Developers
Visualforce in Salesforce1: Optimizing your User Interface for MobileVisualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for Mobile
Salesforce Developers16.1K views
A Developer's Guide To Building Great Salesforce Consoles von Enzhen Huang
A Developer's Guide To Building Great Salesforce ConsolesA Developer's Guide To Building Great Salesforce Consoles
A Developer's Guide To Building Great Salesforce Consoles
Enzhen Huang612 views
Elevate Madrid Essentials - Advance Track von CarolEnLaNube
Elevate Madrid Essentials - Advance TrackElevate Madrid Essentials - Advance Track
Elevate Madrid Essentials - Advance Track
CarolEnLaNube970 views
Lightning Workshop London von Keir Bowden
Lightning Workshop LondonLightning Workshop London
Lightning Workshop London
Keir Bowden2.6K views

Más de Salesforce Developers

Maximizing Salesforce Lightning Experience and Lightning Component Performance von
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceSalesforce Developers
3.4K views62 Folien
Local development with Open Source Base Components von
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base ComponentsSalesforce Developers
1.7K views35 Folien
TrailheaDX India : Developer Highlights von
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsSalesforce Developers
827 views42 Folien
Why developers shouldn’t miss TrailheaDX India von
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaSalesforce Developers
596 views35 Folien
CodeLive: Build Lightning Web Components faster with Local Development von
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentSalesforce Developers
1.8K views19 Folien
CodeLive: Converting Aura Components to Lightning Web Components von
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsSalesforce Developers
3K views11 Folien

Más de Salesforce Developers(20)

Maximizing Salesforce Lightning Experience and Lightning Component Performance von Salesforce Developers
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component Performance
CodeLive: Build Lightning Web Components faster with Local Development von Salesforce Developers
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Converting Aura Components to Lightning Web Components von Salesforce Developers
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web Components
Lightning web components - Episode 4 : Security and Testing von Salesforce Developers
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
Scale with Large Data Volumes and Big Objects in Salesforce von Salesforce Developers
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in Salesforce
Replicate Salesforce Data in Real Time with Change Data Capture von Salesforce Developers
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data Capture
Integrate CMS Content Into Lightning Communities with CMS Connect von Salesforce Developers
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS Connect

Último

Generic or specific? Making sensible software design decisions von
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisionsBert Jan Schrijver
7 views60 Folien
tecnologia18.docx von
tecnologia18.docxtecnologia18.docx
tecnologia18.docxnosi6702
5 views5 Folien
JioEngage_Presentation.pptx von
JioEngage_Presentation.pptxJioEngage_Presentation.pptx
JioEngage_Presentation.pptxadmin125455
8 views4 Folien
Flask-Python.pptx von
Flask-Python.pptxFlask-Python.pptx
Flask-Python.pptxTriloki Gupta
9 views12 Folien
What is API von
What is APIWhat is API
What is APIartembondar5
12 views15 Folien
Programming Field von
Programming FieldProgramming Field
Programming Fieldthehardtechnology
6 views9 Folien

Último(20)

Generic or specific? Making sensible software design decisions von Bert Jan Schrijver
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
tecnologia18.docx von nosi6702
tecnologia18.docxtecnologia18.docx
tecnologia18.docx
nosi67025 views
JioEngage_Presentation.pptx von admin125455
JioEngage_Presentation.pptxJioEngage_Presentation.pptx
JioEngage_Presentation.pptx
admin1254558 views
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium... von Lisi Hocke
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...
Lisi Hocke35 views
Fleet Management Software in India von Fleetable
Fleet Management Software in India Fleet Management Software in India
Fleet Management Software in India
Fleetable12 views
Dapr Unleashed: Accelerating Microservice Development von Miroslav Janeski
Dapr Unleashed: Accelerating Microservice DevelopmentDapr Unleashed: Accelerating Microservice Development
Dapr Unleashed: Accelerating Microservice Development
Miroslav Janeski13 views
AI and Ml presentation .pptx von FayazAli87
AI and Ml presentation .pptxAI and Ml presentation .pptx
AI and Ml presentation .pptx
FayazAli8714 views
Gen Apps on Google Cloud PaLM2 and Codey APIs in Action von Márton Kodok
Gen Apps on Google Cloud PaLM2 and Codey APIs in ActionGen Apps on Google Cloud PaLM2 and Codey APIs in Action
Gen Apps on Google Cloud PaLM2 and Codey APIs in Action
Márton Kodok16 views
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated... von TomHalpin9
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
TomHalpin96 views
Top-5-production-devconMunich-2023-v2.pptx von Tier1 app
Top-5-production-devconMunich-2023-v2.pptxTop-5-production-devconMunich-2023-v2.pptx
Top-5-production-devconMunich-2023-v2.pptx
Tier1 app6 views
FIMA 2023 Neo4j & FS - Entity Resolution.pptx von Neo4j
FIMA 2023 Neo4j & FS - Entity Resolution.pptxFIMA 2023 Neo4j & FS - Entity Resolution.pptx
FIMA 2023 Neo4j & FS - Entity Resolution.pptx
Neo4j17 views
Top-5-production-devconMunich-2023.pptx von Tier1 app
Top-5-production-devconMunich-2023.pptxTop-5-production-devconMunich-2023.pptx
Top-5-production-devconMunich-2023.pptx
Tier1 app9 views
Bootstrapping vs Venture Capital.pptx von Zeljko Svedic
Bootstrapping vs Venture Capital.pptxBootstrapping vs Venture Capital.pptx
Bootstrapping vs Venture Capital.pptx
Zeljko Svedic15 views

Lightning Experience with Visualforce Best Practices

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

Hinweis der Redaktion

  1. vdodla-duzj@force.com / MNCLTocc6DvzhWoE
  2. 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