Tag Archives: Visualforce Page

Parent Record Related List in Visualforce Page

Using apex:relatedlist we can display a list of Salesforce records that are related to a parent record with a lookup or master-detail relationship.

Let’s take an example:

To render the visualforce page properly, you must associate the Visualforce page with a valid account record in the URL. e.g. if 0019000000nMEIG is the account ID, the resulting URL should be: https://Salesforce_instance/apex/TestRelatedListPage?id=0019000000nMEIG
Visualforce Page:

<apex:page standardcontroller="Account">
<apex:pageblock title="Account">
<apex:outputlabel value="{!account.name}"></apex:outputlabel>
</apex:pageblock>
<apex:relatedlist list="Opportunities">
</apex:relatedlist>
<apex:relatedlist list="Contacts">
</apex:relatedlist>
<apex:relatedlist list="Cases">
</apex:relatedlist>
</apex:page>

Output:
download

Action Support in Visualforce Page

Action support component adds AJAX support to other component. It allow the component to be refreshed asynchronously by calling the controller’s method when any event occurs (like onclik, onblur etc). It also allows to rerender page sections as desired.
In this article I will demonstrate how to use actionsupport in visualforce page.
Create Apex class with following code:

Public with sharing class TestActionSupport
{
    public Integer Total {get;set;}
     
    Public TestActionSupport()
    {
        Total = 0;
    }
     
    Public void IncreaseNumber()
    {
        Total ++;
    }
}

Now create the Visualforce page:

<apex:page controller="TestActionSupport">
<apex:form>
<apex:pageblock>
<apex:pageblocksection>
<apex:outputpanel id="idPanel1"> 
<apex:outputtext value="Click here to increase number">
<apex:actionsupport action="{!IncreaseNumber}" event="onclick" rerender="idResult">
</apex:actionsupport></apex:outputtext></apex:outputpanel>
<apex:outputtext id="idResult" label="No. of Clicked:" value="{!Total}">
</apex:outputtext></apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

In the above apex class, initially variable “Total” value is set to 0. But when we will click on visualforce page “Click here to increase number” then controller action method will be called and variable “Total” will be increase. The action support also rerender the outputText which refreshes the outputText and hence shows the new value set in controller method.

Before Click:
download

After Click:

download (1)

Action Poller in Visualforce Page

Action poller acts as a timer in visualforce page. It sends an AJAX request to the server according to a time interval (time interval has to be specified or else it defaults to 60 seconds). Each request can result in a full or partial page update.
In this article I will demonstrate how to use actionpoller in visualforce page.

  • In the action attribute a controller method gets called. The method gets called with a frequency defined by the interval attribute which has to be greater than or equal to 5 seconds.
  • Time out can also be specified as an attribute in actionpoller. Once the time out point is reached it stops making AJAX callout to the server and controller method is no more called.

Create Apex class with following code:

Public with sharing class TestActionPoller
{
    Public  Integer Total{get;set;}
     
    Public TestActionPoller()
    {
        Total = 0;
    }
  
    Public void CountMethod()
    {
        Total++;
    }
}

Now create the Visualforce page:

<apex:page controller="TestActionPoller">
<apex:form>
<apex:outputtext id="idCount" value="Increase in every 5 seconds: {!Total}">
<apex:actionpoller action="{!CountMethod}" interval="5" rerender="idCount">
</apex:actionpoller>
</apex:outputtext></apex:form>
</apex:page>

In above visualforce page Action poller calls the method “CountMethod” every 5 seconds where the variable “Total” is updated. Rerender attribute refreshes the page block hence showing the updated value of variable “Total”.

download

How to Use Action Function in Visualforce Page?

ActionFunction is used to execute a method in your Apex Class from your Visualforce Page asynchronously via AJAX requests. Its easy to call a controller method using attribute action="{!YourMethodeName}". An component must be a child of an component. In this article I will demonstrate, how to use actionfunction in visualforce page.

