function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Suzy Watkins 1Suzy Watkins 1 

Visual force page displaying classic layout in Lightning

Hi there, 

I have copied some code online that you create a button i.e 'closed won' and create a field set to display the set of fields needed to be able to progress to the closed won stage. I'm wanting to do this for all stages. I was going to use Path but you are limited to 5 fields and theres many more than that needed at certain stages on the opportunity.

I have aded and followed the steps but is there a way of displaying the layout the same as lightening would? Currently this is what I get:

User-added image

This is the code:

<!-- Main information for the page including the "standardController" for the object (in this case, Opportunity) -->
<apex:page standardController="Opportunity" sidebar="true" showHeader="true" showChat="false" tabStyle="Opportunity" id="mainPage">
<!-- Show any error messages or validation rules -->
<apex:pageMessages ></apex:pageMessages>
<!--Start of the form -->
<apex:form id="mainForm" >
<!-- Showing the page block "standard" look and feel -->
<apex:pageBlock title="Required Fields for Opportunity Closed Won" id="mainBlock">
<!-- Start of the section -->
<apex:pageBlockSection columns="2" id="mainSection">
<!-- The Stage field and a call to the Javascript -->
<apex:inputField value="{!Opportunity.StageName}" rendered="true" required="true" id="stageName" onchange="checkStage();"/>
<!-- The values in the field set -->
<apex:repeat value="{!$ObjectType.Opportunity.FieldSets.Closed_Won_Required_Fields}" var="field">
<!-- Displaying the values through required input fields -->
<apex:inputField value="{!Opportunity[field]}" required="true" />
<!-- Closing the field set fields -->
<!-- Adding the hidden field with CSS to not "display" the field in the page, even though the Javascript can "see" the field -->
<apex:inputField label="" id="cL" style="display:none;" value="{!Opportunity.Closed_Won_Required_Fields__c}"/>
<!-- Closing the page block section -->
<!-- Start the page "buttons" from a normal page -->
<apex:pageBlockButtons >
<!-- Set the Save button -->
<apex:commandButton value="Closed Won" action="{!save}" />
<!-- Set the Cancel button -->
<apex:commandButton action="{!cancel}" value="Cancel"/>
<!-- Close the button section -->
<!-- Close the page block -->
<!-- Close the form -->
<!-- Start the Javascript checking the status for Qualified and updating it "onchange" -->
function checkStage(){
var s = document.getElementById("mainPage:mainForm:mainBlock:mainSection:stageName").value;
if(s == "Closed Won"){
document.getElementById("mainPage:mainForm:mainBlock:mainSection:cWRF").checked = true;
else {
document.getElementById("mainPage:mainForm:mainBlock:mainSection:cWRF").checked = false;
<!-- Close the Apex Page -->
Any ideas? I'm not a deveoper, I just need a piece of code to enable this. Thanks in advance! 

Best Answer chosen by Suzy Watkins 1

Try replacing your page tag for the following

<apex:page standardController="Opportunity" sidebar="true" showHeader="true" showChat="false" lightningStylesheets="true" id="mainPage">