Using Visualforce page components to display a records detail page

We would be learning some important Visualforce tags which are very frequently used on a hectic programmers day.

recordSetVar

In order to associate a page with a Standard Controller, we use this attribute. It is used as a variable name for the record collection. By using this variable name, we can access the objects data.

Example - recordSetVar

We have an custom object name Employee and has fields EmpId, Salary, Date Of Joining and Designation.

Visualforce Page:

<apex:page standardController = "Employee__c" recordSetVar = "emprec">
   <apex:form>
          <apex:repeat value="{!emprec}" var="emp">
               {!emp.Salary__c},{!emp.Date_Of_Joining__c}, {!emp.Designation__c} 

            <br/>
          </apex:repeat>
  </apex:form>
</apex:page>

<apex:actionsupport>

It is a component which adds Ajax Support to another components, which involves an Action (calling the apex), Event (Onclick, mouseOver ...) and Rerender.

Action - {!incrementCounter}, calling of Apex Methods
Event - "OnClick", When clicked, performs the Action
Rerender - "counter" , counter is the Id of an OutPutpanel, So once after the Action has taken place, it redirects to mentioned Id.
Status - Providing a message for the viewer or the client, telling him that the background process is going on, please wait or the page is loading.

OutPutPanel - This is the most used Visualforce tag by a developer. Many statements can be embedded in this outputPanel like when to show this panel and when not to.

Below Example has been taken from Salesforce.com for better understanding. 

<apex:page controller="exampleCon">
    <apex:form>
        <apex:outputpanel id="counter">
          <apex:outputText value="Click Me!: {!count}"/>
           <apex:actionSupport event="onclick" 
                               action="{!incrementCounter}" 
                               rerender="counter" status="counterStatus"/>
        </apex:outputpanel>
        <apex:actionStatus id="counterStatus" 
                           startText=" (incrementing...)" 
                           stopText=" (done)"/>
    </apex:form>
</apex:page>    

Apex Class
public class exampleCon {
    Integer count = 0;
                        
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                    
    public Integer getCount() {
        return count;
    }
}

<apex:param>
This is a child component. This can be only the child component for the below parent components. We can pass a record's Id.

·         <apex:actionFunction>

·         <apex:actionSupport>

·         <apex:commandLink>

·         <apex:outputLink>

·         <apex:outputText>

·         <flow:interview>

<apex:facet>

Facet is a place holder for content that is rendered in a specific part of its parent component of an datatable.

For more info on apex:facet,  Click here

{!$CurrentPage.parameters.rId}

Fetches the currentPages rId, which has been passed by apex:param

relatedList

RelatedList of the detail page can be switched "On" & "Off".

Now i guess, we are pretty much aware of the components used in our below page, please have a look and figure out yourselves what's in store. We have provided you the output to imagine what can be achieved by few simple lines of code. Cheers! Happy Coding!!! 

Visualforce Page

<apex:page sidebar="false" standardController="MybookSubs__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 headerVal ue="No Of Pages">
                      {!r.No_of_Pages__c}
                  </apex:column>
                  <apex:column headerValue="Website">
                      {!r.Website__c}
                  </apex:column>
                  <apex:column headerValue="Price">
                      {!r.Price__c}
                  </apex:column>
                  <apex:column headerValue="Author">
                      {!r.Author__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>

When the Page loads, we have the records popping up by using our recordSetVar

When clicked on Name, onclick event takes place and apex:param passes the record id as shown in the above code.

Below outputPanel which holds the detail page of the record id passed is rendered, without the presence of its related list.

It's cool, isn't it? That's it folks! Please share your feedback to enhance this post.