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
siva krishna 61siva krishna 61 

how to convert visualforce page to lightning using slds in salesforce

Visualforce page
----------------------

<apex:page standardController="contact" extensions="CustSearch" sidebar="false">
    <apex:form >
        <apex:pageMessages >
        
        </apex:pageMessages>
        
       
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="search" action="{!Search}" />
                          
            </apex:pageBlockButtons>
             
          <apex:pageBlockSection columns="1">
                <apex:inputField value="{!con.FirstName}" />                
                <apex:inputField value="{!con.Email}" />             
                <apex:inputField value="{!con.Customer_Account_Number__c}"/>
                <apex:inputField value="{!con.MailingStreet}"/> 
         
          </apex:pageBlockSection>
             
                           
            <apex:pageBlockTable value="{!cont}"  var="c" rendered="{! cont.size!=0}">  
                 <apex:column headerValue="LastName"><apex:commandLink value="{!c.lastname}" action="{! URLFOR($Action.contact.view,c.id)}"/></apex:column>
                <apex:column value="{!c.firstname}" />
                <apex:column value="{!c.Customer_Account_Number__c}"/>
                <apex:column value="{!c.Enrollment_Status__c}" />                                              
                 <apex:column value="{!c.account.name}" />
                <apex:column value="{!c.email}" />
                <apex:column value="{!c.phone}" /> 
                <apex:column value="{!c.MailingStreet}" />  
                <apex:column value="{!c.MailingCity}" /> 
                  <apex:column value="{!c.MailingPostalCode}" />
                    <apex:column value="{!c.MailingState}" />                      
                </apex:pageBlockTable> 
              
        </apex:pageBlock>
    </apex:form>
</apex:page>


Apex class
-------------



public class CustSearch {
    
    public contact con{set;get;}
    public list<contact> cont {set;get;}
    
    public CustSearch(Apexpages.StandardController controller){
        cont = new list<contact>();
    // list<string> str = new list<string>{'FirstName','LastName','Email','AccountId','Account.name', 'Customer_Account_Number__c'};  
    
    list<string> str = new list<string>{'FirstName','LastName','Email','Customer_Account_Number__c'};  

        controller.addFields(str);
        con = (contact)controller.getRecord();  
    }
    
    public void search(){
     transient String lastname= '%'+con.LastName+'%';
     transient string firstname = '%'+con.FirstName+'%';
     transient string email1 = '%'+con.Email+'%';
   transient id accName = con.Accountid;
   transient String acctno = '%'+con.Customer_Account_Number__c+'%';
   
   transient String mStreet = '%'+con.MailingStreet+'%';
  
        System.debug(accName);
        System.debug(con.AccountId);
        cont = [select id,firstname,lastname,email,phone,contact.account.name, Customer_Account_Number__c, Enrollment_Status__c, MailingStreet, MailingCity, MailingPostalCode, MailingState  from contact where firstname like : firstname OR lastname like : lastname OR email like : email1 OR Customer_Account_Number__c like :acctno OR MailingStreet like : mStreet  ];    
            
        if(cont.size()==0)
       ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Error, ' No Matching Contact Records Found '));
       System.debug(cont.size());        
    }
}
Aslam ChaudharyAslam Chaudhary
Refer Below link 
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_responsive.htm?search_text=stacked  (https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_responsive.htm?search_text=stacked )
dandamudidandamudi
Use below code, and you can make all apex controls also make lightning look by using SLDS(https://www.lightningdesignsystem.com/)
<apex:page standardController="contact" extensions="CustSearch" sidebar="false" 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 -->
          
            
                <apex:form >
        <apex:pageMessages >
        
        </apex:pageMessages>        
       
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="search" action="{!Search}" />
                          
            </apex:pageBlockButtons>
             
          <apex:pageBlockSection columns="1">
                <apex:inputField value="{!con.FirstName}" />                
                <apex:inputField value="{!con.Email}" /> 
                <apex:inputField value="{!con.MailingStreet}"/> 
         
          </apex:pageBlockSection>
             
               <div class="slds-grid slds-wrap">            
            <apex:pageBlockTable value="{!cont}"  var="c" rendered="{! cont.size!=0}">  
                 <apex:column headerValue="LastName"><apex:commandLink value="{!c.lastname}" action="{! URLFOR($Action.contact.view,c.id)}"/></apex:column>
                <apex:column value="{!c.firstname}" />
                                                            
                 <apex:column value="{!c.account.name}" />
                <apex:column value="{!c.email}" />
                <apex:column value="{!c.phone}" /> 
                <apex:column value="{!c.MailingStreet}" />  
                <apex:column value="{!c.MailingCity}" /> 
                  <apex:column value="{!c.MailingPostalCode}" />
                    <apex:column value="{!c.MailingState}" />                      
                </apex:pageBlockTable> 
                    </div>
              
                    </apex:pageBlock>
                       
                </apex:form>
          <!-- / RESPONSIVE GRID EXAMPLE -->
      </div>
    </body>
  </html>
    
</apex:page> 

Hope this helps you. 

Please let me know in case of any other assistance
Siva