<apex:> tags (specific to Salesforce), to create forms, dashboards, and customized views.<apex:page controller="MyCustomController">
<h1>Welcome to Visualforce!</h1>
<apex:form>
<apex:inputText value="{!myText}" />
<apex:commandButton value="Submit" action="{!doSomething}" />
</apex:form>
</apex:page>
* The {!myText} is a Visualforce expression, binding the input value to a controller variable.
* The button triggers the doSomething method in the Apex controller.
A Visualforce page in Salesforce is super versatile! You can use it in several places across the platform to create custom experiences. Let’s break it down! ?
<apex:page> tag. For example, an extension can add a method to retrieve an account name and a custom action to save the account and redirect to its detail page. <apex:pageBlockTable> component and the StandardSetController class in Apex, which provides methods for pagination like next() and previous(). Let’s break this down! I’ll explain the difference between a standard controller and a custom controller in Salesforce — it’s a common question for Visualforce development. ?
<apex:page standardController="Account">
<h1>{!Account.Name}</h1>
<apex:form>
<apex:inputField value="{!Account.Phone}"/>
<apex:commandButton value="Save" action="{!save}"/>
</apex:form>
</apex:page>
* This uses the Account standard controller — Salesforce handles loading the record and saving changes automatically!
Example :
Apex Controller :
public class MyCustomAccountController {
public Account acc {get; set;}
public MyCustomAccountController() {
acc = new Account();
}
public PageReference saveAccount() {
insert acc;
return null;
}
}
Visualforce Page :
<apex:page controller="MyCustomAccountController">
<apex:form>
<apex:inputField value="{!acc.Name}"/>
<apex:commandButton value="Save" action="{!saveAccount}"/>
</apex:form>
</apex:page>
* Here, the save logic is handled by the saveAccount method in the custom controller.
public class MyAccountExtension {
private final Account acc;
public MyAccountExtension(ApexPages.StandardController stdController) {
this.acc = (Account)stdController.getRecord();
}
public String getCustomGreeting() {
return 'Hello, ' + acc.Name + '!';
}
}
<apex:page standardController="Account" extensions="MyAccountExtension">
<h1>{!customGreeting}</h1>
</apex:page>
| Feature | Standard Controller | Custom Controller |
|---|---|---|
| CRUD Operations | Automatic | Manual (you write the logic) |
| Business Logic | Limited | Fully customizable |
| Security Enforcement | Enforced automatically | Must handle manually |
| Multiple Objects | No | Yes |
| Ease of Use | Simple, quick to set up | More effort, but flexible |
isAccessible, isCreateable, and isUpdateable methods in Apex to check field-level security before performing operations.
action : Calls a controller method.rerender : Updates part of the page without a full refresh.renderAs : Renders the page as a PDF or other format. 1. URL Parameters :
How it works : You append parameters to the end of the Visualforce page URL using a question mark (?) to start, and ampersands (&) to separate multiple parameters.
/apex/MyPage?param1=value1¶m2=value2In Visualforce: Use {!$CurrentPage.parameters.paramName} to access the parameter values.
2. <apex:param> Tag :
How it works: Use this tag within <apex:commandLink> or <apex:commandButton> to pass parameters when navigating between Visualforce pages.
In Visualforce: The destination page can then retrieve these parameters using {!$CurrentPage.parameters.paramName}.
3. Apex Controller :
How it works: You can pass parameters to an Apex controller method through URL parameters or within <apex:actionFunction>.
In Apex: Use ApexPages.currentPage().getParameters().get('paramName') to retrieve the parameter values.
Important Considerations:
Example: Passing parameters through URL
Visualforce Page :
<apex:page controller="MyController">
<apex:outputLink value="/apex/AnotherPage?name=John&age=30">
Click here to go to another page
</apex:outputLink>
</apex:page>
Apex Controller :
public class MyController {
// ...
}
Another Visualforce Page :
<apex:page controller="AnotherController">
Name: {!name}
Age: {!age}
</apex:page>
Another Apex Controller :
public class AnotherController {
public String name {get; set;}
public Integer age {get; set;}
public AnotherController() {
name = ApexPages.currentPage().getParameters().get('name');
age = Integer.valueOf(ApexPages.currentPage().getParameters().get('age'));
}
}This example demonstrates how to pass parameters through the URL and retrieve them in both Visualforce and Apex.
apex:pageBlockTable.
In Visualforce, extensions are Apex classes that enhance the functionality of a page's controller. Here's a breakdown of what that means:
1. Controllers in Visualforce
2. Why Use Extensions?
3. How Extensions Work
ApexPages.StandardController (for extending standard controllers) or the type of your custom controller.extensions Attribute: You associate an extension with a Visualforce page using the extensions attribute of the <apex:page> tag.Example :
<apex:page standardController="Account" extensions="MyExtension">
<h1>Account Name: {!account.Name}</h1>
<apex:form>
<apex:inputField value="{!account.Name}"/>
<apex:commandButton value="Save" action="{!save}"/>
<apex:commandButton value="Custom Action" action="{!myCustomAction}"/>
</apex:form>
</apex:page>
public class MyExtension {
private Account acc;
public MyExtension(ApexPages.StandardController stdController) {
this.acc = (Account)stdController.getRecord();
}
public PageReference myCustomAction() {
// Perform some custom logic here
return null;
}
}
In this example, MyExtension extends the standard Account controller. It adds a new action myCustomAction while still allowing the page to use the standard save action.
Key Benefits of Extensions :
What is View State?
How View State Works :
Key Considerations :
Best Practices for Managing View State :
transient keyword in Apex to exclude variables that don't need to be persisted across requests.<apex:outputText> instead of <apex:inputField> for displaying non-editable data.
Monitoring View State :
By understanding how Visualforce handles view state and following best practices, you can build efficient and performant Visualforce pages.
In Visualforce, both <apex:outputField> and <apex:inputField> are used to display data related to fields on Salesforce objects, but they serve different purposes:
<apex:outputField>
<apex:outputField>.<apex:outputField value="{!Account.Name}" /><apex:inputField>
<apex:outputField>, it also respects the field's attributes from Setup, including:
<apex:inputField value="{!Account.Name}" />This would display the Account Name in an editable text box, allowing users to modify it.
Key Differences Summarized :
| Feature | <apex:outputField> |
<apex:inputField> |
|---|---|---|
| Purpose | Read-only display | Editable input |
| User Interaction | Cannot edit | Can edit |
| Input Element | None | Renders input element (text box, checkbox, etc.) |
<apex: page> element can be used to change the styling of a page that utilizes a standard controller. The following page, for example, utilizes the Account standard controller but outputs a page that accentuates the Opportunities tab and uses the yellow colour of the Opportunity tab:<apex:page standardController="acunt" tabStyle="opp">
</apex:page>?<apex: map> component specifies the size, type, center point, and initial zoom level of the map canvas. The <apex:mapMarker> child component specifies the address or geolocation of the markers to be placed on the map (latitude and longitude). When a marker is clicked or tapped, the <apex:mapInfoWindow> component can be used to add configurable information panels. <apex: page> tag must be included in the page markup. <apex: page standardController="Account">
<!-- Website content >
</apex:page>?apex:pagemessage element is used in a Visualforce page, this element will have various properties that will be used.| Title | The title of the Error will be displayed. |
| Summary | The summary of the title Error Message is printed with this parameter. |
| Detail | This will display the Error's detailed description. |
| Severity | This parameter is an Error logotype. Error, Warning, Info, and Confirm are the several types of error severity. |
| Strength | The intensity message logo is available in sizes ranging from 1 to 3. |
| Rendered | This property determines whether or not the element should be enabled. |
| Escape | A Boolean value indicates whether vulnerable HTML and XML elements should be encoded in the HTML produced by this module. |
| Show Detail | It's a Boolean type that determines whether the particular location of the messages is displayed; by default, it's false. |
reference[expression]sObject, global variable, or an Apex class.