+ Start a Discussion
azar khasimazar khasim 

Need Help to convert the Visualforce Page to Lightning Mode using SLDS method.

Hello Everyone,

Here is my requirement is i have created a Visualforce page and i need the page to convert into Lightning View by using SLDS and i have done the work of it.

But while using the Visualforce Page in Sites  the visualforce page is not viewing in Lightning mode and it was showing in Classic Mode.

Here Below is my VF Page:
*****************************************************************************

<apex:page controller="BookingController" lightningStylesheets="true">
     <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />

       <!-- Import the Design System style sheet -->
       <apex:slds />
    </head>
    <body>

      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">

        <!-- PRIMARY CONTENT WRAPPER -->

          <!-- RESPONSIVE GRID EXAMPLE -->
    <style>
        body {
        
        background-image: url("https://bren--c.ap5.visual.force.com/resource/1528783675000/repeatlatestlogo");
        background-repeat:repeat;
        }
        
    </style>       
    <apex:form >
        <apex:slds />
        <style>
            body .bPageBlock .pbBody .fontcolor .pbSubheader h3{
            color:#000;
            }
        </style>
        <apex:sectionHeader title="Bren Online Booking Form" /> 
        <apex:pageBlock rendered="{!isboolean}" >    
            <apex:pageBlockButtons location="bottom">
                <font size="3" style="color:red"><b>NOTE : After clicking on Save button, No further changes can be done.</b> </font>
                <apex:commandButton styleClass="slds-button slds-button_success" action="{!save}" value="Save"  />
                <apex:commandButton styleClass="slds-button slds-button_destructive" action="{!cancel}" value="Cancel"  />
            </apex:pageBlockButtons>
            <center>
            <font size="5" style="color:blue" ><b>Welcome to Bren Online Booking Portal</b> </font>
            </center>
            <center>
                 <font size="3" style="color:red" ><b>Please start by inserting your customer number as in the email.</b> </font>
                </center>
            <apex:outputPanel styleClass="fontcolor" layout="blue">
                <apex:pageBlockSection title="Customer Number" collapsible="false"  columns="1">
                    <apex:inputField required="true" value="{!booking.Customer_Number__c}"/>
                   
                </apex:pageBlockSection>    
                <apex:pageBlockSection title="First Applicant Details"  collapsible="false" columns="2" > 
                    <apex:inputField style="color:blue" required="true" value="{!booking.Salutation__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Pan_Number__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.First_Name__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Aadhar_Number__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Last_Name__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Mobile__c}"/>                    
                    <apex:inputField style="color:blue" required="true" value="{!booking.Gender__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Alternate_Mobile__c}"/> 
                    <apex:inputField style="color:blue" required="true" value="{!booking.Relation__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Date_Of_Birth__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Father_Husband__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Wedding_Anniversary__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Email__c}"/>  
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Professional Information" collapsible="false" columns="2">
                    <apex:inputField style="color:blue" required="true" value="{!booking.Designation__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Professional_Email__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Employed_by__c}"/>
                     <apex:inputField style="color:blue" value="{!booking.Office_State__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Office_Street__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Office_Country__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Office_City__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Office_PinCode__c}"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Permanent Address Information" collapsible="false" columns="1">   
                    <apex:inputField style="color:blue" required="true" value="{!booking.ShippingStreet__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Shipping_City__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.ShippingState__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.ShippingCountry__c}"/>
                    <apex:inputField style="color:blue" required="true" value="{!booking.Shipping_PinCode__c}"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Correspondence Address Information" collapsible="false" columns="1">   
                    <apex:inputField style="color:blue" value="{!booking.BillingStreet__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Billing_City__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.BillingState__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.BillingCountry__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Billing_PinCode__c}"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Children School Address" collapsible="false" columns="2" >
                    <apex:inputField style="color:blue" value="{!booking.Children_School_Name__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Children_School_State__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Children_School_Street__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Children_School_Country__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Children_School_City__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Children_School_PinCode__c}"/>  
                </apex:pageBlockSection>
                
                <apex:pageBlockSection title="Second Applicant Details" collapsible="false" columns="2">
                    <apex:inputField style="color:blue" value="{!booking.Salutation_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Date_of_Birth_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.First_Name_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Pan_Number_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Last_Name_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Aadhar_Number_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Gender_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Mobile_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Relation_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Email_Second_Applicant__c}"/>
                    <apex:inputField style="color:blue" value="{!booking.Father_Husband_Second_Applicant__c}"/>
                </apex:pageBlockSection>
                   
                
                <table border="2" width="1000"  HEIGHT="500" cellspacing="0">
                    <th style='color: #0000A0;' align="center">TERMS OF ALLOTMENT</th>  
                    
                    
 
                    <body style="font-size: 14px;">
                        
                        
                        
                        <tr ><td colspan="3">1. Allotment / Booking is at the sole discretion of Bren Corporation.</td> </tr>  
                        <tr ><td colspan="3">2. Allottee shall not re-negotiate / bargain with the agreed price once the Allotment is confirmed. </td> </tr>        
                        <tr ><td colspan="3">3. Allotment will be confirmed only after the realization of the Booking Advance Amount.</td> </tr>        
                        <tr ><td colspan="3">4. Allottee on confirmation of Allotment shall within 30 Days sign and execute Agreement of Sale as per the Format supplied by Bren Corporation and shall pay
                            the outstanding amount/due amount as per the time line/payment schedule mentioned therein.</td> </tr>        
                        <tr ><td colspan="3">5.Failing to sign and execute Agreement of Sale within 30 days as per the Format supplied by the Bren Corporation, the Allotment shall be treated as cancelled without
                            any further notice to the Allottee.</td> </tr>        
                        <tr ><td colspan="3">6. On Cancellation of the Booking for any reason by the Allottee including the cancellation as per para-5 above,  Bren Corporation shall be entitled to deduct 
                            Rs.50,000 /-(Rupees Fifty Thousand only) from the Booking amount and the balance if any shall be refunded to the Allottee within 60 Days of such Cancellation without
                            any interest.</td> </tr>        
                        <tr ><td colspan="3">7. If the Allottee is availing housing finance from any of the Financial Institutions/Banks/NBFCs, it is the sole responsibility of the Allottee to avail finance from such
                            Banks/Financial Institutions/NBFCs. However, Bren Corporation will provide such documentation as may be required. Failure to obtain Loans from such Banks, shall not be
                            a ground for withdrawal / Cancellation of booking.</td> </tr>        
                        <tr ><td colspan="3">8.  In case any payments are delayed, the Allottee shall be liable to pay the interest as per the Agreement of Sale and if the delay persists, Bren Corporation is entitled 
                            to terminate the Agreement/Booking.</td> </tr>
                        <tr><td colspan="3">9. The Allottee shall be liable and responsible to pay the GST and / or any other taxes / statutory payments that would be applicable on the transaction.</td></tr>
                        <tr><td colspan="3">10. Allottee shall also be liable and responsible to deduct TDS as required under IT Act on the amount payable to Bren Corporation and shall submit the proof of such 
                            deduction within 7 working days of such deduction.</td></tr>
                        <tr><td colspan="3">11. The Allottee shall not be entitled to shift / cancel / transfer the Booking to any other person(s) without the written consent of Bren Corporation.</td></tr>
                        <tr><td colspan="3">12. All payments needs to be made in favour of BREN CORPORATION by way of Demand Drafts / Cheques / Wire Transfers.</td></tr>
                        <tr><td colspan="3">13. Allottee shall be liable and responsible to pay the Stamp Duty, Registration Charges as may be applicable on the Agreement of Sale and the Sale Deed.</td></tr>
                        <tr><td colspan="3">14. The Booking shall be subject to the exclusive Jurisdiction of Bangalore City.</td></tr>
                        <tr><td colspan="3">15. Booking is subject to rate approval / cheque realization.</td></tr>
                        
                    </body></table>
                <font size="2" style="color:red"><b>DECLARATION :
                    
                    I / WE the Applicant/s do hereby declare that the above-mentioned particulars / information given by me / us are true and genuine to my / our best knowledge and the same are irrevocable. 
                    I / WE also declare the booking terms referred to above at SL.No.1 to 14 are read over to me / us and I / WE, after understanding the said conditions are willing to book the Apartment noted above.
                    I / We also declare that Bren Corporation has not induced / misrepresented to me / us while sharing the information about the project and / or the Unit I am / we are booking.
                    I / WE also declare that in the event of non-allotment of the Apartment which we booked, my / our claim would be limited to the booking amount only
                    </b> </font>           
            </apex:outputPanel>
        </apex:pageBlock>
        <apex:pageBlock rendered="{!booleans}">
            <apex:outputText >
                <center>
                    <font size="5" style="color:blue" ><b>Bren Corporation</b> </font>
                </center>
                <center>
                    <font size="5" style="color:black"><b> Thank you for submitting your personal details. The Sales Executive will shortly reach out to you.</b> </font>  
                </center> 
            </apex:outputText>
        </apex:pageBlock>
    </apex:form>
           <!-- / RESPONSIVE GRID EXAMPLE -->
      </div>
    </body>
  </html>
</apex:page>
********************************************************************************
Class Controller:
*************************************************************************
public class BookingController {
    public Booking_Link__c booking {get;set;}
    public Boolean isboolean {get;set;}
     public Boolean booleans {get;set;}
    public BookingController(){
        booking = new Booking_Link__c();
        isboolean=true;
        booleans=false;
    }
    public void save(){
        try {  
            INSERT booking;
            isboolean=false;
            booleans=true;
        }
        catch (Exception e) {
            ApexPages.addMessages (e);
           // return null;
        }
       // PageReference pr = new ApexPages.StandardController(booking).view();
        //return null;
    }
    
    public void cancel(){
        booking = new Booking_Link__c();
    }
     
}


Help me out with a solution.

Thanks and Regards,
Azar Khasim.
Rounak SharmaRounak Sharma
Hello Azar,

Please use 
<apex:outputPanel rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
for Lightning 

Please let me know of it helped you in any way.
Thanks
 
azar khasimazar khasim
Hello Rounak,

Actually the above code part is stopping my VF page to display all the Outputpanel Content in the preview.

Regards,
Azar.