Note: Beginning with API version 23 you can’t place apex:actionFunction inside an iteration component — apex:pageBlockTable, apex:repeat, and so on. Put the apex:actionFunction after the iteration component, and inside the iteration put a normal JavaScript function that calls it.

public with sharing class ActionFunctionTest
{
      public String ReturnValue {get;set;}
      public String FirstName {get;set;}
      public String LastName {get;set;}
    
      public void Result()
      {
          ReturnValue = 'My name is : ' + FirstName +' '+ LastName ;
      }
}

In above class, the variables “FirstName” and “LastName” are the parameters supplied by the javascript and variable “ReturnValue” will display the result.

<apex:page controller="ActionFunctionTest">
<apex:form id="TestFrm">
First Name : 
<apex:inputtext id="txtFirstName" required="true">
Last Name : 
<apex:inputtext id="txtLastName" required="true">
<span class="btn" onclick="return GetMyName()"> Get My Name </span>
<apex:outputpanel id="resultPanel">
<apex:actionstatus id="TestStatus" starttext="Processing..." stoptext="">
<b><apex:outputlabel value="{!ReturnValue}"></apex:outputlabel></b>
</apex:actionstatus></apex:outputpanel>
<apex:actionfunction action="{!Result}" name="TestAF" rerender="resultPanel" status="TestStatus">
<apex:param assignto="{!FirstName}" name="FirstParameter" value="">
<apex:param assignto="{!LastName}" name="SecondParameter" value="">
</apex:param></apex:param></apex:actionfunction>
</apex:inputtext></apex:inputtext></apex:form>
 
<script type="text/javascript">
function GetMyName()
{
var FirstNameValue = document.getElementById("{!$Component.TestFrm.txtFirstName}").value;
var LastNameValue = document.getElementById("{!$Component.TestFrm.txtLastName}").value;
if(FirstNameValue == '' || LastNameValue == '')
{
alert('Please enter your first name and last name');
return false;
}
TestAF(FirstNameValue ,LastNameValue );
return true;
}
</script>
</apex:page>

The below code is used to define the “actionFunction” in visual force page. To send the parameter, we have to use “apex:param” tag. Attribute “assignTo” will assign the parameter to variable name specified in Apex code. Here we have assigned the value to variable “FirstName” and “LastName”.

<apex:actionfunction action="{!Result}" name="TestAF" rerender="resultPanel" status="TestStatus">
<apex:param assignto="{!FirstName}" name="FirstParameter" value="">
<apex:param assignto="{!LastName}" name="SecondParameter" value="">
</apex:param></apex:param></apex:actionfunction>

The resulting JavaScript function created by the visualforce will be “TestAF” because we have set that name for the “apex:actionFunction”. Actionfunction’s attribute “action” will call the method “Result” which is specified in Apex class “ActionFunctionTest” and “status” will show the Ajax request status. Below JavaScript method is used to call the generated method by “apex:actionFunction”.

<script type="text/javascript">
  function GetMyName()
  {
   var FirstNameValue = document.getElementById("{!$Component.TestFrm.txtFirstName}").value;
   var LastNameValue = document.getElementById("{!$Component.TestFrm.txtLastName}").value;
   if(FirstNameValue == '' || LastNameValue == '')
   {
    alert('Please enter your first name and last name');
    return false;
   }
   TestAF(FirstNameValue ,LastNameValue );
   return true;
  }
 </script> 

1

2

3

4

Links in Visualforce Page pageblocktables

<apex:pageblocktable value="{!FindContact}" var="item">
<apex:column headervalue="Name">
<apex:outputlink value="/{!item.id}">
<apex:outputtext value="{!item.Name}"></apex:outputtext>
</apex:outputlink>
</apex:column>
<apex:column headervalue="Email" value="{!item.Email}"></apex:column>
<apex:column headervalue="Phone" value="{!item.Phone}"></apex:column>
<apex:column headervalue="Birthdate" value="{!item.Birthdate}"></apex:column>
</apex:pageblocktable>