function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
JComplianceJCompliance 

Code Example Request

Hey All -

 

I know I have seen this done, but was hoping someone could direct me to an example.

 

I am displaying a list of records on a VF page. When I click on one of those records I would like the detail for the record to display below the list. Is anyone aware of where I can find this?

 

JP

Best Answer chosen by Admin (Salesforce Developers) 
SeAlVaSeAlVa

Try

<apex:page controller="Code_Example_Request_Controller">
  <apex:messages id="mensajes" />
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockSection >
        <apex:pageBlockTable value="{!contacts}" var="contact">
          <apex:column headerValue="{!$ObjectType.contact.fields.name.label}" style="cursor:pointer">
            <apex:outputText value="{!contact.name}" />
            <apex:actionSupport event="onclick" reRender="details,mensajes" status="status">
              <apex:param name="ID" value="{!contact.id}" assignTo="{!selected}"/>
            </apex:actionSupport>
          </apex:column>
        </apex:pageBlockTable>
      </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:outputPanel id="details">
    <apex:pageBlock rendered="{!NOT(ISNULL(selected))}">
      <apex:actionStatus id="status">
        <apex:facet name="start" >Loading</apex:facet>
        <apex:facet name="stop" ><apex:detail relatedListHover="true" subject="{!selected}" /></apex:facet>
      </apex:actionStatus>
    </apex:pageBlock>
    </apex:outputPanel>
  </apex:form>
</apex:page>

 Controller

public with sharing class Code_Example_Request_Controller {
  public List<Contact> contacts = [select Name from Contact]; 
  public ID selected {get;set;}
  public List<Contact> getContacts(){ return contacts; }
}

 

All Answers

SeAlVaSeAlVa

Try

<apex:page controller="Code_Example_Request_Controller">
  <apex:messages id="mensajes" />
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockSection >
        <apex:pageBlockTable value="{!contacts}" var="contact">
          <apex:column headerValue="{!$ObjectType.contact.fields.name.label}" style="cursor:pointer">
            <apex:outputText value="{!contact.name}" />
            <apex:actionSupport event="onclick" reRender="details,mensajes" status="status">
              <apex:param name="ID" value="{!contact.id}" assignTo="{!selected}"/>
            </apex:actionSupport>
          </apex:column>
        </apex:pageBlockTable>
      </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:outputPanel id="details">
    <apex:pageBlock rendered="{!NOT(ISNULL(selected))}">
      <apex:actionStatus id="status">
        <apex:facet name="start" >Loading</apex:facet>
        <apex:facet name="stop" ><apex:detail relatedListHover="true" subject="{!selected}" /></apex:facet>
      </apex:actionStatus>
    </apex:pageBlock>
    </apex:outputPanel>
  </apex:form>
</apex:page>

 Controller

public with sharing class Code_Example_Request_Controller {
  public List<Contact> contacts = [select Name from Contact]; 
  public ID selected {get;set;}
  public List<Contact> getContacts(){ return contacts; }
}

 

This was selected as the best answer
JComplianceJCompliance

The code you provided gave me exactly the start that I needed. Thank you very much. I have now created the interface I was looking for. That was my first foray into variable interface components and it taught me a great deal.

 

Once again.

 

Thank you,

 

JP