,

Adding a Related Detail View to a Visualforce Page

You can modify your Visualforce page to display the detail information on the same page. You already know that you can use a single detail tag to bring up detail information, so you only have to learn how to summon that information to your current Visualforce page.

The outputLink component you used in the previous section simply created a link in your page that directed the user to another page. In order to get additional information to display on the same page, you must change the page specification a little bit.

The apex:command components, when activated by a user, submits the current page to the Force Platform server, and returns a new version of the page to the user.

Note

Submitting a page also submits, by default, any changes the user has made to data presented by the page.


You already used this functionality with the Save button for the main Position portion of the page. The commandButton submitted the page to the Force Platform standard controller that executed the standard Save action for the record and returned an updated version of the page to the browser.

For this task, you use a commandLink without asking for a specific action on the Force Platform server.

You start by adding a detail component to your page.

1.
Add <apex:detail> tags between the closing form tag (</apex:form>) and the closing page tag (</apex:page>). Add the title="false" attribute to suppress the title and heading for the detail. You will add an attribute to this component to point to the right detail later in this section.

2.
Remove the contents of the first column in the pageBlockTable. Add <apex:comandLink> tags within the column tags.

3.
Add a value attribute to make the link show the first and last name of the candidate, which will change the initial commandLink tag to the following:

<apex:commandLink value="{!JA.Candidate__r.First_Name__c}
{!JA.Candidate__r.Last_Name__c}">

4.
To complete the display of your new column, add headervalue="Candidates" to the initial column tag for the first column.

You have your command link in place, but you still have to find a way to point the detail component to the proper Candidate record. You know the expression syntax for the appropriate ID field, but how do you pass it over to the detail component?

Several different Visualforce components, including outputLink, outputText and the different action components, allow you to attach a parameter to the page. A parameter is available to other components on the page, so the apex:param is a perfect way to hand over the Candidate ID to the detail component.

5.
Add <apex:param> tags within the commandLink tags. Set the name attribute of the initial tag to "candidate" and the value attribute to the expression for the Candidate ID, resulting in the following markup:

<apex:param name="candidate" value="{!JA.Candidate__r.ID}">

Now you can return to the detail component and use this value to associate the proper record with the component.

6.
Add a subject attribute to the initial detail tag. The value for the subject uses another global Visualforce variable to access parameters by name, as in this markup:

<apex:detail subject="{!$CurrentPage.parameters.candidate}"
title="false">

Tip

What happens if this parameter does not have a value, as when a user first enters the page? The display of the detail component is automatically suppressed if the subject value for the component is null. You can use this capability to hide the detail component by simply using a link or action function to set the value of the candidate param to null.

7.
Your work is done. Save your Visualforce page and then click a candidate link to produce the page shown below.



Figure 163. Your Visualforce Page displaying an added detail view

[View full size image]

The code for this version of your Visualforce page is:

<apex:page standardController="Position__c" id="thePage">
    <apex:form >
        <apex:pageBlock>
        <apex:pageMessages></apex:pageMessages>
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton
              action="{!save}" value="Save">
              </apex:commandButton>
            <apex:commandButton
              action="{!cancel}" value="Cancel">
              </apex:commandButton>
        </apex:pageBlockButtons>
        <apex:pageBlockSection columns="1">
            <apex:inputField
              value="{!Position__c.Department__c}">
              </apex:inputField>
            <apex:inputField
              value="{!Position__c.Job_Description__c}">
              </apex:inputField>
        </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:pageBlock >
        <apex:pageblockSection>
        <apex:pageblockTable
          value="{!Position__c.Job_Application__r}" var="JA">
            <apex:column headerValue="Candidate">
                <apex:commandLink
                    value="{!JA.Candidate__r.First_Name__c}
                    {!JA.Candidate__r.Last_Name__c}">
                 <apex:param name="candidate"
                   value="{!JA.Candidate__r.ID}"></apex:param>
       </apex:commandLink>
            </apex:column >
            <apex:column
              value="{!JA.Candidate_Qualified__c}">
              </apex:column>
        </apex:pageblockTable>
        </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
        <apex:detail
          subject="{!$CurrentPage.parameters.candidate}"
          title="false" id="candidateDetail">
        </apex:detail>
</apex:page>

Your Visualforce page is getting more and more robust. Your next task is to bring this page into the world of Web 2.0, with its wondrous AJAX capabilities.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.217.167.170