You need to sign in to do that
Don't have an account?
siva 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());
}
}
----------------------
<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());
}
}
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 )
<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