Visualforce in Lightning Experience | Salesforce Guide
Although Lightning Experience introduces a whole new user interface to your Salesforce organisation, your Visualforce apps will continue to function. Many Visualforce pages operate in Lightning Experience without needing to be revised. However, things have changed, and you'll need to do some work to ensure that your Visualforce pages perform as expected as your users switch between Lightning Experience and Salesforce Classic. And, unfortunately, there are a few things that do not work in Lightning Experience. In this module, we'll get you sorted on everything.
Let's start with the fundamentals. We'll get into more detail on these topics later, but first, let's get some basics out of the way.
Visualforce "simply works" in Lightning Experience, with a few notable exceptions.
If you utilize the built-in standard components on your Visualforce sites, they will have the same look and feel as Salesforce Classic, whether your users are using Lightning Experience or Salesforce Classic. You'll need to put in some effort if you want your pages to match the Lightning Experience's design.
There are a few things you should verify if your Visualforce sites incorporate JavaScript. Because Visualforce does not "own" the entire page when viewed in Lightning Experience, your JavaScript code must follow some new guidelines.
Other aspects of Visualforce's behaviour have changed when it's operating inside Lightning Experience.
These are primarily twisting the "just works" crank, but you should be aware of them nonetheless.
Last but not least, did we mention that some things have shifted? They've done it before! While the task isn't finished yet, we're incredibly thrilled about where we're going with the Lightning Experience. Let's take a quick tour of some of the locations you can use Visualforce in Lightning Experience to get you oriented for where your Visualforce is in the new environment.
Don't forget to check out: How to Add Your Visualforce Page in your Application as a Tab | Salesforce Guide
Example:-
We want to create a lightning button on the Transport record page named Transport Slip. In this Slip, all Transport field details are fetched from the transport record automatically. So, We use the VF page to display the transport record in form of a PDF File.
VF Page Code:-
<apex:page standardController="Transport__c" renderAs="PDF" cache="true">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
@page{
size:A4 portrait;
@bottom-right {
content: "Page " counter(page) " - " counter(pages);
font-family: 'Arial', 'Helvetica', sans-serif;
font-size:10px;
}
}
</style>
</head>
<apex:Form >
<div style="text-align:center;">
<span><b><apex:outputText value="Welcome To Account" style="font-size:21px;"/></b></span>
</div>
<p style="height: 80px;"></p>
<table border="0" cellpadding="4" cellspacing="0" width="100%" style="border: 0;width: 100%;">
<colgroup>
<col/>
<col style="width: 30%" width="30%" />
<col/>
<col style="width: 30%" width="30%" />
</colgroup>
<tbody>
<tr>
<td style="text-align:center;">
<span><apex:outputText value="Transport Name" style="font-size:19px;"/></span>
</td>
<td>
<p style="border:1px solid #000;padding:8px;margin:0;"><apex:outputText value="{!Transport__c.Transport_Name__c}" style="font-size:19px;"/></p>
</td>
<td style="text-align:center;">
<span><apex:outputText value="Transport Number" style="font-size:19px;"/></span>
</td>
<td>
<p style="border:1px solid #000;padding:8px;margin:0;"><apex:outputText value="{!Transport__c.Transport_Number__c}" style="font-size:19px;"/></p>
</td>
</tr>
<tr>
<td style="text-align:center;">
<span><apex:outputText value="Transport Type" style="font-size:19px;"/></span>
</td>
<td>
<p style="border:1px solid #000;padding:8px;margin:0;"><apex:outputText value="{!Transport__c.Transport_Type__c}" style="font-size:19px;"/></p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align:center;">
<span><apex:outputText value="TransportCompony" style="font-size:19px;"/> </span>
</td>
<td>
<p style="border:1px solid #000;padding:8px;margin:0;height: 80px;"><apex:outputText value="{!Transport.TransportCompony__c}" style="font-size:19px;"/></p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p style="height: 80px;"> </p>
</td>
</tr>
<tr>
<td style="text-align:center;">
<span><apex:outputText value="Owner Name" style="font-size:19px;"/></span>
</td>
<td>
<p style="border:1px solid #000;padding:8px;margin:0;"><apex:outputText value="{!Transport__c.Owner_Name__c}" style="font-size:19px;"/></p>
</td>
<td style="text-align:center;">
<span><apex:outputText value="Purchase Date" style="font-size:19px;"/> </span>
</td>
<td>
<p style="border:1px solid #000;padding:8px;margin:0;"><apex:outputText value="{!Transport__c.Purchase_Date__c}" style="font-size:19px;"/></p>
</td>
</tr>
<tr>
<td>
<p style="height: 80px"> </p>
</td>
</tr>
<tr>
<td style="text-align:center;">
<span><apex:outputText value="Maintainence Cost" style="font-size:19px;"/> </span>
</td>
<td colspan="3">
<p style="border-bottom:1px solid #000;padding:8px;margin:0;width:50%"><apex:outputText value="{!Transport__c.Maintainence_cost__c}" style="font-size:19px;"/></p>
</td>
</tr>
</tbody>
</table>
</apex:Form>
</apex:page>
Responses