Visualforce Page Unit | Learn All About It | Salesforce
VisualForce Pages
Visualforce pages are the fundamental building blocks for app developers. A Visualforce page resembles a typical Web page, but it adds extensive functionality for accessing, displaying, and updating your company's data. Pages can be accessed and triggered using a unique URL, much like on a standard web server.
Example:-
Get the Account fields input by the User, In the next section, there would be a button for adding Contact info.
You can create multiple rows for contacts by clicking on add contact button.
If there the name field for Account is blank and you click on the add contact button, the error should be generated.
After saving these users will be redirected to the Account page.
Don't forget to check out: 4 Reasons to use AngularJS in Salesforce Visualforce pages
VF PAGE CODE
<apex:page standardController="Account" extensions="AddContact">
<apex:form id="myForm" >
<apex:pageblock >
<apex:pageblockSection >
<apex:inputField value="{!Account.Name}"/>
<apex:inputField value="{!Account.Website}"/>
<apex:inputField value="{!Account.Industry}"/>
<apex:inputField value="{!Account.Phone}"/>
</apex:pageblockSection>
</apex:pageblock>
<apex:commandButton value="Add Contact" action="{!addAContact}" onclick="firstform" />
<apex:pageblock id="firstform" rendered="{!isContactSectionEnabled}">
<!-- <apex:commandButton value="Add Contact" action="{!addAContact}" onclick="firstform" /> -->
<apex:repeat value="{!lContacts}" var="x">
<apex:panelGrid columns="8">
First Name:<apex:inputField value="{!x.c.firstName}" />
Last Name:<apex:inputField value="{!x.c.lastName}" />
<apex:commandButton action="{!deleteContact}" style="Button" value="Delete Contact" reRender="myForm" immediate="true">
<apex:param value="{!x.counter}" name="selected"
assignTo="{!selectedContact}"/>
</apex:commandButton>
</apex:panelGrid>
</apex:repeat>
</apex:pageblock>
<apex:commandButton value="Save" action="{!dosave}" />
</apex:form>
</apex:page>
Controller Code
public class AddContact {
public Boolean isContactSectionEnabled{get;set;}
ApexPages.StandardController sc;
public Account acct{get;set;}
public Integer marker=2;
public Integer selectedContact{get;set;}
public List<WrapperClass> lContacts{get;set;}
public AddContact(ApexPages.StandardController controller) {
this.acct = (Account)controller.getRecord();
sc=controller;
lContacts=new List<WrapperClass>();
Contact c=new Contact();
lContacts.add(new WrapperClass(c,1));
}
public PageReference deleteContact(){
Integer x=-1;
for(WrapperClass wc:lContacts){
x++;
if(wc.counter==selectedContact){
System.debug('-->selected contact:'+selectedContact+' position:'+x);
break;
}
}
lContacts.remove(x);
return null;
}
public PageReference saveAccount(){
Database.SaveResult sr = Database.insert(acct, false);
Id idey=sr.getId();
List<Contact> contactList=new List<Contact>();
for(WrapperClass wc:lContacts){
Contact c=new Contact();
c.lastName=wc.c.lastName;
c.firstName=wc.c.firstName;
c.accountid=idey;
contactList.add(c);
}
insert contactList;
return null;
}
public PageReference addAContact(){
if(acct.Name !=null){
isContactSectionEnabled=True;
Contact c=new Contact();
lContacts.add(new WrapperClass(c,marker));
marker=marker+1;
}
return null;
}
public class WrapperClass{
public Integer counter{get;set;}
public Contact c{get;set;}
public WrapperClass(Contact cntc,Integer i){
this.c=cntc;
this.counter=i;
}
}
public pagereference dosave(){
Database.SaveResult sr = Database.insert(acct, false);
Id idey=sr.getId();
List<Contact> contactList=new List<Contact>();
for(WrapperClass wc:lContacts){
Contact c=new Contact();
c.lastName=wc.c.lastName;
c.firstName=wc.c.firstName;
c.accountid=idey;
contactList.add(c);
}
insert contactList;
PageReference pageRef = new PageReference('https://arpitalgoworks-dev-ed.lightning.force.com/lightning/r/Account/'+acct.id+'/view?0.source=alohaHeader');
pageRef.setRedirect(true);
return pageRef;
}
}
Example:-
Display the Apex job data of batch class in VF Page using Pie Chart.
Check out another amazing blog by Arpit here: Opportunity Line Item | Salesforce Developer Guide
VF Code
<apex:page controller="JobDetails">
<apex:form >
<apex:pageblock >
<apex:actionPoller interval="5" action="{!showData}" reRender="counter"/>
<apex:commandButton value="Run" action="{!apexjob1}" />
<apex:pageBlockSection id="counter">
<apex:pageBlockSectionItem >
<apex:dataTable value="{!asj}" var="a" >
<apex:facet name="header"> NewOpportunityBatch Apex Job Data </apex:facet>
<apex:column value="{!a.Id}"></apex:column>
<apex:column value="{!a.Status}"></apex:column>
<apex:column value="{!a.ExtendedStatus}"></apex:column>
</apex:dataTable>
<apex:chart animate="true" height="350" width="450" data="{!pieData}" >
<apex:pieSeries dataField="data" labelField="name"/>
<!-- <apex:chartLabel display="middle" field="data" /> -->
<apex:legend position="right"/>
</apex:chart>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Code
public class JobDetails {
public list<AsyncApexJob> asj {get;set;}
public List<PieWedgeData> pieChartData {get;set;}
public String name { get; set; }
public Decimal data { get; set; }
Id batchprocessid;
public void apexjob1(){
NewOpportunityBatch newBatch = new NewOpportunityBatch();
batchprocessid = database.executeBatch(newBatch);
System.debug('@@batchprocessid'+batchprocessid);
// asj = database.query[Select Id, Status, ExtendedStatus from AsyncApexJob where Id =:batchprocessid] ;
asj = [SELECT Id, Status,ExtendedStatus, JobItemsProcessed, TotalJobItems, NumberOfErrors
FROM AsyncApexJob WHERE ID =: batchProcessId ];
System.debug('@asj'+asj);
}
//public PageReference getPieData()
public List<PieWedgeData> getPieData(){
List<PieWedgeData> data = new List<PieWedgeData>();
if(asj !=null){
data.add(new PieWedgeData('TotalJobItems',asj[0].TotalJobItems));
data.add(new PieWedgeData('JobItemsProcessed',asj[0].JobItemsProcessed));
// data.add(new PieWedgeData('NumberOfErrors',asj[0].NumberOfErrors));
System.debug('@asj'+asj);
// data.add(new PieWedgeData('Status',true));
}
return data;
}
public PageReference showData(){
apexjob1();
return null;
}
public class PieWedgeData{
public String name { get; set; }
public Decimal data { get; set; }
public PieWedgeData(String name, Decimal data){
this.name = name;
this.data = data;
}
}
}
Responses