Different Visualforce Action Components : In this Visualforce Training Tutorial we are going to learn about advanced topics on Visualforce.  Here we  learn about what are the different visualforce action components used in visualforce pages that interacts with controllers. In visualforce Salesforce.com has provided different action components to built various aplications with out using different Javascript code, ajax and different javascript libraries. All these applications are integrated with different scripts and HTML components automatically when visualforce components are used in VF pages to give rich user interactive experience to users.

What is an Action Component in Visualforce ?

Action Component invokes with a method in a controller and used to submit, delete, edit or any other action function can be done.

Different Visualforce Action Components

When writing visualforce page we can use ajax in pages. Visualforce supports ajax in two ways. They are

  • Visualforce action components allows different actions to run on background.
  • Visualforce action components can be used to refresh a different visualforce subsets like tables.

Different Visualforce Action Components.

  • Partial page reference using reRender attribute.
  • Actionfunction Components.
  • ActionPoller Component.
  • ActionSupport Component.
  • ActionStatus Component.

When a page is partially refreshed rather than refreshing entire page give rich experience to user and also it gives better page loading performance. Above mentioned action components will be clearly explained in our next visualforce tutorials.

Here’s a list of examples for each of these Visualforce components:

1. Partial Page Refresh using reRender Attribute

The reRender attribute allows you to update a specific part of the page without refreshing the entire page.

Example:

<apex:page>
    <apex:form>
        <apex:inputText value="{!inputTextValue}" />
        <apex:commandButton action="{!processInput}" value="Submit" reRender="outputPanel"/>
        <apex:outputPanel id="outputPanel">
            <apex:outputText value="Updated value: {!outputTextValue}" />
        </apex:outputPanel>
    </apex:form>
</apex:page>

In this example, when the “Submit” button is clicked, only the outputPanel is refreshed with the new value, rather than the entire page.

2. actionFunction Component

The apex:actionFunction component allows you to create a JavaScript function that can invoke a controller method without a page refresh.

Example:

<apex:page>
    <apex:form>
        <apex:actionFunction name="callServerMethod" action="{!controllerMethod}" reRender="outputPanel" />
        <button onclick="callServerMethod();">Click to Call Server Method</button>
        <apex:outputPanel id="outputPanel">
            <apex:outputText value="Result: {!resultValue}" />
        </apex:outputPanel>
    </apex:form>
</apex:page>

Here, clicking the button triggers the callServerMethod() JavaScript function, which in turn calls the controllerMethod on the server. Only the outputPanel is rerendered with the result.

3. actionPoller Component

The apex:actionPoller component allows periodic, automatic page updates by calling a controller method at set intervals.

Example:

<apex:page>
    <apex:form>
        <apex:actionPoller action="{!pollServer}" interval="5" reRender="outputPanel" />
        <apex:outputPanel id="outputPanel">
            <apex:outputText value="Latest Value: {!latestValue}" />
        </apex:outputPanel>
    </apex:form>
</apex:page>

This example calls the pollServer method every 5 seconds to refresh the outputPanel with the latest value, creating an automatic update effect.

4. actionSupport Component

The apex:actionSupport component is used to add AJAX support to a Visualforce component, like rerendering a section based on user actions (e.g., clicking, changing a value).

Example:

<apex:page>
    <apex:form>
        <apex:inputText value="{!userInput}">
            <apex:actionSupport event="onchange" reRender="outputPanel" action="{!updateValue}" />
        </apex:inputText>
        <apex:outputPanel id="outputPanel">
            <apex:outputText value="Updated Text: {!updatedText}" />
        </apex:outputPanel>
    </apex:form>
</apex:page>

In this example, whenever the input text changes, the actionSupport triggers the updateValue action and rerenders the outputPanel with the updated text.

5. actionStatus Component

The apex:actionStatus component displays a status message or loading indicator during AJAX actions, enhancing the user experience.

Example:

<apex:page>
    <apex:form>
        <apex:actionStatus id="loadingStatus" startText="Loading..." stopText="Complete!" />
        <apex:commandButton action="{!processData}" value="Submit" reRender="outputPanel" status="loadingStatus"/>
        <apex:outputPanel id="outputPanel">
            <apex:outputText value="Processed Result: {!resultValue}" />
        </apex:outputPanel>
    </apex:form>
</apex:page>

In this example, clicking “Submit” shows “Loading…” in the status area while the action runs, then displays “Complete!” once the action finishes and the outputPanel is refreshed.