Tag Archives: Visualforce Page

How to Create a Visualforce page

To create a new VisualForce page go to “Your Name” > Setup > Develop > Pages and click the New button.

  • Your Name” > Setup
    download
  • Develop > Pages
    download (1)
  • New Page Button
    download (2)

You will now see the VisualForce page creation wizard. The very first thing you will want to do is give your new VisualForce page a Label. A label is a more esthetic name of what your page name will actually be.

Once you’ve typed your page label press the Tab key to set your cursor to the Name field. You will notice that the Name automatically took the value of “Test Page” from Label. SalesForce won’t allow you to have spaces in the name so replace your space with an Underscore character as shown below.

download (3)

SalesForce will automatically give you some default VisualForce markup to work with as shown below.

<apex:page>
  <!-- Begin Default Content REMOVE THIS -->
 <h1>Congratulations</h1>
  This is your new Page
  <!-- End Default Content REMOVE THIS -->
</apex:page>
  • And now save your page.
  • For preview click on preview button.

download (4)

Picklist Without None Value in Visualforce Page

Controller:

public class Sample{
    
    public Account acc {get;set;}
    public List<SelectOption> typeOptions {get;set;}
    
    // Constructor called when page is accessed.
    public Sample() {
        
        acc = new Account();        
        typeOptions = new List<SelectOption>();
        
        //Use DescribeFieldResult object to retrieve status field.
        Schema.DescribeFieldResult typeFieldDescription = Account.Type.getDescribe();
        
        //For each picklist value, create a new select option
        for (Schema.PickListEntry pl:typeFieldDescription.getPicklistValues()){
            typeOptions.add(new SelectOption(pl.getValue(),pl.getLabel()));
            
            //Obtain and assign default value
            if (pl.defaultValue){
                acc.Type= pl.getValue();
            }  
        }     
    }
}

Visualforce Page:

<apex:page controller="Sample">
    Please select account type:
    <br/>
    <apex:form >
        <apex:selectList size="1" value="{!acc.Type}">
            <apex:selectOptions value="{!typeOptions}"/>
        </apex:selectList>
    </apex:form>
</apex:page>

Output:

Export Data In Excel Using Visualforce Page

Here in below example I have a VF Page “AccountDetails.vf” with parameter of account Id. In that VF Page I’m showing the Account record respective Contacts. And a button that export the Contact records to excel sheet. Another VF Page “ContactExportToExcel.vf” for excel.

Viualforce Page: AccountDetails.vf

<apex:page standardController="Account" extensions="ContactExportToExcel">
    <apex:form>
        <apex:pageBlock title="Hello {!$User.FirstName}!">
            You are viewing the {!account.name} account.
        </apex:pageBlock>
        <apex:pageBlock title="Contacts">
            <apex:pageBlockTable value="{!account.Contacts}" var="contact">
                <apex:column value="{!contact.Name}"/>
                <apex:column value="{!contact.Email}"/>
                <apex:column value="{!contact.Phone}"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
        
        <apex:commandButton value="Export To Excel" Action="{!ExportToExcel}"/>  
    </apex:form>
</apex:page>

Remember to pass an Account ID as a query string to this page.

Controller:

public with sharing class ContactExportToExcel {
    
    Public List<String> selectedFieldsList {get;set;}
    Public List<Contact> conList {get;set;}
    
    public ContactExportToExcel(ApexPages.StandardController stdCtrl) {
        Account acc = (Account)stdCtrl.getRecord();
        conList = New List<Contact>();
        conList = [Select Id, Name, Email, Phone From Contact Where AccountId =: acc.Id];
    }
    
    Public PageReference ExportToExcel(){
        selectedFieldsList = New List<string>();
        selectedFieldsList.add('Name'); 
        selectedFieldsList.add('Email');
        selectedFieldsList.add('Phone');
        
        PageReference pgRef = New Pagereference('/apex'+'/ContactExportToExcel');
        pgRef.setRedirect(false); 
        return pgRef;
    }
    
}

Visualforce Page: ContactExportToExcel.vf

<apex:page standardController="Account" extensions="ContactExportToExcel" contentType="application/vnd.ms-excel#Contacts.xls" cache="true">
    <apex:pageBlock >
        <apex:pageblocktable value="{!conList }" var="tab">
            <apex:repeat value="{!selectedFieldsList}" var="field">
                <apex:column value="{!tab[field]}"/>
            </apex:repeat>
        </apex:pageblocktable>
    </apex:pageBlock>
</apex:page>

Output:

Close popup and refresh parent window in Visualforce Page

Its a very common requirement to open a pop up by clicking a button . Once you are done with pop up, close the pop up and refresh the parent window so that user will be able to see the update on parent window at the same time.

Here is the sample code for it:

Command button in Visualforce Page:

<apex:commandbutton action="{!save}" id="button" oncomplete="javascript:CloseAndRefresh()" value="Update"/>

And here is the java script function:

<script language="JavaScript" type="text/javascript">
function CloseAndRefresh(){
window.opener.location.href="/{!$CurrentPage.parameters.id}";
window.top.close();

}
</script>

Note: I would suggest to check this setting Setup-> Personal Setup  ->  My Personal Information -> Personal Information
Here check for “Development Mode”. I have seen at various places and at community as well that if this check box is checked then popup would not close. Here, I would suggest to turn this checkbox off while you are testing this.