Detail Page Display Using ActionSupport in Visualforce for Dynamic Record Views - Salesforce Tutorial

Detail Page Display Using ActionSupport in Visualforce for Dynamic Record Views that enables dynamic display of detailed information when a user interacts with a specific part of the page, such as clicking a record name. By using the <apex:actionsupport> tag, developers can set events like “onclick” to trigger a partial page refresh, selectively updating only specific sections of the page, rather than reloading the entire page.

This approach enhances user experience by displaying detailed views with minimal load time. For instance, when a user clicks on a record name, <apex:actionsupport> passes the record ID as a parameter, rerendering a designated <apex:outputpanel> to display the selected record’s detailed information.

Detail Page Display Using ActionSupport in Visualforce

This scenario describes the usage of apex:actionsupport and apex:param. Here param is used to pass individual record ids within the vf page to display detail page.

Visualforce page:
<apex:page sidebar="false" standardController="DataLoadTest__c" recordSetVar="records">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value="{!records}" var="r">
<apex:column headerValue="Name">
<apex:actionsupport event="onclick" rerender="out" status="mystatus">
{!r.Name}
<apex:param name="rId" value="{!r.Id}"/>
</apex:actionsupport>
</apex:column>
<apex:column headerValue="City">
{!r.City__c}
</apex:column>
<apex:column headerValue="Country__c">
{!r.Country__c}
</apex:column>
<apex:column headerValue="phone">
{!r.phone__c}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:actionstatus id="mystatus" startText="loading.................">
<apex:facet name="stop">
<apex:outputpanel id="out">
<apex:detail subject="{!$CurrentPage.parameters.rId}" relatedList="false"/>
</apex:outputpanel>
</apex:facet>
</apex:actionstatus>
</apex:form>
</apex:page>

This Visualforce page is built for displaying a list of records from the DataLoadTest__c custom object in a tabular format, with some interactive elements that enable viewing details of individual records. Here’s a breakdown of each component and what it does:

Key Components of the Visualforce Page

apex:page Tag
- sidebar="false": This hides the standard Salesforce sidebar.
- standardController="DataLoadTest__c": Indicates that the page uses the DataLoadTest__c object as its standard controller, meaning it automatically binds to records of this object type.
- recordSetVar="records": Holds a collection of DataLoadTest__c records for the page, enabling display of multiple records.
apex:form Tag
- Wraps the page’s main content in a form, allowing for input processing.
apex:pageBlock Tag
- This block organizes the content within a page. It typically applies Salesforce styling and layout automatically.
apex:pageBlockSection Tag
- Groups content within the apex:pageBlock, enabling the table and any other section-related elements to be displayed cohesively.
apex:pageBlockTable Tag
- value="{!records}": Binds the table to the records variable, which contains the collection of DataLoadTest__c records.
- var="r": Specifies that each row in the table will represent a single DataLoadTest__c record, referenced by the variable r.
apex:column Tags
- Defines each column in the table and displays data fields for each DataLoadTest__c record:
  - Name Column: Displays the record’s Name field and includes an apex:actionsupport tag.
    - apex:actionsupport Tag:
      - event="onclick": When a user clicks on a name, this triggers a partial page refresh.
      - rerender="out": Specifies that only the out panel (see later) will be rerendered, reducing load time.
      - status="mystatus": Displays the loading text specified in mystatus.
      - apex:param Tag: Passes the Id of the clicked record to the page parameters as rId, which is later used to show details in the out panel.
  - City Column: Displays the custom field City__c.
  - Country Column: Displays the custom field Country__c.
  - Phone Column: Displays the custom field phone__c.
apex:actionstatus Tag
- Provides feedback on the status of the page action, particularly when the Name link is clicked.
- id="mystatus": Sets the ID of the status element.
- startText="loading.................": Displays “loading……………..” when the action begins.
- <apexname=”stop”>: Defines the panel to be displayed when the action completes.
apex:outputpanel Tag
- id="out": Rerender target for the partial page refresh triggered by clicking the Name.
- apex:detail Tag
  - subject="{!$CurrentPage.parameters.rId}": Shows the record detail for the Id passed as rId in the parameters.
  - relatedList="false": Displays only the detail section without related lists.

Summary of User Interaction

When a user clicks a record’s Name, the apex:actionsupport triggers:

The mystatus action status displays “loading……………..”.
The ID of the clicked record is passed as a parameter (rId).
The out panel is rerendered to display the detailed view of the record with the specified Id.
Once loaded, the mystatus action status stops, removing the loading message.

Detail page Display using CommandLink:

Visualforce Page:
<apex:page sidebar="false" standardController="DataLoadTest__c" recordSetVar="records">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:pageBlockTable value="{!records}" var="r">
<apex:column headerValue="Name">
<apex:commandLink value="{!r.Name}" rerender="out" status="mystatus">
<apex:param name="rId" value="{!r.Id}"/>
</apex:commandLink>
</apex:column>
<apex:column headerValue="City">
{!r.City__c}
</apex:column>
<apex:column headerValue="Country__c">
{!r.Country__c}
</apex:column>
<apex:column headerValue="phone">
{!r.phone__c}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:actionstatus id="mystatus" startText="loading.................">
<apex:facet name="stop">
<apex:outputpanel id="out">
<apex:detail subject="{!$CurrentPage.parameters.rId}" relatedList="false"/>
</apex:outputpanel>
</apex:facet>
</apex:actionstatus>
</apex:form>
</apex:page>